使用触控板去除固定滚动

时间:2017-10-20 01:12:08

标签: javascript jquery html css

首先,感谢您提前帮助我。

所以我有这个网站,我试图用自定义滚动行为。带有鼠标的电脑中的firefox和chrome功能非常棒,当使用带触控板的笔记本电脑,特别是MacBook时,问题就存在。

这是我的代码的小提琴:https://jsfiddle.net/0pn7byo9/

    $(document).ready(function() {

    attachFixScroll();
    var scrolling = false;
    var keys = {32: 1, 33: 1, 34: 1, 35: 1, 36: 1, 37: 1, 38: 1, 39: 1, 40: 1};

    function attachFixScroll() {
        var div = document.getElementById("div1");
        div.addEventListener('mousewheel', preventDefault);
        div.addEventListener('DOMMouseScroll', preventDefault);
        document.onkeydown  = preventDefaultForScrollKeys;
    }

    // left: 37, up: 38, right: 39, down: 40,
    // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36


function preventDefault(e) {
    e = e || window.event;
    if (e.preventDefault)
        e.preventDefault();
    e.returnValue = false;  
    //Call fix scroll
    if ( !scrolling )
        debounce(fixScroll(e), 1000);
}

function preventDefaultForScrollKeys(e) {
    if (keys[e.keyCode]) {
        preventDefault(e);
        return false;
    }
}


function fixScroll(e){
    if ( !scrolling ){
        scrolling = true;

        var h = $("#div2").height();
        var scrollDirection = e.wheelDelta || -e.detail;
        console.log('scrolling');
        if(scrollDirection < 0){
            $('#div1').animate({
                scrollTop: $("#div1").scrollTop() + h
            }, 400, function() { scrolling = false;  });
        } else {

            $('#div1').animate({
                scrollTop: $("#div1").scrollTop() - h
            }, 400, function() { scrolling = false;  });
        }
    }

}


   function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this,
            args = arguments;
        var later = function() {
            timeout = null;
            if ( !immediate ) {
                func.apply(context, args);
            }
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait || 200);
        if ( callNow ) { 
            func.apply(context, args);
        }
      };
    }

    });

我已经尝试过debouncing但Idk为什么它不起作用,唯一的工作就是使用超时在动画结束后转回布尔“滚动”,但是我不得不等待1秒,这真的不顺利完全没有,它在firefox(macbook)中运行良好。

那么我应该怎样做才能在macbook上工作,而不需要等待1秒才能再次滚动。喜欢这个网站:http://dwarfplanet.co

0 个答案:

没有答案