Javascript 在动画完成之前防止滚动
我正在使用此代码滚动:Javascript 在动画完成之前防止滚动,javascript,jquery,scroll,jquery-animate,Javascript,Jquery,Scroll,Jquery Animate,我正在使用此代码滚动: if (window.addEventListener) { window.addEventListener('DOMMouseScroll', wheel, false); } window.onmousewheel = document.onmousewheel = wheel; function wheel(event) { var delta = 0; if (event.wheelDelta) { (delta = ev
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = wheel;
function wheel(event) {
var delta = 0;
if (event.wheelDelta) {
(delta = event.wheelDelta / 120);
} else if (event.detail) {
(delta = -event.detail / 3);
}
handle(delta);
if (event.preventDefault) {
(event.preventDefault());
}
event.returnValue = false;
}
function handle(delta) {
var time = 800;
var distance = 300;
$('html, body').stop().animate({
scrollTop: $(window).scrollTop() - (distance * delta)
}, time);
}
一切正常,但当用户尝试多次滚动时出现的小步骤有点烦人
我无法使用一些自定义滚动条来避免这个问题,因为我正在使用它来产生相同的效果
有没有办法防止用户再次滚动,直到动画结束 有两种方法。一个更难,但我认为这是你所追求的。第二个答案已经在评论中了
我正在做的是禁用与滚动相关的键盘事件、鼠标滚动和按钮。
删除溢出的缺点是滚动条正在消失,这有时会让一些用户感到困惑
// code from here https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily
var keys = {37: 1, 38: 1, 39: 1, 40: 1};
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}
function disableScroll() {
if (window.addEventListener) // older FF
window.addEventListener('DOMMouseScroll', preventDefault, false);
window.onwheel = preventDefault; // modern standard
window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
window.ontouchmove = preventDefault; // mobile
document.onkeydown = preventDefaultForScrollKeys;
}
function enableScroll() {
if (window.removeEventListener)
window.removeEventListener('DOMMouseScroll', preventDefault, false);
window.onmousewheel = document.onmousewheel = null;
window.onwheel = null;
window.ontouchmove = null;
document.onkeydown = null;
}
// your code
function handle(delta) {
var time = 800;
var distance = 300;
$('html, body').stop().animate({
scrollTop: $(window).scrollTop() - (distance * delta)
}, time,
start:function(){
disableScroll();
},
complete:function(){
enableScroll()
});
}在动画之前设置可滚动元素的
overflow-y:hidden
,并在动画完成后恢复为自动。@marekful哇,这么简单吗?现在好多了。谢谢顺便说一句,我是新来的。我怎样才能把你的答案标记为有用的答案呢?我不知道我是否做错了什么,但两种方法都有相同的结果。我会接受这两个有用的答案。