頁面平滑滾動的體驗提升 轉

scroll-behavior屬性和JS scrollIntoView()方法

scroll-behavior浏览器兼容性

本身作爲體驗提升的手段,用

<a href="#" rel="internal">返回頂部</a>

兼容性就可以不用考慮太多

不支持就直接回去唄

用法:

scroll-behavior:smooth寫在滾動容器元素上,可以讓容器(非鼠標手勢觸發)的滾動變得平滑。

demo:https://www.zhangxinxu.com/study/201810/css-scroll-behavior.php

其實scroll-behavior的使用沒有那麼多花頭,你就記住這麼一句話——

凡是需要滾動的地方都加一句scroll-behavior:smooth就好了!

你別管他用不用得到,也不用管瀏覽器兼容性如何,你都加上。這就像一個不要錢的免費抽獎,沒有中獎,沒關係,又沒什麼損失,中獎了自然好,錦上添花!scroll-behavior:smooth就是這種尿性。

舉個例子,在PC瀏覽器中,網頁默認滾動是在<html>標籤上的,移動端大多數在<body>標籤上,於是,我加上這麼一句:

html, body { scroll-behavior:smooth; }

scrollIntoView()方法

DOM元素的scrollIntoView()方法是一個IE6瀏覽器也支持的原生JS API,可以讓元素進入視區,通過觸發滾動容器的定位實現。

隨着Chrome和Firefox瀏覽器開始支持CSS scroll-behavior屬性,順便對,scrollIntoView()方法進行了升級,使支持更多參數,其中一個參數就是可以使滾動平滑。

語法如下:

target.scrollIntoView({
    behavior: "smooth"
});
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章