欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS設置自動滾動定位的間距的方法

  發(fā)布時間:2023-09-22 12:03:00   作者:阿虎兒   我要評論
這篇文章主要給大家介紹CSS設置自動滾動定位的間距的方法,文中有詳細的代碼示例和圖文介紹,對大家的學習或工作有一定的價值,需要的朋友可以參考下

介紹兩個和滾動定位相關的 CSS 屬性:scroll-padding[1]和 scroll-margin[2]

在平時開發(fā)中,經常會碰到需要快速定位的問題,比如常見的錨點定位

<ul>
??<li><a?href="#語法">語法</a></li>
??<li><a?href="#示例">示例</a></li>
??...
</ul>
<article>
?<h2?id="語法">語法</h2>
??<p>...</p>
??<h2?id="示例">示例</h2>
??<p>...</p>
??...
</article>

這樣,在點擊a標簽時會自動定位到與之相對應的內容上,如下

但是,這種通過錨點觸發(fā)的定位默認是緊貼滾動容器邊緣的,如果一些定位元素,比如fixed定位的頭部,就會出現(xiàn)被遮擋的情況,如下

可以看到,“示例”這個標題由于緊貼頂部,導致被sticky定位的頭部遮住了。

那么,如何讓自動定位時讓目標元素預留出足夠大的間距呢?

一、一行 CSS解決

沒錯,看似有些麻煩的問題其實可以通過一行 CSS 解決,那就是 scroll-margin[3] ,下面是 MDN 的介紹

scroll-margin 屬性的值代表用于將盒元素拖拽到顯示區(qū)域的拖拽滾動區(qū)域的起點。拖拽滾動區(qū)域由是由轉換后邊框大小的盒元素決定的,它會找到盒元素的矩形邊界(在滾動的容器的坐標空間軸上),并添加指定的起點。

這個描述很官方,有點不知道在說什么??,導致很長一段時間都不知道這個屬性的真正用途。

在上面這個例子中,可以直接給目標設置scroll-margin

h2{
??scroll-margin:?6rem;?
}

設置這個屬性后,當自動滾動定位到h2時,會自動預留6rm的間隔(可以防止被頭部遮擋),下面是演示(紅框表示6rem的間隔)

是不是非常簡單,最終效果如下

其實,MDN官方已經采用了這種方式,經??纯?MDN,會發(fā)現(xiàn)有很多非常巧妙的實現(xiàn),如下

二、還有一個 scroll-padding

scroll-margin比較類似的還有一個 scroll-padding[4],功能都是一樣的,只是作用對象不一樣。

在前面的例子中可以看到,scroll-margin是直接設置目前元素上的,scroll-padding不一樣,它需要設置在滾動容器上,比如

html{
??scroll-padding:?6rem
}

這種方式也是可以達到相同的效果的

一般情況下,兩種方式都可以自行選擇,如果很清楚滾動容器是哪個,可以直接選擇用scroll-padding,否則就用scroll-margin

三、其他滾動定位方式

除了錨點定位以外,還有其他一些方式可以觸發(fā)滾動定位

1. scrollIntoView

有時候,我們需要將指定元素滾動到視線范圍之內,這時就需要用到這樣一個DOM方法:scrollIntoView[5]

element.scrollIntoView();

這個定位和前面的錨點定位一樣,默認也是緊貼滾動容器的,如果設置了scroll-margin或者scroll-pading,也可以實現(xiàn)在滾動定位時自動預留一定間距

2. focus 定位

在默認情況下,元素(比如a鏈接)在focus聚焦時都會自動滾動到視線范圍之內。和上面幾種情況一樣,如果有fixed定位元素,有可能在focus時被遮擋的問題。

如果設置了scroll-margin或者scroll-pading,這樣就可以避免找不到焦點的情況,確保一直都能看到焦點,下面是通過tab鍵聚焦的情況

3. scroll-snap

還有一種情況是滾動捕捉:scroll-snap-type[6],這個屬性可以讓滾動時自動捕捉臨界點。正常情況下,滾動臨界點是緊貼滾動容器的,像這樣

如果希望預留一定的距離如何處理呢?還是這個scroll-margin,下面給第二個元素設置了一定的scroll-margin,效果如下

可以看到,在滾動到第2個元素時,提前預留了一定的距離,而且還可以設置負值,這樣在滾動到第2個元素時,可以提前看到第3個的部分內容

目前我所了解的就是這幾種定位方式,有其他的可以留言告知

四、兼容性和總結

最后來看一下兼容性,一個體驗增強屬性,兼容性還不錯

這里有個疑惑是,都出來這么久了,為啥一直不知道呢?其實我也一直被 MDN 官網誤導了,首先,scroll-marginscroll-padding的官方示例中只有關于scroll-snap-type的應用場景,導致我一直誤以為這個屬性就是和scroll-snap-type搭配使用的,沒有朝其他方向上思考。另外,從時間上來看,這個屬性確實是和scroll-snap-type幾乎是一同推出的(chrome上),這點從兼容性上可以看出,這樣有點更堅信了前面的誤導

所以,一直以來,這樣一個超級好用的 CSS 屬性被我忽略了,可惜??

不過,現(xiàn)在了解也不晚,下面來總結一下

  • 默認情況下自動滾動定位都是與滾動容器貼邊的,有時候并不美好
  • scroll-paddingscroll-margin可以在自動滾動定位時預留指定的間距
  • scroll-margin作用對象是目標元素,scroll-padding作用對象是滾動容器
  • 滾動定位方式有錨點定位、scrollIntoView定位、focus定位、還有Scroll-snap定位
  • 體驗增強屬性,兼容性還不錯,主要是safari拖后腿

以上就是CSS設置自動滾動定位的間距的方法的詳細內容,更多關于CSS設置自動滾動間距的資料請關注腳本之家其它相關文章!

相關文章

最新評論