使用 javascript 和“位置：粘性”div 滚动

Question

我有一个反应应用程序，它基本上是一个有 2 列的容器。 左列是一个列表，右列是一个带有 position 的 div（它实际上是一个带有引脚的 map。必须固定在屏幕上）。 每个列表项在右列中都是可点击的。 当用户单击标题时，必须滚动屏幕以在左列显示当前列表项。

问题是当屏幕滚动到列表末尾的某个项目时，右列也会滚动并且不会保持固定。

当用户单击某个标题时，我想保持右列始终固定，而不管左列列表中元素的 position 是什么。 知道如何解决吗？

https://codesandbox.io/s/scrolling-with-react-yq81r

Answer 1

我在 CodeSandbox 上更改了一些代码。

.right {
  background-color: #cacaca;
}

.right ul {
  top: 0;
  position: sticky;
}

如果我理解正确，这将起作用。