Question

我在height: 100% / overflow: auto上使用html和body来修复Chrome上的滚动错误。但是ScrollY / ScrollTop现在总是返回0。在这种情况下有没有办法检查滚动位置？

HTML：

<html>
    <body>
        <div class="wrapper">
            <div class="top-nav">
            <div class="scroll-wrapper">
        </div>
    <body>
</html>

CSS：

html {
    height: 100%;
    overflow: auto;

    body {
        height: 100%;
        overflow: auto;

        .wrapper {
            .top-nav {
                z-index: 999;
                position: fixed;
                top: 0;
            }
            .scroll-wrapper {
                padding-top: 45px;
            }
        }
    }
}

JS：

    // Add style to top-nav when scrolling down

    $('.wrapper').scroll(function () {
        if (window.scrollY > 0)                        //always 0
        if ($('.wrapper')[0].scrollTop > 0)   
        if ($('.scroll-wrapper')[0].scrollTop > 0)
    }

Answer 1

修改

您的问题似乎实际上来自html和html body overflow: scroll {。}}。

尝试删除其中一个CSS规则，看看您的初始问题是否仍然已解决。

html { height: 100%; /* overflow: auto; */ body { height: 100%; overflow: auto; /* ... */ } }

您还需要更改您的javascript以检查文档滚动而不是包装。

$(document).scroll(function () { console.log(document.body.scrollTop) if (document.body.scrollTop > 0) { // Perform Action } })

希望能解决您的问题。

当html和body的高度为100％时，ScrollY / ScrollTop不起作用

1 个答案: