Question

编辑：已解决

这里是工作代码（检查public class Villager extends Card { public Villager(){ mCharacter = "Villager"; } }支持，如果存在创建CSS视差并在div中侦听效果的滚动，否则默认为侦听perspective）：

window.scroll

HTML：

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;
    }
 }

JS：

<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>

我还确保脚本在HTML代码之后运行，在页面末尾或延迟，然后它可以工作。

谢谢！

原始问题：

我无法获得以下脚本来侦听div中的滚动，而不是窗口滚动。如果我尝试使用CSS视差效果（即所有内容都位于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'; } };内，相对于div仍然保持不变，并且所有内容都在body内滚动。）

这是我的CSS

div

这是我的HTML：

SAME CSS AS ABOVE

这里是JS（如果我覆盖SAME HTML AS ABOVE - 例如@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），但效果不起作用。

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...
}

我可以用.scrollTop（没有jQuery）监听div内的滚动吗？

原始问题：

1 个答案: