瀏覽器原生支持平滑滾動

時間 2019-11-06

標籤瀏覽器原生支持平滑滾動欄目瀏覽器简体版

原文原文鏈接

原文地址： www.zhangxinxu.com/wordpress/?…

瀏覽器從去年年末開始，已經開始支持瀏覽器的原平生滑滾動定位，CSS scroll-behavior屬性和JS scrollIntoView()方法均可以。php

1、CSS scroll-behavior與平滑滾動

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

咱們先看一個實際的案例。html

8年前「無JavaScript純CSS實現選項卡輪轉切換效果」這篇文章介紹了一種利用錨點定位純CSS實現選項卡切換的技術（本質上是觸發滾動條滾動）。算法

能夠狠狠地點擊這裏：無JavaScript實現的切換效果demo瀏覽器

實現後的效果參見下GIF截屏：bash

基本功能能夠知足，但有兩個問題，一是因爲改變location的hash實現的定位，會觸發瀏覽器原生滾動行爲，體驗很差；二是選項卡內容的切換「邦邦邦」過於生硬。ide

因而，後來，我發明了一種基於控件元素focus觸發滾動重定位的特性實現的純CSS選項卡切換效果，在《CSS世界》這本書overflow章節有提到，您能夠狠狠的點擊這裏：focus錨點定位和overflow的選項卡切換demowordpress

也是純CSS實現，沒有任何JavaScript代碼，相比直接利用<a>元素的href錨點跳轉方法，此方法不會觸發瀏覽器外部窗體的滾動，體驗更上一層樓，可是還有一個問題，那就是選項卡內容切換的時候，仍是「邦邦邦」這種乾巴巴的效果，並無滑來滑去那種溼溼的效果。動畫

不要擔憂，如今有了CSS scroll-behavior，則平滑滾動的問題也能夠解決了。您能夠狠狠地點擊這裏：CSS scroll-behavior選項卡平滑滾動demoui

相比以前乾巴巴的實現，就多了這麼一句CSS——scroll-behavior:smooth：

.box {
    scroll-behavior: smooth; 
    overflow: hidden; 
}複製代碼

結果一股如沐春風的交互效果撲面而來，參見下面視頻截屏效果（掘金文章不支持嵌入視頻，可去原文查看），或者腦補下面的靜態圖：

更簡單更實際的用途

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

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

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

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

html, body { scroll-behavior:smooth; }複製代碼

此時，點擊以下代碼所示的「返回頂部」連接，就會平滑滾動到頂部。

<a href="#">返回頂部</a>複製代碼

從這一點來看，業界瀏覽器的CSS reset均可以加上這麼一條規則：

html, body { scroll-behavior:smooth; }複製代碼

2、JS scrollIntoView與平滑滾動

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

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

語法以下：

target.scrollIntoView({
    behavior: "smooth"
});複製代碼

咱們隨便打開一個有連接的頁面，把首個連接滾動到屏幕外，而後控制檯輸入相似下面代碼，咱們就能夠看到頁面平滑滾動定位了：

document.links[0].scrollIntoView({
    behavior: "smooth"
});複製代碼

以下視頻截屏：

其它：

scrollIntoView()升級後的方法，除了支持'behavior'，還有'block'和'inline'等參數，有興趣能夠參閱MDN相關文檔。
若是咱們的網頁已經經過CSS設置了scroll-behavior:smooth聲明，則咱們直接執行target.scrollIntoView()方法就會有平滑滾動，無需再額外設置behavior參數。例如，若是你是在鑫空間原站瀏覽的此文章，打開控制檯，執行下面代碼，就能夠看到平滑滾動效果了：
```
document.forms[0].scrollIntoView();複製代碼
```

3、JS平滑滾動向下兼容處理

JS實現平滑滾動並不難，jQuery中animate()方法：

scrollContainer.animate({
    scrollTop: 0
});複製代碼

或者使用requestAnimationFrame API這類原生JS也能實現。例以下面這個我速寫的個方法：

/**
 @description 頁面垂直平滑滾動到指定滾動高度
 @author zhangxinxu(.com)
*/
var scrollSmoothTo = function (position) {
    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function(callback, element) {
            return setTimeout(callback, 17);
        };
    }
    // 當前滾動高度
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 滾動step方法
    var step = function () {
        // 距離目標滾動距離
        var distance = position - scrollTop;
        // 目標滾動位置
        scrollTop = scrollTop + distance / 5;
        if (Math.abs(distance) < 1) {
            window.scrollTo(0, position);
        } else {
            window.scrollTo(0, scrollTop);
            requestAnimationFrame(step);
        }
    };
    step();
};複製代碼

使用的是本身私藏緩動動畫JS小算法，滾動先快後慢。

使用以下，例如，咱們但願網頁平滑滾動到頂部，直接：

scrollSmoothTo(0);複製代碼

就能夠了。

難的是如何支持平滑滾動的瀏覽器原生處理，不支持的瀏覽器仍是使用老的JS方法處理。例如IE瀏覽器和Safari目前還沒有支持原平生滑滾動。

須要分別處理，個人JS判斷處理以下：

if (typeof window.getComputedStyle(document.body).scrollBehavior == 'undefined') {
   // 傳統的JS平滑滾動處理代碼...
}複製代碼

這樣就能夠無縫對接了。

（本文完）

相關標籤/搜索

每日一句

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