滚动时禁用滚动

disable scrolling while scrolling

本文关键字：滚动更新时间：2023-09-26

我正在写一个代码，它使100% body.height的滚动动画。一切都很好，但我试图禁用滚动，而动画最后，以防止进一步不必要的行为。我正在使用这个代码

function animate(x) {
    var start = new Date();
    var id = setInterval(function (e) {
        var timepassed = new Date() - start;
        var progress = timepassed / x.duration;
        if (progress > 1) {
            progress = 1;
        }
        var delta = x.delta(progress);
        x.step(delta);
        if (progress == 1) {
            clearInterval(id);
        }
    }, x.delay);

}
function fak(e) {
    e.preventDefault();
    return false;
}
function move(e) {
    e.preventDefault();
    var wheel = e.wheelDelta;
    wheel = (wheel == 120) ? "-1" : "1";
    var body_height = document.body.offsetHeight;
    var scrollIt = body_height * wheel;
    var page = window.pageYOffset;
    animate({
        delay: 10,
        duration: 700,
        delta: function (p) {
            return p;
        },
        step: function (delta) {
            window.scrollTo(0, page + (delta * scrollIt));
        }
    });
    return false;
}
document.body.addEventListener("mousewheel", move, false);
document.body.addEventListener("DOMMouseScroll", move, false);

我试图分配函数fak，在鼠标滚轮上，鼠标滚动间隔，然后在最后使用

恢复原始分配给它们

function animate(x) {
    var start = new Date();
    var id = setInterval(function (e) {
    document.body.addEventListener("mousewheel", fak, false);
    document.body.addEventListener("DOMMouseScroll", fak, false);
        var timepassed = new Date() - start;
        var progress = timepassed / x.duration;
        if (progress > 1) {
            progress = 1;
        }
        var delta = x.delta(progress);
        x.step(delta);
        if (progress == 1) {
            clearInterval(id);
  document.body.addEventListener("mousewheel", move, false);
  document.body.addEventListener("DOMMouseScroll", move, false);
        }
    }, x.delay);

}

但也不工作。现场演示:http://jsfiddle.net/Trolstover/o2pvo2t8/我忽略了什么吗?

我修改了你的代码。

http://jsfiddle.net/o2pvo2t8/2/

在滚动时设置一个标志"running"(在animate()开始时)，并在结束时清除它。只有当没有滚动出现时才执行mov。

希望能有所帮助。

var running;
function animate(x) {
    running = 1;
    var start = new Date();
    var id = setInterval(function (e) {
        var timepassed = new Date() - start;
        var progress = timepassed / x.duration;
        if (progress > 1) {
            progress = 1;
        }
        var delta = x.delta(progress);
        x.step(delta);
        if (progress == 1) {
            clearInterval(id);
            running = 0;
        }
    }, x.delay);

}
function fak(e) {
    e.preventDefault();
    return false;
}
function move(e) {
    e.preventDefault();
    if (running==1) return;
    var wheel = e.wheelDelta;
    console.log(wheel);
    wheel = (wheel == 120) ? "-1" : "1";
    var body_height = document.body.offsetHeight;
    var scrollIt = body_height * wheel;
    var page = window.pageYOffset;
    animate({
        delay: 10,
        duration: 700,
        delta: function (p) {
            return p;
        },
        step: function (delta) {
            window.scrollTo(0, page + (delta * scrollIt));
        }
    });
    return false;
}
document.body.addEventListener("mousewheel", move, false);
document.body.addEventListener("DOMMouseScroll", move, false);