Scroll.top 返回 0 但我可以在元素中滚动

如何解决Scroll.top 返回 0 但我可以在元素中滚动

您好，我正在尝试在滚动时调用一个操作，如果您滚动过该元素，我想激活该功能。

如果我 console.log 它将返回 0，而我可以在元素中滚动。

function scroll(){
    let element = document.getElementById("i");
   let elementcontainer = document.getElementById("phone3")
    console.log(elementcontainer.scrollTop);

  
}

.phone3 {
    position: relative;
    height: 550vh;
    width: 100%;

    .container {
        height: 100vh;
        width: 100%;
        position: sticky;
        top: 0;
        #i {
            transition: ease 0.05s;
            height: 100vh;
            width: 100vw;
            top: 0;
            right: 0;
        }
    }

}

   <script>
    window.onscroll = scroll;
</script>
   <div id="phone3" class="phone3">
        <div id="container" class="container">
            <div id="i"></div>
        </div>
    </div>

解决方法

滚动条附加到视口，所以这是滚动的元素。

试试这个代码：

    function scroll(){
        console.log(document.querySelector('html').scrollTop);  
    }

    window.onscroll = scroll;

要检测元素是否进入视口，您可以将 scrollTop 与元素位置 (= offsetTop) 进行比较并减去视口高度，否则您将有时间元素接触视口顶部。您可以添加一个值来推迟触发器。在下面的示例中，当条件切换为 true 时，元素在视口中为 200 像素。

const vp = document.querySelector('html'),container = document.querySelector('#container');

function scroll(){
    console.log(vp.scrollTop > container.offsetTop - vp.clientHeight + 200);  
}

window.onscroll = scroll;

请注意，有一些边缘情况需要考虑。 offsetTop 给出了元素的外边界和“offsetparent”的内边界之间的距离，当您的布局开始变得更复杂时，这可能不是视口。您可以在此处阅读详细信息：developer mozilla scrollTop。

如果您不想过度沉迷于精美的印刷品，您可以考虑现成的解决方案，例如 waypoint.js。这就是我通常用于此类事情的方法。

编辑：

如果你想在一个元素中滚动，你应该在你的 css 中添加 overflow: auto 来触发滚动条。在这种情况下，您应该向元素添加滚动事件。我稍微编辑了你的 css 和 js：

js：

const scrollParent = document.querySelector('#phone3'),container = document.querySelector('#container');

function scroll(){
    console.log(scrollParent.scrollTop > container.offsetTop - scrollParent.clientHeight + 200);  
}

scrollParent.onscroll = scroll;

CSS：

.phone3 {
  position: relative;
  height: 80vh;
  width: 100%;
  overflow: auto;
  background-color: blue;
}
.phone3 .container {
  height: 200%;
  width: 100%;
  position: absolute;
  top: 120%;
  background-color: pink;
}
.phone3 .container #i {
  transition: ease 0.05s;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
}

如果这不能回答您的问题，您能否更具体地说明您想要实现的目标？