首页 > 解决方案 > jQuery在滚动之前获取滚动位置以在全屏时使用scrollTop()位置临时禁用滚动

问题描述

我在网站加载时在我的网站顶部有一个全屏运行的动画。我想在动画运行期间(15 秒)禁用滚动,但仅当 Y 滚动位置等于 0 时,才能防止在站点加载 #anchors 时禁用滚动。

问题是在实际滚动之前.scrollTop()没有输出滚动位置。

$(window).scroll(function() {
    var height = $(window).scrollTop();
    console.log(height); // no output before scroll

    if(height  === 0) {
      //$("body").css({"overflow" : "hidden", "height" : "100%"});  //Lock scroll
    }
});


setTimeout(function () {
    $("body").css({"overflow" : "auto", "height" : "auto"}); 
}, 15000);

如何在滚动实际完成之前检测滚动位置?

标签: jquery

解决方案


获取$(window).scrollTop();文档加载时间。如果文档在 y 0 处加载,则添加事件侦听器以滚动。15 秒后,允许滚动并移除事件侦听器。

$(document).ready(function () {
    let scrollHeight = $(window).scrollTop(); // Get scroll height the page loaded at 

    // If we loaded at 0, add the scroll event listener.
    if (scrollHeight == 0) {
        $(window).scroll(function () {
            $("body").css({ "overflow": "hidden", "height": "100%" });  //Lock scroll

            setTimeout(function () {
                $("body").css({ "overflow": "auto", "height": "auto" });
                $(window).unbind("scroll");
            }, 15000);
        });
    }
});

推荐阅读