javascript - 我可以使用 .scrollTop 监听 div 中的滚动吗(无 jQuery)

Question

编辑:已解决

这是工作代码(检查 perspective 支持，如果它存在创建 CSS 视差并监听 div 内的滚动效果，否则它默认监听 window.scroll):

html,body {height: 100%; width: 100%;}
#nav {
    display:block;
    background:#d9ffff;
    position:fixed;
    z-index:10000;  
    width:100%;
    height:100px;
    padding-top:0px;
    transition: all 0.6s;
}
.prllx_group {
    position: relative;
    height: 100vh;
}
div {height:400px}
#one {background:#d9d9ff}
#two {background:#d9ffd9}
#three {background:#ffd9d9} 

@supports (perspective: 1px) {  

    body, html {
        overflow: hidden;
        height: 100%;
        width: 100%;
    }
    body {
        -webkit-transform: translateZ(0px);
        transform: translateZ(0px);
    }

    .prllx {
        position:relative;
        height: 45em;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-perspective: 300px;
        perspective: 300px;
        perspective-origin-x: 100%;
    }
    .prllx_group {
        position:relative;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
 }

HTML:

<nav id="nav">
    <ul class="menu">
        <li><a href="#one">ONE</a></li>
        <li><a href="#two">TWO</a></li>
        <li><a href="#three">THREE</a></li>
    </ul>
</nav>

<div id="parallax" class="prllx">

    <div></div>
    <div id="one" class="prllx_group">...</div>
    <div id="two" class="prllx_group">...</div>
    <div id="three" class="prllx_group">...</div>
    <div></div>
 </div>

JS:

    var container = window;
    var scrolledDiv = document.body;
    var hello = 1;

    if( typeof CSS !== "undefined" &&
    typeof CSS.supports !== "undefined" &&
    !CSS.supports("-webkit-overflow-scrolling", "touch") &&
    CSS.supports("perspective", "1px")) {
        var container = document.getElementById('parallax');
        var scrolledDiv = document.getElementById('parallax');
    };

    container.onscroll = function isTheTop() {
    var headerElement = document.getElementById('nav');
    var headerHeight = headerElement.offsetHeight;
    if (scrolledDiv.scrollTop > 80 || document.documentElement.scrollTop > headerHeight) {
        headerElement.style.background='rgba(29,29,29,0.9)'; 
        headerElement.style.paddingTop='0';
        headerElement.style.boxShadow='0 0 0.6em #1d1d1d';

    } else {
        headerElement.style.background='rgba(0,0,0,0)'; 
        headerElement.style.paddingTop='20px';
        headerElement.style.boxShadow='0';
    }
};

我还确保脚本在 HTML 代码之后运行，在页面末尾或延迟运行，然后才能正常工作。

谢谢!

---

原问题:

我无法让以下脚本监听 div 内的滚动，而不是窗口滚动。如果我尝试使用 CSS 视差效果(即所有内容都在 div 内，它相对于 body 保持静止，并且所有内容都在 div< 内滚动.)

这是我的 CSS

与上面相同的 CSS

这是我的 HTML:

与上面相同的 HTML

这里是 JS(如果我覆盖 @supports，它会起作用——例如，使用 !——所以它默认为未增强的内容):

function isTheTop() {
    var headerElement = document.getElementById('nav');
    var headerHeight = headerElement.offsetHeight;
    if (document.body.scrollTop > 80 || document.documentElement.scrollTop > headerHeight) {
        headerElement.style.background='rgba(29,29,29,0.9)'; 
        headerElement.style.paddingTop='0';
        headerElement.style.boxShadow='0 0 0.6em #1d1d1d';

    } else {
        headerElement.style.background='rgba(0,0,0,0)'; 
        headerElement.style.paddingTop='20px';
        headerElement.style.boxShadow='0';
    }
};
window.onscroll = function() {isTheTop()};

我尝试监听 parallax.onscroll(而不是 window.onscroll)，但效果不佳。

Answer 1

如这里所述 https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onscroll 如果您不想在文档正在滚动时触发 onscroll 事件处理程序，但只是这个元素，您应该能够执行此操作:

var scrolledDiv = document.getElementById("myScrollingDiv");
scrolledDiv.onscroll = function(){.....};

或者，如果上述方法不起作用(我现在没有时间重新创建您的案例并立即对其进行测试)，您可以这样做:

window.onscroll = function() {isTheTop()};

function isTheTop() {
    if(scrolledDiv.scrollTop > 80) // rest of your code...
}