欧美性猛交xxxx乱大交丰满,日本护士xxxxhd少妇

在介紹該庫及其功能和特性的概述之後，我們將對原始代碼進(jìn)行一些更改以適應(yīng)我們的需求。在此過程中，我們將復(fù)習(xí)一些核心的JavaScript語言技能，例如函數(shù)和閉包。然後，我們將創(chuàng)建一個HTML頁面來測試平滑滾動行為，然後將其實現(xiàn)為自定義腳本。然後將添加對CSS原生平滑滾動的支持（如果可用），最後我們將對瀏覽器導(dǎo)航歷史記錄進(jìn)行一些觀察。

這是我們將創(chuàng)建的最終演示：

查看CodePen上的SitePoint (@SitePoint)的Smooth Scrolling筆。

完整的源代碼可在GitHub上找到。

Jump.js

Jump.js是用原生ES6 JavaScript編寫的，沒有任何外部依賴項。它是一個小型實用程序，只有大約42 SLOC，但提供的最小化包的大小約為2.67 KB，因為它必須進(jìn)行轉(zhuǎn)譯。 GitHub項目頁面上提供了一個演示。

顧名思義，它只提供跳轉(zhuǎn)：滾動條位置從其當(dāng)前值到目標(biāo)位置的動畫變化，通過提供DOM元素、CSS選擇器或正數(shù)或負(fù)數(shù)值形式的距離來指定。這意味著在平滑滾動模式的實現(xiàn)中，我們必須自己執(zhí)行鏈接劫持。更多內(nèi)容請參見以下部分。

請注意，目前僅支持視口的垂直滾動。

我們可以使用一些選項配置跳轉(zhuǎn)，例如持續(xù)時間（此參數(shù)是必需的）、緩動函數(shù)和在動畫結(jié)束時觸發(fā)的回調(diào)。我們稍後將在演示中看到它們的實際應(yīng)用。有關(guān)完整詳細(xì)信息，請參見文檔。

Jump.js在“現(xiàn)代”瀏覽器上運行沒有問題，包括Internet Explorer 10版或更高版本。同樣，請參考文檔以了解支持的瀏覽器完整列表。使用合適的requestAnimationFrame polyfill，它甚至可以在舊版瀏覽器上運行。

快速了解屏幕背後

在內(nèi)部，Jump.js源代碼使用window對象的requestAnimationFrame方法來安排在滾動動畫的每一幀中更新視口垂直位置的位置。此更新是通過將使用緩動函數(shù)計算的下一個位置值傳遞給window.scrollTo方法來實現(xiàn)的。有關(guān)完整詳細(xì)信息，請參見源代碼。

一些自定義

在深入研究演示以展示Jump.js的使用之前，我們將對原始代碼進(jìn)行一些細(xì)微的更改，但這不會修改其內(nèi)部工作方式。

源代碼是用ES6編寫的，需要與JavaScript構(gòu)建工具一起使用才能進(jìn)行轉(zhuǎn)譯和捆綁模塊。對於某些項目來說，這可能有點過分，因此我們將應(yīng)用一些重構(gòu)來將代碼轉(zhuǎn)換為ES5，以便在任何地方使用。

首先，讓我們刪除ES6語法和功能。腳本定義了一個ES6類：

<code>import easeInOutQuad from './easing'

export default class Jump {
  jump(target, options = {}) {
    this.start = window.pageYOffset

    this.options = {
      duration: options.duration,
      offset: options.offset || 0,
      callback: options.callback,
      easing: options.easing || easeInOutQuad
    }

    this.distance = typeof target === 'string'
      ? this.options.offset + document.querySelector(target).getBoundingClientRect().top
      : target

    this.duration = typeof this.options.duration === 'function'
      ? this.options.duration(this.distance)
      : this.options.duration

    requestAnimationFrame(time => this._loop(time))
  }

  _loop(time) {
    if(!this.timeStart) {
      this.timeStart = time
    }

    this.timeElapsed = time - this.timeStart
    this.next = this.options.easing(this.timeElapsed, this.start, this.distance, this.duration)

    window.scrollTo(0, this.next)

    this.timeElapsed       ? requestAnimationFrame(time => this._loop(time))
      : this._end()
  }

  _end() {
    window.scrollTo(0, this.start + this.distance)

    typeof this.options.callback === 'function' && this.options.callback()
    this.timeStart = false
  }
}
</code>

我們可以使用構(gòu)造函數(shù)和一堆原型方法將其轉(zhuǎn)換為ES5“類”，但請注意，我們永遠(yuǎn)不需要此類的多個實例，因此使用普通對象字面量實現(xiàn)的單例就可以了：

