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

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 个解决方案

解决方案1
0 2017-06-27 00:56:32

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

问题描述

1 个解决方案

解决方案1 0 2017-06-27 00:56:32

解决方案1
0 2017-06-27 00:56:32