在粘性元素上使用 scrollIntoView

Question

我正在嘗試滾動一個位置粘到頁面中心的元素。

這意味着它在文檔流中的非卡住位置應該在視圖的中心。

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 是否應該處理粘性元素？

我該如何解決這個問題？

Answer 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>

很快....