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-margin
和scroll-padding
的官方示例中只有關于scroll-snap-type
的應用場景,導致我一直誤以為這個屬性就是和scroll-snap-type
搭配使用的,沒有朝其他方向上思考。另外,從時間上來看,這個屬性確實是和scroll-snap-type
幾乎是一同推出的(chrome上),這點從兼容性上可以看出,這樣有點更堅信了前面的誤導
所以,一直以來,這樣一個超級好用的 CSS 屬性被我忽略了,可惜??
不過,現(xiàn)在了解也不晚,下面來總結一下
- 默認情況下自動滾動定位都是與滾動容器貼邊的,有時候并不美好
scroll-padding
和scroll-margin
可以在自動滾動定位時預留指定的間距scroll-margin
作用對象是目標元素,scroll-padding
作用對象是滾動容器- 滾動定位方式有錨點定位、
scrollIntoView
定位、focus
定位、還有Scroll-snap
定位 - 體驗增強屬性,兼容性還不錯,主要是
safari
拖后腿
以上就是CSS設置自動滾動定位的間距的方法的詳細內容,更多關于CSS設置自動滾動間距的資料請關注腳本之家其它相關文章!
相關文章
- 這篇文章主要給大家介紹了CSS中margin的用法和常見問題的分析,文中介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面來一起看看吧。2017-06-28
css解決display:inline-block;產生的縫隙(間隙)的方法
本篇文章主要介紹了css解決display:inline-block;產生的縫隙(間隙)的方法,具有一定的參考價值,有需要的可以了解一下。2016-12-14- 給當前定高元素, 設置line-height屬性, 其屬性值等于當前元素的height值,今天了解到了一條相關知識, 明白這個方法的實現(xiàn)原理。在此與大家分享下2013-11-20
- 在網頁布局中經常會用到css控制字間距和對齊方式,有些朋友對其屬性不是很熟悉,下面為大家詳細介紹下,感興趣的朋有可以參考下哈2013-06-16
- 如何設置單詞字體間距?在div布局中經常會遇到這樣的問題,適當的間距可以友好界面,利用閑暇時間整理了一些,有需求的朋友可以參考下2012-12-30
- HTM,CSS,怎樣去掉橫排圖片之間的間距,是我們的一大頭疼問題,于是本人搜集整理一下,曬出來和大家分享,希望可以幫助你們2012-12-11
- 我們可以從表中看到在這里可以定義文本的文字間距、字母間距、裝飾、對齊方式、縮進方式和行高等屬性。2010-07-04
- 網頁制作Webjx文章簡介:本文主要講解如何用CSS控制網頁段落行間距的三個實例:1、使用百分比設置行間距,2、使用像素值設置行間距,3、使用數值來設置行間距。2009-04-02
CSS去除表格的默認間距并且制作1px的細線表-CSS教程-網頁制作-網頁教學
現(xiàn)在在所謂“div css”的風氣下,很多人放棄了表格,其實應該讓每個標簽物盡其用,在表現(xiàn)數據的地方,我們還是應該使用table。但是,我們在建立table的時候,會2008-10-17