Question

我有heigth:100%的调整大小标头。我需要在用户滚动一次后禁用 0.5秒的滚动。在JavaScript中有没有办法做到这一点？

这是我的代码：

<script>
    function init() {
        window.addEventListener('scroll', function(e){
            var distanceY = window.pageYOffset || document.documentElement.scrollTop,
                shrinkOn = 50,
                header = document.querySelector("header");
            if (distanceY > shrinkOn) {
                classie.add(header,"smaller");         
            } else {
                if (classie.has(header,"smaller")) {
                    classie.remove(header,"smaller");
                }
            }
        });
    }
    window.onload = init();
</script>

Answer 1

我建议您查看此问题的已接受答案：How to disable scrolling temporarily?要暂时禁用此功能，一种策略是设置答案中提到的事件处理程序，然后使用setTimeout持续时间500毫秒然后，setTimeout中的回调函数可以删除事件处理程序。因此，在延迟之后，浏览器行为将恢复正常。

Answer 2

使用下面的脚本，如果用户开始滚动，则会触发该功能，并在0.5秒后禁用滚动。

<script>
    window.onload = function() {
        window.addEventListener('scroll', function(){
            setTimeout(function() {
                var header = document.getElementById("header");
                header.style.overflow = "hidden";
            }, 500 /* miliseconds */);
    };
</script>

如果要在用户开始滚动后禁用滚动0.5秒，可以使用：

<script>
    window.onload = function() {
        window.addEventListener('scroll', function(){
            var header = document.getElementById("header");
            header.style.overflow = "hidden";
            setTimeout(function() {
                header.style.overflow = "auto";
            }, 500 /* miliseconds */);
    };
</script>

用户在JavaScript中滚动一次后禁用滚动0.5秒

2 个答案: