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

Question

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

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

当用户单击某个标题时，我希望保持右列始终固定，无论该元素在左列列表中的位置如何。 知道如何解决吗？

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

Answer 1

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

.right {
  background-color: #cacaca;
}

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

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