如何在父滚动条上使粘滞div

Question

当它离开屏幕时，我尝试使其保持粘性。

我找到了这个例子

https://codepen.io/geddski/pen/rjYpVr

<sidescroller>
...
</sidescroller>

但是在我的情况下，我滚动了他的父容器。

我的案子：

https://codepen.io/anon/pen/QzNWad

<div class="test">
<sidescroller>
...
</sidescroller>
</div>

是否可以使我的案子发挥作用？

谢谢

Answer 1

在您的width: 100vw;中添加position: fixed;和sidescroller可以达到目的：

sidescroller{
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  background: #000;
  width: 100vw;
  position: fixed;
}

Working codepen