最近，我需要在項目中實現(xiàn)滾動效果，並發(fā)現(xiàn)了機車滾動庫。該功能強大的工具可實現(xiàn)廣泛的滾動效果，包括基於滾動位置的視差滾動和動畫控制。

雖然經(jīng)常被歸類為“光滑滾動”庫，但它並不依賴於本機光滑的滾動。相反，它虛擬化滾動，保證一致的光滑度。這種技術(shù)有時被稱為“滾動夾克”，可能是有爭議的，但是用戶體驗研究對其整體影響提供了不同的結(jié)論。圖書館的主頁清楚地證明了其功能和感覺。

讓我們探討使用機車滾動JavaScript創(chuàng)建引人入勝的用戶體驗的基本原理。

了解機車滾動

正如開發(fā)人員所描述的那樣：

機車滾動是在Ayamflow的虛擬頻率頂部建立的直接滾動庫。它提供平滑的滾動，並支持視差效果，類切換和元素輸入視口時觸發(fā)的事件偵聽器。

本質(zhì)上，它可以監(jiān)視視口內(nèi)的元素可見性，並動態(tài)調(diào)整CSS transform屬性值以生成滾動效果。

滾動效果通常稱為視差，在滾動過程中，背景元素的移動似乎比前景元素慢，從而產(chǎn)生了深度效果。想像一下，從移動的汽車中查看風景：遙遠的物體似乎移動緩慢，而附近的景象迅速移動。莎拉·德拉斯納（Sarah Drasner）的Codepen提供了這種效果的視覺示例。

它如何工作

機車捲軸利用特定的HTML屬性。具有這些屬性的元素觸發(fā)JavaScript事件偵聽器輸入視口，然後將CSS transform為內(nèi)聯(lián)樣式。

兩個關(guān)鍵屬性至關(guān)重要：

• data-scroll ：檢測視口內(nèi)的元素可見性。
• data-scroll-container ：包含要監(jiān)視滾動的所有HTML內(nèi)容。

transform屬性值在HTML中作為內(nèi)聯(lián)樣式在HTML中動態(tài)更新。

設(shè)置機車滾動

可以直接通過<link>使用CDN標記：

<link href="https://cdn.jsdelivr.net/npm/%5Bemail%C2%A0protected%5D/dist/locomotive-scroll.css" rel="stylesheet">

然後，找到滾動容器並初始化庫：

 const scroller = new locomotivesCroll（{{
  EL：document.queryselector（'[[Data-Scroll-container]'），），
  平滑：是的
}）;

另外，請使用NPM進行安裝（ npm install locomotive-scroll ）並導入它：

從“機車 - 滾動”中導入機車旋轉(zhuǎn)；

const scroll = new locomotivesCroll（）;

Skypack還提供了導入庫的替代方法。

設(shè)置非常簡單明了。

示例和屬性

機車捲軸受益大量應(yīng)用。讓我們檢查幾個示例及其相關(guān)屬性：

下面的HTML利用了各種data-*屬性。除了data-scroll和data-scroll-container之外，我們還有：

• data-scroll-section ：定義可滾動部分。將頁面分為部分可以提高性能。
• data-scroll-direction ：指定垂直或水平運動。
• data-scroll-speed ：控制元素運動速度。負值反向垂直方向，除非還使用了data-scroll-direction 。
• data-scroll-sticky ：在其目標保持可見的同時，將元素粘在視口上。
• data-scroll-target ：使用ID選擇器定位特定元素。

data-scroll-sticky需要相應(yīng)的data-scroll-target屬性，通常引用容器元素。

<div data-scroll-section="">
  <p data-scroll="" data-scroll-sticky="" data-scroll-target="#stick">
    此元素將粘在視口上。
  </p>
</div>

進一步的示例展示了其他用法方案。機車滾動還與包括React在內(nèi)的各種框架集成在一起。

結(jié)論

機車滾動是一個非常強大且易於使用的庫，用於添加複雜的滾動效果。它的簡單性和有效性使其成為增強用戶體驗的理想解決方案。

以上是如何使用機車滾動來進行各種滾動效果的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！