首先,感谢您提前帮助我。
所以我有这个网站,我试图用自定义滚动行为。带有鼠标的电脑中的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