我正在尝试滚动一个位置粘在页面中心的元素。
这意味着它在文档流中的非卡住位置应位于视图的中心。
代码笔演示
// This code snippet is here because stack overflow doesn't let me post the codepen link without it.
// Using scrollInToView in a stack overflow snippet doesn't work correctly and will just make it more confusing to demo this issue
// Pseudo code
buttonElement.onClick(e =>
stickyElement.scrollIntoView(options)
)
标题中有导航链接，可以使用scrollIntoView滚动到页面的该部分。
第三部分具有位置粘性。
如果它当前在文档流中(如位置静态/删除(，它正常工作
如果它当前不在文档流中(如绝对位置/固定位置(，它将表现得如此，并且不会一直滚动到它。(就像左下角的页面标题按钮一样。
scrollInToView 是否应该处理粘性元素，考虑到它们有时可能在文档流中？
我该如何解决此问题？
当然，scrollInToView必须处理粘性元素。因为它的行为部分类似于相对(因为位置与 scrollInToView js 的相对响应(并且始终在文档流中。
我发现的解决方法是在粘性元素上方添加一个具有相同 id 的不可见div 元素，并从相同或放置值中删除 id 属性
，如下所示：<div id="3" style="height: 0px; opacity: 0;">
</div>
<button id="10" class="sticky">
3.
Lorem Ipsum is simply dummy text of th
</button>
等等....