1

我正在尝试滚动一个位置粘在页面中心的元素。

这意味着它在文档流中的非卡住位置应该位于视图的中心。

在 codepen 上演示

// 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 是否应该适用于粘性元素？

我该如何解决这个问题？

4

1 回答 1

1

当然，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>

很快....

于 2019-12-13T04:51:24.630 回答