通過錨鏈接偏移瀏覽器原生平滑滾動

Question

我的文檔正在使用通過 CSS（而不是 javascript）定義的瀏覽器原生平滑滾動行為，並使用錨鏈接在單擊時向下滾動到頁面的指定部分。

這工作正常，除了錨點位於頁面頂部最終隱藏在動畫滾動完成后固定到屏幕頂部的粘性導航欄下方。 因此，我需要偏移滾動的目標 Y 坐標。

示例（當您單擊時）：

 @media ( prefers-reduced-motion: no-preference ) { html { scroll-behavior: smooth; } } nav { position: fixed; top: 0; background-color: rgba(204, 204, 204, 0.9); padding: 1rem; text-align: center; width: 100%; } body { margin: 0; } main { margin: 4rem 1rem 120vh; }

 <nav>Nav Bar</nav> <main> <a href="#example">Example Anchor Link</a> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <p id="example">Scroll Target</p> </main>

有沒有辦法偏移滾動目標，使其不被導航欄覆蓋？ 我認為瀏覽器的滾動 animation 完成時不會觸發 javascript 事件。 我還沒有看到自定義瀏覽器的 animation 持續時間的方法。

Answer 1

我只是偶然發現了這個問題......

答案很簡單，你總是可以給目標元素一些 padding top，在這種情況下，例如 60px 的 padding，因為導航欄的高度是 50px。 這將作為一個偏移量。

 @media ( prefers-reduced-motion: no-preference ) { html { scroll-behavior: smooth; } } nav { position: fixed; top: 0; background-color: rgba(204, 204, 204, 0.9); padding: 1rem; text-align: center; width: 100%; } body { margin: 0; } main { margin: 4rem 1rem 120vh; }

 <nav>Nav Bar</nav> <main> <a href="#example">Example Anchor Link</a> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <p id="example" style="padding-top: 60px;">Scroll Target</p> </main>