我正在处理的一个应用程序面临一个非常棘手的问题，并且一直试图解决我的问题，这已经有一段时间了。任何提示将不胜感激！
基本上，我有一个容器，其中包含许多元素；太多以至于它们溢出并且容器滚动。我希望容器中始终有一个特殊元素-即使项目不断在容器的上方和下方不断添加。我已经实现了这一点，但是，这里有个重点：用户手动滚动此容器后，我想禁用以前的行为，即一个特殊项目仍保留在容器的中心，而我无法这样做。
下面是我实现该示例的最佳尝试，这是指向codesandbox of my attempt的链接。我的实现工作的方式是，我有一个容器，其中包含从数组渲染的项目列表，然后是“特殊项目”，然后是从不同数组渲染的一堆其他项目。安装组件后，我运行两个功能：center和updater。 center最初将特殊项目居中，而updater经常使用setInterval将项目添加到两个数组中。每次将项目添加到数组之一时，都会再次运行center，以使特殊项目在其父容器中居中。到目前为止，这可以完美地使特殊项居中。
要禁用此居中行为，我有一个状态为false的布尔值，其初始状态为hasScrolled，并且有一个事件侦听器附加到主容器的onWheel事件上，该事件名为userScrollHandler，该事件侦听器设置{ 1}}至hasScrolled。我的true函数仅在center为假时才使特殊项居中，因此从理论上讲，一旦用户滚动，hasScrolled将为hasScrolled，然后居中行为将停止。不幸的是，这似乎不起作用。我确信，当用户滚动容器时（打开控制台以查看每次滚动的日志）都将同时调用该事件，并且true被设置为hasScrolled。由于某些原因，true函数认为center为假。我尝试了许多其他事情，例如将这些值传递给hasScrolled函数，不保持center处于状态，而只是将其作为合法变量，使用上下文等。这样做，以及为什么我的所有实现都不起作用。任何人都知道如何执行此操作或我做错了什么？
我的实现：
hasScrolled答案 0 :(得分：0)
您能否使Middle元素独立并且只是不渲染它？
{hasScrolled && <div ref={middle} style={middleItemStyle}>
Middle
</div>}