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

Question

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

如果我 console.log 它会 return 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>

Answer 1

滚动条附加到视口，因此这是滚动的元素。

试试这个代码：

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

    window.onscroll = scroll;

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

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

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

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

Scroll.top is returning 0 but I can scroll in the element

javascript

wordpress

scrolltop