如何防止滚动时跳转网站？

我正在尝试在网站上写入阻止用户正常滚动的机制。当用户向下滚动或向上滚动页面时，将平滑滚动到下一张或上一张幻灯片（取决于滚动方向）并停在那里（就像您点击导航栏时一样）。查看实时预览：CLICK HERE 如何防止滚动时跳转网站？

但是有一个恼人的问题。它在FF（几乎没有跳跃）方面效果很好，但在另一个浏览器（Chrome，Safari，IE）中出现问题 - 跳转。我该如何防止这种情况？下面是我的代码片段。我有一个ScrollControl对象，我阻止滚动：

scrollControl = { 
    keys : [32, 37, 38, 39, 40], 

    scrollTimer : 0, 

    lastScrollFireTime : 0, 

    preventDefault : function(e){ 
          e = e || window.event; 
          if (e.preventDefault) 
           e.preventDefault(); 
          e.returnValue = false; 
         }, 

    keydown : function(e){ 
        for (var i = scrollControl.keys.length; i--;) { 
         if (e.keyCode === scrollControl.keys[i]) { 
          scrollControl.preventDefault(e); 
          return; 
         } 
        } 
       }, 

    wheel : function(e){ 
        scrollControl.preventDefault(e); 
       }, 

    disableScroll : function(){ 
          if (window.addEventListener) { 
            window.addEventListener('DOMMouseScroll', scrollControl.wheel, false); 
           } 
           window.onmousewheel = document.onmousewheel = scrollControl.wheel; 
           document.onkeydown = scrollControl.keydown; 
         }, 

    enableScroll : function(){ 
          if (window.removeEventListener) { 
           window.removeEventListener('DOMMouseScroll', scrollControl.wheel, false); 
          } 
          window.onmousewheel = document.onmousewheel = document.onkeydown = null; 
         } 

}

然后我听着，如果发生的鼠标滚轮，并试图只有一次执行功能（我使用这个插件来检测滚轮PLUGIN）

$(window).mousewheel(function(objEvent, intDelta){ 

    var minScrollTime = 1000; 
    var now = new Date().getTime(); 

    function processScroll() { 
     console.log("scrolling"); 
     if(intDelta>0){ 
     $.smoothScroll({ 
       speed:med.effectDuration, 
       easing:med.scrollEase, 
       scrollTarget:med.prevPage, 
       afterScroll: function(){ 
           med.currentPage = med.prevPage; 
           med.setActiveNav(); 
           med.setSlides(); 
           med.runAnimations(); 

          }}); 
     }else if(intDelta<0){ 
      //scrollControl.disableScroll(); 
       $.smoothScroll({ 
         speed:med.effectDuration, 
         easing:med.scrollEase, 
         scrollTarget:med.nextPage, 
         afterScroll: function(){ 
             med.currentPage = med.nextPage; 
             med.setActiveNav(); 
             med.setSlides(); 
             med.runAnimations(); 

            }}); 
     } 
    } 

    if (!scrollControl.scrollTimer) { 
     if (now - scrollControl.lastScrollFireTime > (3 * minScrollTime)) { 
      processScroll(); // fire immediately on first scroll 
      scrollControl.lastScrollFireTime = now; 
     } 
     scrollTimer = setTimeout(function() { 
      scrollControl.scrollTimer = null; 
      scrollControl.lastScrollFireTime = new Date().getTime(); 
      processScroll(); 
     }, minScrollTime); 
    } 



});

当用户启动网站时，我正在对DOM就绪事件执行scrollControl.disableScroll函数。而实际上滚动一旦预防不起作用，有时它会触发平滑滚动两次。我究竟做错了什么？在此先感谢您的任何建议！

来源

2012-10-05 lukaleli

哇，效果不错！ – spekdrum

而不是试图阻止用JavaScript滚动，我会尝试一种不同的方法。这种方法包括CSS和Javascript，以确保网站从来没有比视口大（因此没有滚动条！）。

使用CSS来强制主包装div（包装网站上所有内容的div）具有overflow：hidden。然后使用Javascript动态确保此div的高度和宽度始终等于视口的高度和宽度。

在这种情况下，如果要以预定义的方式实现滚动，您可以选择动态向父级包装div添加负边距顶点（或负边距左边水平滚动），以使其具有它的外观正在滚动。

来源

2012-10-05 10:02:56 richardaday

我有同样的问题鼠标滚轮事件发生两次。

function wheelDisabled(event){ 

    event.preventDefault(); 
    event.stopImmediatePropagation(); 
    return false; 
}

您也可以使用这两个事件。

window.addEventListener('DOMMouseScroll', wheel, false); 
window.addEventListener('mousewheel', wheel, false);

来源

2012-10-05 10:04:27 Burimi

如何防止滚动时跳转网站？

回答

相关问题