頁面平滑滾動的體驗提高

時間 2019-11-10

標籤頁面平滑滾動體驗提高简体版

原文原文鏈接

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

自己做爲體驗提高的手段，用css

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

兼容性就能夠不用考慮太多html

不支持就直接回去唄瀏覽器

用法：spa

scroll-behavior:smooth寫在滾動容器元素上，能夠讓容器（非鼠標手勢觸發）的滾動變得平滑。code

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

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

凡是須要滾動的地方都加一句scroll-behavior:smooth就行了！get

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

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

html, body { scroll-behavior:smooth; }

scrollIntoView()方法

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

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

語法以下：

target.scrollIntoView({
    behavior: "smooth"
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。