<code>var jump = (function() {

    var o = {

        jump: function(target, options) {
            this.start = window.pageYOffset

            this.options = {
              duration: options.duration,
              offset: options.offset || 0,
              callback: options.callback,
              easing: options.easing || easeInOutQuad
            }

            this.distance = typeof target === 'string'
              ? this.options.offset + document.querySelector(target).getBoundingClientRect().top
              : target

            this.duration = typeof this.options.duration === 'function'
              ? this.options.duration(this.distance)
              : this.options.duration

            requestAnimationFrame(_loop)
        },

        _loop: function(time) {
            if(!this.timeStart) {
              this.timeStart = time
            }

            this.timeElapsed = time - this.timeStart
            this.next = this.options.easing(this.timeElapsed, this.start, this.distance, this.duration)

            window.scrollTo(0, this.next)

            this.timeElapsed               ? requestAnimationFrame(_loop)
              : this._end()
        },

        _end: function() {
            window.scrollTo(0, this.start + this.distance)

            typeof this.options.callback === 'function' && this.options.callback()
            this.timeStart = false
        }

    };

    var _loop = o._loop.bind(o);

    // Robert Penner's easeInOutQuad - http://robertpenner.com/easing/
    function easeInOutQuad(t, b, c, d)  {
        t /= d / 2
        if(t         t--
        return -c / 2 * (t * (t - 2) - 1) + b
    }

    return o;

})();
</code>

除了刪除類之外，我們還需要進(jìn)行其他一些更改。 requestAnimationFrame的回調(diào)用於在每一幀中更新滾動條位置，在原始代碼中，它是通過ES6箭頭函數(shù)調(diào)用的，在初始化時預(yù)綁定到j(luò)ump單例。然後，我們將默認(rèn)緩動函數(shù)捆綁在同一個源文件中。最後，我們使用IIFE（立即調(diào)用函數(shù)表達(dá)式）包裝了代碼，以避免命名空間污染。

現(xiàn)在我們可以應(yīng)用另一個重構(gòu)步驟，注意借助嵌套函數(shù)和閉包，我們可以只使用函數(shù)而不是對象：

<code>function jump(target, options) {
    var start = window.pageYOffset;

    var opt = {
      duration: options.duration,
      offset: options.offset || 0,
      callback: options.callback,
      easing: options.easing || easeInOutQuad
    };

    var distance = typeof target === 'string' ? 
        opt.offset + document.querySelector(target).getBoundingClientRect().top : 
        target
    ;

    var duration = typeof opt.duration === 'function'
          ? opt.duration(distance)
          : opt.duration
    ;

    var 
        timeStart = null,
        timeElapsed
    ;

    requestAnimationFrame(loop);

    function loop(time) {
        if (timeStart === null)
            timeStart = time;

        timeElapsed = time - timeStart;

        window.scrollTo(0, opt.easing(timeElapsed, start, distance, duration));

        if (timeElapsed         requestAnimationFrame(loop)
        else
            end();
    }

    function end() {
        window.scrollTo(0, start + distance);

        typeof opt.callback === 'function' && opt.callback();
        timeStart = null;
    }

    // ...

}
</code>

單例現(xiàn)在變成了將被調(diào)用以動畫滾動的jump函數(shù)，loop和end回調(diào)變成了嵌套函數(shù)，而對象的屬性現(xiàn)在變成了局部變量（閉包）。我們不再需要IIFE，因為現(xiàn)在所有代碼都安全地包裝在一個函數(shù)中。

作為最後的重構(gòu)步驟，為了避免在每次調(diào)用loop回調(diào)時重複timeStart重置檢查，第一次調(diào)用requestAnimationFrame()時，我們將向其傳遞一個匿名函數(shù)，該函數(shù)在調(diào)用loop函數(shù)之前重置timerStart變量：

<code>import easeInOutQuad from './easing'

export default class Jump {
  jump(target, options = {}) {
    this.start = window.pageYOffset

    this.options = {
      duration: options.duration,
      offset: options.offset || 0,
      callback: options.callback,
      easing: options.easing || easeInOutQuad
    }

    this.distance = typeof target === 'string'
      ? this.options.offset + document.querySelector(target).getBoundingClientRect().top
      : target

    this.duration = typeof this.options.duration === 'function'
      ? this.options.duration(this.distance)
      : this.options.duration

    requestAnimationFrame(time => this._loop(time))
  }

  _loop(time) {
    if(!this.timeStart) {
      this.timeStart = time
    }

    this.timeElapsed = time - this.timeStart
    this.next = this.options.easing(this.timeElapsed, this.start, this.distance, this.duration)

    window.scrollTo(0, this.next)

    this.timeElapsed       ? requestAnimationFrame(time => this._loop(time))
      : this._end()
  }

  _end() {
    window.scrollTo(0, this.start + this.distance)

    typeof this.options.callback === 'function' && this.options.callback()
    this.timeStart = false
  }
}
</code>

再次注意，在重構(gòu)過程中，核心滾動動畫代碼沒有改變。

測試頁面

現(xiàn)在我們已經(jīng)自定義了腳本以適應(yīng)我們的需求，我們準(zhǔn)備組裝一個測試演示。在本節(jié)中，我們將編寫一個使用下一節(jié)中介紹的腳本增強(qiáng)平滑滾動的頁面。

該頁麵包含一個包含指向文檔中後續(xù)部分的頁面內(nèi)鏈接的內(nèi)容表（TOC），以及指向TOC的其他鏈接。我們還將混合一些指向其他頁面的外部鏈接。這是此頁面的基本結(jié)構(gòu)：

<code>var jump = (function() {

    var o = {

        jump: function(target, options) {
            this.start = window.pageYOffset

            this.options = {
              duration: options.duration,
              offset: options.offset || 0,
              callback: options.callback,
              easing: options.easing || easeInOutQuad
            }

            this.distance = typeof target === 'string'
              ? this.options.offset + document.querySelector(target).getBoundingClientRect().top
              : target

            this.duration = typeof this.options.duration === 'function'
              ? this.options.duration(this.distance)
              : this.options.duration

            requestAnimationFrame(_loop)
        },

        _loop: function(time) {
            if(!this.timeStart) {
              this.timeStart = time
            }

            this.timeElapsed = time - this.timeStart
            this.next = this.options.easing(this.timeElapsed, this.start, this.distance, this.duration)

            window.scrollTo(0, this.next)

            this.timeElapsed               ? requestAnimationFrame(_loop)
              : this._end()
        },

        _end: function() {
            window.scrollTo(0, this.start + this.distance)

            typeof this.options.callback === 'function' && this.options.callback()
            this.timeStart = false
        }

    };

    var _loop = o._loop.bind(o);

    // Robert Penner's easeInOutQuad - http://robertpenner.com/easing/
    function easeInOutQuad(t, b, c, d)  {
        t /= d / 2
        if(t         t--
        return -c / 2 * (t * (t - 2) - 1) + b
    }

    return o;

})();
</code>

在頭部，我們將包含一些CSS規(guī)則來設(shè)置基本的最簡佈局，而在body標(biāo)籤的末尾，我們將包含兩個JavaScript文件：前者是我們重構(gòu)後的Jump.js版本，後者是我們現(xiàn)在將討論的腳本。

主腳本

這是將使用我們自定義的Jump.js庫版本的動畫跳轉(zhuǎn)來增強(qiáng)測試頁面滾動體驗的腳本。當(dāng)然，此代碼也將用ES5 JavaScript編寫。

讓我們簡要概述一下它應(yīng)該完成的任務(wù)：它必須劫持頁面內(nèi)鏈接上的點擊，禁用瀏覽器的默認(rèn)行為（突然跳轉(zhuǎn)到點擊鏈接的href屬性的哈希片段中指示的目標(biāo)元素），並將其替換為對我們的jump()函數(shù)的調(diào)用。

因此，首先要監(jiān)控頁面內(nèi)鏈接上的點擊。我們可以通過兩種方式做到這一點，使用事件委託或?qū)⑻幚沓绦蚋郊拥矫總€相關(guān)的鏈接。

事件委託

在第一種方法中，我們將點擊偵聽器添加到一個元素document.body。這樣，頁面上任何元素的每個點擊事件都將沿著其祖先的分支冒泡到DOM樹，直到到達(dá)document.body：

<code>function jump(target, options) {
    var start = window.pageYOffset;

    var opt = {
      duration: options.duration,
      offset: options.offset || 0,
      callback: options.callback,
      easing: options.easing || easeInOutQuad
    };

    var distance = typeof target === 'string' ? 
        opt.offset + document.querySelector(target).getBoundingClientRect().top : 
        target
    ;

    var duration = typeof opt.duration === 'function'
          ? opt.duration(distance)
          : opt.duration
    ;

    var 
        timeStart = null,
        timeElapsed
    ;

    requestAnimationFrame(loop);

    function loop(time) {
        if (timeStart === null)
            timeStart = time;

        timeElapsed = time - timeStart;

        window.scrollTo(0, opt.easing(timeElapsed, start, distance, duration));

        if (timeElapsed         requestAnimationFrame(loop)
        else
            end();
    }

    function end() {
        window.scrollTo(0, start + distance);

        typeof opt.callback === 'function' && opt.callback();
        timeStart = null;
    }

    // ...

}
</code>

當(dāng)然，現(xiàn)在在註冊的事件偵聽器（onClick）中，我們必須檢查傳入的click事件對象的target，以檢查它是否與頁面內(nèi)鏈接元素相關(guān)。這可以通過多種方式完成，因此我們將將其抽象為輔助函數(shù)isInPageLink()。我們稍後將看看此函數(shù)的機(jī)制。

如果傳入的點擊是在頁面內(nèi)鏈接上，我們將停止事件冒泡並阻止關(guān)聯(lián)的默認(rèn)操作。最後，我們調(diào)用jump函數(shù)，為其提供目標(biāo)元素的哈希選擇器和配置所需動畫的參數(shù)。

這是事件處理程序：

<code>requestAnimationFrame(function(time) { timeStart = time; loop(time); });

function loop(time) {
    timeElapsed = time - timeStart;

    window.scrollTo(0, opt.easing(timeElapsed, start, distance, duration));

    if (timeElapsed         requestAnimationFrame(loop)
    else
        end();
}
</code>

單個處理程序

使用第二種方法來監(jiān)控鏈接點擊，將上面介紹的事件處理程序的稍微修改後的版本附加到每個頁面內(nèi)鏈接元素，因此沒有事件冒泡：

<code>import easeInOutQuad from './easing'

export default class Jump {
  jump(target, options = {}) {
    this.start = window.pageYOffset

    this.options = {
      duration: options.duration,
      offset: options.offset || 0,
      callback: options.callback,
      easing: options.easing || easeInOutQuad
    }

    this.distance = typeof target === 'string'
      ? this.options.offset + document.querySelector(target).getBoundingClientRect().top
      : target

    this.duration = typeof this.options.duration === 'function'
      ? this.options.duration(this.distance)
      : this.options.duration

    requestAnimationFrame(time => this._loop(time))
  }

  _loop(time) {
    if(!this.timeStart) {
      this.timeStart = time
    }

    this.timeElapsed = time - this.timeStart
    this.next = this.options.easing(this.timeElapsed, this.start, this.distance, this.duration)

    window.scrollTo(0, this.next)

    this.timeElapsed       ? requestAnimationFrame(time => this._loop(time))
      : this._end()
  }

  _end() {
    window.scrollTo(0, this.start + this.distance)

    typeof this.options.callback === 'function' && this.options.callback()
    this.timeStart = false
  }
}
</code>

我們查詢所有元素，並使用[].slice()技巧將返回的DOM NodeList轉(zhuǎn)換為JavaScript數(shù)組（如果目標(biāo)瀏覽器支持，更好的替代方法是使用ES6 Array.from()方法）。然後，我們可以使用數(shù)組方法過濾頁面內(nèi)鏈接，重新使用上面定義的相同輔助函數(shù)，最後將偵聽器附加到剩餘的鏈接元素。

事件處理程序與之前幾乎相同，但當(dāng)然我們不需要檢查點擊目標(biāo)：

<code>var jump = (function() {

    var o = {

        jump: function(target, options) {
            this.start = window.pageYOffset

            this.options = {
              duration: options.duration,
              offset: options.offset || 0,
              callback: options.callback,
              easing: options.easing || easeInOutQuad
            }

            this.distance = typeof target === 'string'
              ? this.options.offset + document.querySelector(target).getBoundingClientRect().top
              : target

            this.duration = typeof this.options.duration === 'function'
              ? this.options.duration(this.distance)
              : this.options.duration

            requestAnimationFrame(_loop)
        },

        _loop: function(time) {
            if(!this.timeStart) {
              this.timeStart = time
            }

            this.timeElapsed = time - this.timeStart
            this.next = this.options.easing(this.timeElapsed, this.start, this.distance, this.duration)

            window.scrollTo(0, this.next)

            this.timeElapsed               ? requestAnimationFrame(_loop)
              : this._end()
        },

        _end: function() {
            window.scrollTo(0, this.start + this.distance)

            typeof this.options.callback === 'function' && this.options.callback()
            this.timeStart = false
        }

    };

    var _loop = o._loop.bind(o);

    // Robert Penner's easeInOutQuad - http://robertpenner.com/easing/
    function easeInOutQuad(t, b, c, d)  {
        t /= d / 2
        if(t         t--
        return -c / 2 * (t * (t - 2) - 1) + b
    }

    return o;

})();
</code>

哪種方法最好取決於使用上下文。例如，如果在初始頁面加載後可能動態(tài)添加新的鏈接元素，那麼我們必須使用事件委託。

現(xiàn)在我們轉(zhuǎn)向isInPageLink()的實現(xiàn)，我們在之前的事件處理程序中使用此輔助函數(shù)來抽象頁面內(nèi)鏈接的測試。正如我們所看到的，此函數(shù)接受DOM節(jié)點作為參數(shù)，並返回一個布爾值以指示該節(jié)點是否表示頁面內(nèi)鏈接元素。僅檢查傳遞的節(jié)點是A標(biāo)籤並且設(shè)置了哈希片段是不夠的，因為鏈接可能是指向另一個頁面，在這種情況下，必須不禁用默認(rèn)瀏覽器操作。因此，我們檢查屬性href中存儲的值“減去”哈希片段是否等於頁面URL：

<code>function jump(target, options) {
    var start = window.pageYOffset;

    var opt = {
      duration: options.duration,
      offset: options.offset || 0,
      callback: options.callback,
      easing: options.easing || easeInOutQuad
    };

    var distance = typeof target === 'string' ? 
        opt.offset + document.querySelector(target).getBoundingClientRect().top : 
        target
    ;

    var duration = typeof opt.duration === 'function'
          ? opt.duration(distance)
          : opt.duration
    ;

    var 
        timeStart = null,
        timeElapsed
    ;

    requestAnimationFrame(loop);

    function loop(time) {
        if (timeStart === null)
            timeStart = time;

        timeElapsed = time - timeStart;

        window.scrollTo(0, opt.easing(timeElapsed, start, distance, duration));

        if (timeElapsed         requestAnimationFrame(loop)
        else
            end();
    }

    function end() {
        window.scrollTo(0, start + distance);

        typeof opt.callback === 'function' && opt.callback();
        timeStart = null;
    }

    // ...

}
</code>

stripHash()是另一個輔助函數(shù)，我們也用它在腳本初始化時設(shè)置變量pageUrl的值：

<code>requestAnimationFrame(function(time) { timeStart = time; loop(time); });

function loop(time) {
    timeElapsed = time - timeStart;

    window.scrollTo(0, opt.easing(timeElapsed, start, distance, duration));

    if (timeElapsed         requestAnimationFrame(loop)
    else
        end();
}
</code>

此基於字符串的解決方案以及哈希片段的修剪即使在帶有查詢字符串的URL上也能正常工作，因為哈希部分在URL的一般結(jié)構(gòu)中位於它們之後。

正如我之前所說，這只是實現(xiàn)此測試的一種可能方法。例如，本教程開頭引用的文章使用了不同的解決方案，對鏈接href與location對象進(jìn)行了組件級比較。

應(yīng)該注意的是，我們在兩種事件訂閱方法中都使用了此函數(shù)，但在第二種方法中，我們將其用作我們已經(jīng)知道是標(biāo)籤的元素的過濾器，因此對tagName屬性的第一次檢查是多餘的。這留給讀者作為練習(xí)。

可訪問性注意事項

就目前而言，我們的代碼容易受到已知錯誤（實際上是一對無關(guān)的錯誤，影響B(tài)link/WebKit/KHTML和一個影響IE的錯誤）的影響，這些錯誤會影響鍵盤用戶。當(dāng)通過製表鍵瀏覽TOC鏈接時，激活一個鏈接將平滑地向下滾動到選定的部分，但焦點將保留在鏈接上。這意味著在下一個製表鍵按下時，用戶將被送回TOC，而不是送往他們選擇的節(jié)中的第一個鏈接。

為了解決這個問題，我們將向主腳本添加另一個函數(shù)：

<code>>
    <h1>></h1>Title>
    <nav> id="toc"></nav>
        <ul>></ul>
            <li>></li>
<a> href="http://ipnx.cn/link/db8229562f80fbcc7d780f571e5974ec"></a>Section 1>>
            <li>></li>
<a> href="http://ipnx.cn/link/ba2cf4148007ed8a8b041f8abd9bbf96"></a>Section 2>>
            ...
        >
    >
     id="sect-1">
        <h2>></h2>Section 1>
        <p>></p>Pellentesque habitant morbi tristique senectus et netus et <a> href="http://ipnx.cn/link/e1b97c787a5677efa5eba575c41e8688"></a>a link to another page> ac turpis egestas. <a> href="http://ipnx.cn/link/e1b97c787a5677efa5eba575c41e8688index.html#foo"></a>A link to another page, with an anchor> quam, feugiat vitae, ...>
        <a> href="http://ipnx.cn/link/7421d74f57142680e679057ddc98edf5"></a>Back to TOC>
    >
     id="sect-2">
        <h2>></h2>Section 2>
        ...
    >
    ...
     src="jump.js">>
     src="script.js">>
>
</code>

它將在我們將傳遞給jump函數(shù)的回調(diào)中運行，並將我們要滾動到的元素的哈希值傳遞過去：

<code>import easeInOutQuad from './easing'

export default class Jump {
  jump(target, options = {}) {
    this.start = window.pageYOffset

    this.options = {
      duration: options.duration,
      offset: options.offset || 0,
      callback: options.callback,
      easing: options.easing || easeInOutQuad
    }

    this.distance = typeof target === 'string'
      ? this.options.offset + document.querySelector(target).getBoundingClientRect().top
      : target

    this.duration = typeof this.options.duration === 'function'
      ? this.options.duration(this.distance)
      : this.options.duration

    requestAnimationFrame(time => this._loop(time))
  }

  _loop(time) {
    if(!this.timeStart) {
      this.timeStart = time
    }

    this.timeElapsed = time - this.timeStart
    this.next = this.options.easing(this.timeElapsed, this.start, this.distance, this.duration)

    window.scrollTo(0, this.next)

    this.timeElapsed       ? requestAnimationFrame(time => this._loop(time))
      : this._end()
  }

  _end() {
    window.scrollTo(0, this.start + this.distance)

    typeof this.options.callback === 'function' && this.options.callback()
    this.timeStart = false
  }
}
</code>

此函數(shù)的作用是獲取哈希值對應(yīng)的DOM元素，並測試它是否已經(jīng)是可以接收焦點的元素（例如錨點或按鈕元素）。如果元素不能默認(rèn)接收焦點（例如我們的容器），則它會將其tabIndex屬性設(shè)置為-1（允許通過編程方式接收焦點，但不能通過鍵盤接收）。然後焦點將設(shè)置為該元素，這意味著用戶的下一個tab按鍵將焦點移動到下一個可用鏈接。

您可以在此處查看主腳本的完整源代碼，其中包含所有先前討論的更改。

使用CSS支持原生平滑滾動

CSS對像模型視圖模塊規(guī)範(fàn)引入了一個新的屬性來原生實現(xiàn)平滑滾動：scroll-behavior。

它可以取兩個值，auto表示默認(rèn)的瞬時滾動，smooth表示動畫滾動。該規(guī)範(fàn)沒有提供任何配置滾動動畫的方法，例如其持續(xù)時間和時間函數(shù)（緩動）。

我可以使用css-scroll-behavior嗎？來自caniuse.com的數(shù)據(jù)顯示主要瀏覽器對css-scroll-behavior功能的支持情況。

不幸的是，在撰寫本文時，支持非常有限。在Chrome中，此功能正在開發(fā)中，可以通過在chrome://flags屏幕中啟用它來使用部分實現(xiàn)。 CSS屬性尚未實現(xiàn)，因此鏈接點擊上的平滑滾動不起作用。

無論如何，通過對主腳本進(jìn)行微小的更改，我們可以檢測用戶代理中是否可用此功能並避免運行我們的其餘代碼。為了在視口中使用平滑滾動，我們將CSS屬性應(yīng)用於根元素HTML（但在我們的測試頁面中，我們甚至可以將其應(yīng)用於body元素）：

<code>var jump = (function() {

    var o = {

        jump: function(target, options) {
            this.start = window.pageYOffset

            this.options = {
              duration: options.duration,
              offset: options.offset || 0,
              callback: options.callback,
              easing: options.easing || easeInOutQuad
            }

            this.distance = typeof target === 'string'
              ? this.options.offset + document.querySelector(target).getBoundingClientRect().top
              : target

            this.duration = typeof this.options.duration === 'function'
              ? this.options.duration(this.distance)
              : this.options.duration

            requestAnimationFrame(_loop)
        },

        _loop: function(time) {
            if(!this.timeStart) {
              this.timeStart = time
            }

            this.timeElapsed = time - this.timeStart
            this.next = this.options.easing(this.timeElapsed, this.start, this.distance, this.duration)

            window.scrollTo(0, this.next)

            this.timeElapsed               ? requestAnimationFrame(_loop)
              : this._end()
        },

        _end: function() {
            window.scrollTo(0, this.start + this.distance)

            typeof this.options.callback === 'function' && this.options.callback()
            this.timeStart = false
        }

    };

    var _loop = o._loop.bind(o);

    // Robert Penner's easeInOutQuad - http://robertpenner.com/easing/
    function easeInOutQuad(t, b, c, d)  {
        t /= d / 2
        if(t         t--
        return -c / 2 * (t * (t - 2) - 1) + b
    }

    return o;

})();
</code>

然後，我們在腳本開頭添加一個簡單的功能檢測測試：

<code>function jump(target, options) {
    var start = window.pageYOffset;

    var opt = {
      duration: options.duration,
      offset: options.offset || 0,
      callback: options.callback,
      easing: options.easing || easeInOutQuad
    };

    var distance = typeof target === 'string' ? 
        opt.offset + document.querySelector(target).getBoundingClientRect().top : 
        target
    ;

    var duration = typeof opt.duration === 'function'
          ? opt.duration(distance)
          : opt.duration
    ;

    var 
        timeStart = null,
        timeElapsed
    ;

    requestAnimationFrame(loop);

    function loop(time) {
        if (timeStart === null)
            timeStart = time;

        timeElapsed = time - timeStart;

        window.scrollTo(0, opt.easing(timeElapsed, start, distance, duration));

        if (timeElapsed         requestAnimationFrame(loop)
        else
            end();
    }

    function end() {
        window.scrollTo(0, start + distance);

        typeof opt.callback === 'function' && opt.callback();
        timeStart = null;
    }

    // ...

}
</code>

因此，如果瀏覽器支持原生滾動，則腳本將不執(zhí)行任何操作並退出，否則它將像以前一樣繼續(xù)執(zhí)行，並且瀏覽器將忽略不受支持的CSS屬性。

結(jié)論

除了實現(xiàn)簡單和性能之外，剛才討論的CSS解決方案的另一個優(yōu)勢是瀏覽器歷史行為與使用瀏覽器默認(rèn)滾動時所體驗的行為一致。每個頁面內(nèi)跳轉(zhuǎn)都推送到瀏覽器歷史堆棧上，我們可以使用相應(yīng)的按鈕來回瀏覽這些跳轉(zhuǎn)（但至少在Firefox中沒有平滑滾動）。

在我們編寫的代碼中（我們現(xiàn)在可以將其視為CSS支持不可用時的後備方案），我們沒有考慮腳本相對於瀏覽器歷史記錄的行為。根據(jù)上下文和用例，這可能是或可能不是感興趣的事情，但如果我們認(rèn)為腳本應(yīng)該增強(qiáng)默認(rèn)滾動體驗，那麼我們應(yīng)該期望一致的行為，就像CSS一樣。

關(guān)於使用原生JavaScript進(jìn)行平滑滾動的常見問題解答 (FAQs)

如何在不使用任何庫的情況下使用原生JavaScript實現(xiàn)平滑滾動？

在不使用任何庫的情況下使用原生JavaScript實現(xiàn)平滑滾動非常簡單。您可以使用window.scrollTo方法，並將behavior選項設(shè)置為smooth。此方法通過給定數(shù)量滾動窗口中的文檔。這是一個簡單的示例：

<code>import easeInOutQuad from './easing'

export default class Jump {
  jump(target, options = {}) {
    this.start = window.pageYOffset

    this.options = {
      duration: options.duration,
      offset: options.offset || 0,
      callback: options.callback,
      easing: options.easing || easeInOutQuad
    }

    this.distance = typeof target === 'string'
      ? this.options.offset + document.querySelector(target).getBoundingClientRect().top
      : target

    this.duration = typeof this.options.duration === 'function'
      ? this.options.duration(this.distance)
      : this.options.duration

    requestAnimationFrame(time => this._loop(time))
  }

  _loop(time) {
    if(!this.timeStart) {
      this.timeStart = time
    }

    this.timeElapsed = time - this.timeStart
    this.next = this.options.easing(this.timeElapsed, this.start, this.distance, this.duration)

    window.scrollTo(0, this.next)

    this.timeElapsed       ? requestAnimationFrame(time => this._loop(time))
      : this._end()
  }

  _end() {
    window.scrollTo(0, this.start + this.distance)

    typeof this.options.callback === 'function' && this.options.callback()
    this.timeStart = false
  }
}
</code>

在此示例中，當(dāng)您點擊具有類your-element的元素時，頁面將平滑地滾動到頂部。

為什麼我的平滑滾動在Safari中不起作用？

使用scrollTo方法並將behavior選項設(shè)置為smooth的平滑滾動功能在Safari中不受支持。要使其正常工作，您可以使用polyfill，例如smoothscroll-polyfill。這將在原生不支持它的瀏覽器中啟用平滑滾動功能。

如何平滑地滾動到特定元素？

要平滑地滾動到特定元素，您可以使用Element.scrollIntoView方法，並將behavior選項設(shè)置為smooth。這是一個示例：

<code>var jump = (function() {

    var o = {

        jump: function(target, options) {
            this.start = window.pageYOffset

            this.options = {
              duration: options.duration,
              offset: options.offset || 0,
              callback: options.callback,
              easing: options.easing || easeInOutQuad
            }

            this.distance = typeof target === 'string'
              ? this.options.offset + document.querySelector(target).getBoundingClientRect().top
              : target

            this.duration = typeof this.options.duration === 'function'
              ? this.options.duration(this.distance)
              : this.options.duration

            requestAnimationFrame(_loop)
        },

        _loop: function(time) {
            if(!this.timeStart) {
              this.timeStart = time
            }

            this.timeElapsed = time - this.timeStart
            this.next = this.options.easing(this.timeElapsed, this.start, this.distance, this.duration)

            window.scrollTo(0, this.next)

            this.timeElapsed               ? requestAnimationFrame(_loop)
              : this._end()
        },

        _end: function() {
            window.scrollTo(0, this.start + this.distance)

            typeof this.options.callback === 'function' && this.options.callback()
            this.timeStart = false
        }

    };

    var _loop = o._loop.bind(o);

    // Robert Penner's easeInOutQuad - http://robertpenner.com/easing/
    function easeInOutQuad(t, b, c, d)  {
        t /= d / 2
        if(t         t--
        return -c / 2 * (t * (t - 2) - 1) + b
    }

    return o;

})();
</code>

在此示例中，當(dāng)您點擊具有類your-element的元素時，頁面將平滑地滾動到具有類target-element的元素。

我可以控制平滑滾動的速度嗎？

平滑滾動的速度不能直接控制，因為它由瀏覽器處理。但是，您可以使用window.requestAnimationFrame創(chuàng)建一個自定義平滑滾動函數(shù)，以便更好地控制滾動動畫，包括其速度。

如何實現(xiàn)水平平滑滾動？

您可以通過與垂直平滑滾動類似的方式實現(xiàn)水平平滑滾動。 window.scrollTo和Element.scrollIntoView方法也接受left選項以指定要滾動到的水平位置。這是一個示例：

<code>function jump(target, options) {
    var start = window.pageYOffset;

    var opt = {
      duration: options.duration,
      offset: options.offset || 0,
      callback: options.callback,
      easing: options.easing || easeInOutQuad
    };

    var distance = typeof target === 'string' ? 
        opt.offset + document.querySelector(target).getBoundingClientRect().top : 
        target
    ;

    var duration = typeof opt.duration === 'function'
          ? opt.duration(distance)
          : opt.duration
    ;

    var 
        timeStart = null,
        timeElapsed
    ;

    requestAnimationFrame(loop);

    function loop(time) {
        if (timeStart === null)
            timeStart = time;

        timeElapsed = time - timeStart;

        window.scrollTo(0, opt.easing(timeElapsed, start, distance, duration));

        if (timeElapsed         requestAnimationFrame(loop)
        else
            end();
    }

    function end() {
        window.scrollTo(0, start + distance);

        typeof opt.callback === 'function' && opt.callback();
        timeStart = null;
    }

    // ...

}
</code>

這將使文檔向右平滑滾動100像素。

如何停止平滑滾動動畫？

不能直接停止平滑滾動動畫，因為它由瀏覽器處理。但是，如果您使用的是自定義平滑滾動函數(shù)，則可以使用window.cancelAnimationFrame取消動畫幀來停止動畫。

如何實現(xiàn)具有固定頁眉的平滑滾動？

要實現(xiàn)具有固定頁眉的平滑滾動，您需要調(diào)整滾動位置以考慮頁眉的高度。您可以通過從目標(biāo)滾動位置減去頁眉的高度來實現(xiàn)此目的。

如何為錨鏈接實現(xiàn)平滑滾動？

要為錨鏈接實現(xiàn)平滑滾動，您可以向鏈接的點擊事件添加事件偵聽器，並使用Element.scrollIntoView方法平滑地滾動到目標(biāo)元素。這是一個示例：

<code>requestAnimationFrame(function(time) { timeStart = time; loop(time); });

function loop(time) {
    timeElapsed = time - timeStart;

    window.scrollTo(0, opt.easing(timeElapsed, start, distance, duration));

    if (timeElapsed         requestAnimationFrame(loop)
    else
        end();
}
</code>

這將使頁面上的所有錨鏈接平滑地滾動到其目標(biāo)元素。