Question

我的目标是跟踪页面的滚动-每当document.body在视口中滚动或不垂直滚动时，我要对此做出反应-例如显示/隐藏导航。

我有一个可行的解决方案，使用了一个虚拟的微小元素（在这种情况下为<div class="container"> <div></div> <div></div> <div></div> <div></div> </div>），但是我想知道如果不使用此类技巧/变通办法，是否还有更好的解决方案-注意：机身的高度无法假定，因此<hr>可能无效

的HTML

intersectionRatio

的CSS

<hr>
<aside>Scrolled</aside>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>

JS

body {
  margin: 0;
  position: relative;
}

hr {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0 none;
}

section {
  border:1px green solid;
  min-height: 400px;
}

aside {
  position: fixed;
  background: yellow;
  padding: 1em;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
}

aside.scrolled {
  display: block;
}

Answer 1

您可以使用onScroll事件来检测正在发生的滚动，然后使用document.scrollTop来锻炼页面已滚动的距离。

IntersectionObserver观察视口中的document.body上边缘

1 个答案: