1. 程式人生 > >css必備知識

css必備知識

1. 平滑滾動

(1)設定屬性:scroll-behavior: smooth;

以前使用錨點跳轉時總是快速的定位到指定位置,而使用平滑滾動後,頁面會有一個滾動的過程,效果更好。

設定時只需要給滾動的盒子設定scroll-behavior: smooth屬性即可,也可以在 css reset 時給 body, html 設定。

(2)除此之外,也可以使用JS提供的scrollIntoView(),傳入引數behavior: ‘smooth’ 。

target.scrollIntoView({
	behavior: 'smooth'
})

如果在css中設定了scroll-behavior: smooth 直接呼叫 target.scrollIntoView即可,不需要再傳入引數。

// 判斷是否支援scroll-behavior屬性
if (typeof window.getComputedStyle(document.body).scrollBehavior == 'undefined') {
	...
}