javascript - 当 css 样式为高度 : 100%; and overflow: scroll; 时检测滚动及其方向

Question

我的用于在向下滚动页面时隐藏导航菜单按钮并在向上滚动时显示导航菜单按钮的 JavaScript 无法与 css hack 一起使用，以防止当菜单显示在图层上时页面在后台滚动。 (这里是 css 方法演示页面:http://www.luxiyalu.com/playground/overlay/)

我的 JavaScript 很烂。我尝试修改脚本 - 使用 element.scrollWidth 和 element.offsetWidth 关系使其工作以检测滚动但无法确定它。

<div class="overlay">
    <div class="overlay-content"></div>
</div>

<div class="background-content">
    lengthy content here
</div>

html, body {
    height: 100%;
}

.overlay{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.8);

    .overlay-content {
        height: 100%;
        overflow: scroll;
    }
}

.background-content{
    height: 100%;
    overflow: auto;
}

    <script type="text/javascript">
    var prevScrollpos = window.pageYOffset;
    window.onscroll = function() {
        var currentScrollPos = window.pageYOffset;
        if (prevScrollpos > currentScrollPos) {
        document.getElementById("mobilemenu").style.top = "0";
        } else {
            document.getElementById("mobilemenu").style.top = "-70px";
                }
    prevScrollpos = currentScrollPos;
    }
    </script>-->

菜单按钮应在向下滚动时隐藏，在向上滚动时应重新出现，而页面的样式如上所示。

Answer 1

编辑:我以为我有，但是刷新缓存后，什么都没有，而且我不能删除帖子，因为某些原因