我正在制作一个反应应用程序,单击选择框下方的项目时,下一部分中的相应项目会滚动。
上述场景的工作示例: https://codesandbox.io/s/scroll-into-view-in-react-7xtq9
例如:单击项目二,然后其各自的字段集将滚动到顶部..
问题:
-> 现在的要求是我需要添加一个标题,并且在标题下方,两个部分都需要显示。
-> 我已将
style={{ marginTop: "100px" }}
添加到容器 div,例如,
<div id="container" style={{ marginTop: "100px" }}>
<div className="_2iA8p44d0WZ">
<span className="chip _7ahQImy">Item One</span>
<span className="chip _7ahQImy">Item Two</span>
<span className="chip _7ahQImy">Item Three</span>
<span className="chip _7ahQImy">Item Four</span>
<span className="chip _7ahQImy">Item Five</span>
<input
type="text"
className="searchBox"
id="search_input"
placeholder="Select"
autoComplete="off"
value=""
/>
</div>
</div>
-> 这使得容器显示在标题下方。
1) -> 但是当我单击任何项目时,这个
container
div 会隐藏在固定标题后面。
2) -> 滚动元素也隐藏在标题后面。
预期结果:
-> 即使单击任何项目,容器部分和滚动元素也需要从顶部可见。
-> 简单来说,它不应该隐藏在标题后面,需要显示在标题下方。
当前工作示例:
我相信您需要将样式应用到包装您想要滚动的容器的外部容器。这是
div
渲染固定位置标题和内容。
到外面
div
margin-top: 100px
将内容下推。height: calc(100vh - 100px)
,视图窗口的高度减去标题的高度。 注意: 在代码和框中,我调整为 99vh
以防止出现窗口的滚动条,因此您可能需要为实际代码调整这些值。overflow: auto
。style
中删除内联 div
道具。代码
<div
style={{
marginTop: "100px",
height: "calc(99vh - 100px)",
overflow: "auto"
}}
>
{/* Nav */}
<div id="container">
<div className="_2iA8p44d0WZ">
// content
</div>
</div>
{/* fieldsets */}
</div>
(对于谷歌同事)另一个对我有用的更简单的解决方案:将对
scrollIntoView()
的调用调整为更具防御性的调用:
elt.scrollIntoView({block: 'center', inline: 'center', behavior: 'auto'})
根据文档,这尝试将元素放在中心(水平+垂直),而不是总是向下滚动。这足以解决您的问题。
在我的代码库(我没有编写)中,对
scrollIntoView
的所有调用都使用这些参数。