Javascript jQuery滚动超时

Javascript jQuery滚动超时,javascript,jquery,scroll,Javascript,Jquery,Scroll,我试图在页面滚动上设置一个延迟,这样如果我设置一些动画,它就不会被破坏。这是我的密码: var lastScrollY = 0, delayFlag = true, delayTime = 1000; $(window).on('scroll', function(e) { if(delayFlag == true) { delayFlag = false; var posY = $(this).scrollTop(),

我试图在页面滚动上设置一个延迟,这样如果我设置一些动画,它就不会被破坏。这是我的密码:

var lastScrollY = 0,
    delayFlag = true,
    delayTime = 1000;

$(window).on('scroll', function(e) {
    if(delayFlag == true) {
        delayFlag = false;
        var posY = $(this).scrollTop(),
            sectionH = $('.page').height(),
            multiplier = (Math.round(lastScrollY / sectionH));

        if(lastScrollY > posY) {
            $(window).scrollTop((multiplier - 1) * sectionH);
        }
        else {
            $(window).scrollTop((multiplier + 1) * sectionH);
        }

        lastScrollY = posY;

        setTimeout(function() { delayFlag = true }, delayTime);
    }
    else {
        e.preventDefault();
    }
});
jQuery
preventDefault()
不工作。有什么方法可以延迟scroll事件吗?

e.preventDefault()用于防止事件的默认操作。例如,单击锚定将导致页面导航到锚定的href上存储的地址,并调用
e.preventDefault()将导致此导航不发生

e.preventDefault()不会取消刚刚发生的事件。在表单输入的
onchange
事件中调用它不会将其值恢复到原来的值,在scroll事件中调用它也不会取消滚动。

e.preventDefault()用于防止事件的默认操作。例如,单击锚定将导致页面导航到锚定的href上存储的地址,并调用
e.preventDefault()将导致此导航不发生


e.preventDefault()不会取消刚刚发生的事件。在表单输入的
onchange
事件中调用它不会将其值恢复到原来的值,在scroll事件中调用它也不会取消滚动。

虽然从用户体验的角度来看,我不建议这样做(就我个人而言,我讨厌那些阻止我访问网站某个地方的页面,只是为了让我不得不观看他们的广告或其他与你有关的内容,而且我很确定我不是唯一一个…),你可以做的不是捕获滚动事件,而是关闭滚动以开始该区域

因此,请按照以下思路做一些事情(例如jsFiddle:):

在CSS中:

.noscroll {
    overflow:hidden;
}
在你的JS中:

var lastScrollY = 0,
    delayFlag = true,
    delayTime = 1000;

$(function(){
   $("body").addClass("noscroll"); 

    window.setTimeout(function(){
        $("body").removeClass("noscroll");
    }, delayTime );
});

虽然我不建议这样做,但从用户体验的角度来看(就个人而言,我讨厌那些阻止我去网站某个地方的页面,只是为了让我看他们的广告或其他让你讨厌的东西,而且我相当确定我不是唯一一个…),你可能能做的,不是捕捉滚动事件,而是关闭该区域的滚动

因此,请按照以下思路做一些事情(例如jsFiddle:):

在CSS中:

.noscroll {
    overflow:hidden;
}
在你的JS中:

var lastScrollY = 0,
    delayFlag = true,
    delayTime = 1000;

$(function(){
   $("body").addClass("noscroll"); 

    window.setTimeout(function(){
        $("body").removeClass("noscroll");
    }, delayTime );
});

学术上来说,这是一个有趣的问题。然而,就用户体验而言,这是一个不可靠的领域。如果没有很好的理由,就不应该覆盖用户预期的交互。用户开始将你的应用程序/网页视为“有缺陷”和“难以使用”如果像滚动这样的基本功能在到达那里时停止工作。从学术角度来说,这是一个有趣的问题。但是,从用户体验角度来说,这是一个不可靠的领域。如果没有真正好的理由,就不应该覆盖用户预期的交互。用户开始认为你的应用程序/网页“有缺陷”和“难以使用”如果基本的东西,如滚动停止工作,当他们到达那里。