Question

我正在尝试在网站上编写机制，阻止用户正常滚动。当用户向下或向上滚动时，站点将平滑滚动到下一个或上一个幻灯片（取决于滚动方向）并停在那里（就像当您单击导航栏时）。查看实时预览：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 ready事件上执行scrollControl.disableScroll函数。实际上滚动一旦预防不能完美地工作，有时它会触发两次平滑滚动。我究竟做错了什么？提前感谢任何建议！

Answer 1

我有同样的问题鼠标轮事件被解雇了两次。

function wheelDisabled(event){

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

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

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

Answer 2

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

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

在这种情况下，如果您想以预定义的方式实现滚动，您可以选择动态地将负边距顶部（或水平滚动的负边距左侧）添加到父包装div，以使其外观为滚动。

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

2 个答案: