Tailwind CSS 小技巧之 scroll margin 篇

2021/10/01 CSSTailwindCSS

CSS 的 scroll-marginscroll-padding 解決了在跳轉到次級標題時,卻因為上面留白不足,導致畫面頂部顯得緊湊,或是標題被導覽列擋住的問題。而且 scroll-margincaniuse 上的瀏覽器支援度 也已達到了 90% 左右了,當然,IE 是不能用的喔!!

# scroll-margin

scroll-margin 屬性可以設定滾動時,元素相對於容器的外邊距。可以使用在像文章中的次級標題,在導覽到次級標題正常都會直接貼到最頂端,一點空間都不留。用上 scroll-margin 就可以在跳轉到次級標題時增加一些邊距,留下適當的空間看起來也比較不會那麼緊湊。

scroll-margin

這裡看程式碼~ scroll-marginmargin 一樣有 top/bottom/left/right 四個方向可以設定:

<div>
  <h2 id="sub-title" style="scroll-margin-top: 16px">Sub title</h2>
  ...
</div>

或是 Tailwind CSS 的使用方式,可以參考 margin 的使用方式:

<div>
  <h2 id="sub-title" class="scroll-mt-4">Sub title</h2>
  ...
</div>

因為現在 Tailwind 預設沒有增加 scroll-margin 相關的 utility class,所以我們要自己增加 CSS:

@layer utilities {
  .scroll-mt-4 {
    scroll-margin-top: 1rem;
  }
}

這樣就好啦!

# scroll-padding

scroll-padding 則反之,是用在外層的容器元素,讓容器內部滾動時增加計算邊距。常見用法是頁面中有固定在頂部的導覽列時,跳轉到次要標題,卻被導覽列切掉了一半。因此 scroll-padding 就可以設定滾動後容器本身要偏移計算的內距。

scroll-padding

使用方式如下 (也可以在 CSS 檔中設定),一樣也有 top/bottom/left/right 四個方向:

<html style="scroll-padding-top: 56px">
  ...
  <body>
    <header class="navbar">
      <!-- 頂部導覽列 -->
    </header>
    ...
  </body>
</html>

或 Tailwind CSS 用法:

<html class="scroll-pt-14">
  ...
  <body>
    <header class="fixed ...">
      <!-- 頂部導覽列 -->
    </header>
    ...
  </body>
</html>

一樣 Tailwind 也要在 CSS 自訂 utility class:

@layer utilities {
  .scroll-pt-14 {
    scroll-padding-top: 3.5rem;
  }
}

不過你可能會覺得這樣在 Tailwind CSS 中設定比較麻煩 (雖然這些屬性通常是比較少使用),這裡有消息要告訴你,在不久後的未來,Tailwind CSS 將會發布 3.0 的 Alpha 版🎉,其中會包含 scroll-marginscroll-paddingscroll-snap 等滾動相關的 utility class,而且 JIT 會變成預設模式,當然也會有其他的更新,讓我們拭目以待吧😍!