0

我正在尝试在网站上编写防止用户正常滚动的机制。当用户向下或向上滚动时，站点会平滑滚动到下一张或上一张幻灯片（取决于滚动方向）并停在那里（就像您单击导航栏时一样）。查看实时预览：点击这里

但是有一个烦人的问题。它在 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);
    }



});

当用户启动网站时，我正在执行scrollControl.disableScrollDOM 就绪事件的功能。实际上滚动一次预防并不能完美地工作，有时它会触发两次平滑滚动。我究竟做错了什么？在此先感谢您的任何建议！

4

2 回答 2

1

我有同样的问题，鼠标滚轮事件被触发了两次。

function wheelDisabled(event){

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

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

window.addEventListener('DOMMouseScroll', wheel, false);
window.addEventListener('mousewheel', wheel, false);
于 2012-10-05T10:04:27.593 回答
0

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

使用 CSS 强制主包装 div（包装网站上所有内容的 div）具有溢出：隐藏。然后用Javascript动态保证这个div的高和宽总是等于视口的高和宽。

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

于 2012-10-05T10:02:56.987 回答