JavaScript庫——skrollr.js中文教程

skrollr.js是一款輕量級且強大的js庫环鲤，關(guān)于這款js庫的相關(guān)的詳細(xì)教程卻不多。
所以這里根據(jù)國內(nèi)一些大神們的筆記和skrollr官方文檔進(jìn)行總結(jié)憎兽，方便自己以后查閱冷离，也方便大家學(xué)習(xí)。
這里主要參考了 Shimily大神的skrollr中文教程纯命，在這個基礎(chǔ)上進(jìn)行改進(jìn)和完善西剥。有什么不妥之處，還希望大家能夠及時指出亿汞，共同修改瞭空。

一、skrollr 相關(guān)地址鏈接：

skrollr官方地址
Github地址
百度云下載地址

二、認(rèn)識我們下載的代碼包：

首先我們先來熟悉一下我們通過Github地址或者是百度云下載地址下載的代碼包中都有哪些內(nèi)容咆畏。

dist文件夾 下是壓縮版的源碼文件skrollr.min.js
src文件夾 下是未壓縮的源碼文件skrollr.js
examples文件夾 和 test文件夾 是skrollr的實例代碼南捂，展示的是skrollr具體效果。大家有時間可以瀏覽旧找，作為一個簡單的參考
其他的文件和文件夾我們大可不必去理會

三溺健、skrollr使用方法：

1. 引入源碼文件 skrollr.min.js 或者是 skrollr.js

<script src="skrollr.js"></script>

2.頁面加載完成后，初始化skrollr

<script>
    // 一定要在頁面文檔全部加載完成之后钮蛛，再進(jìn)行初始化skrollr
    window.onload=function(){
        var s=skrollr.init();
    }
</script>

3.在HTML代碼中鞭缭，給標(biāo)簽元素添加類似`data-200="height:20px"`屬性，來進(jìn)行控制樣式變化魏颓。

改變背景的實例：效果展示

<!--
    當(dāng)滾動條在頂部的時候缚去，div的背景是藍(lán)色
    當(dāng)滾動500px的時候，div的顏色變?yōu)榧t色
    滾動條滾動的過程中琼开，顏色是逐漸由綠色變?yōu)樗{(lán)色的
-->
<div data-0="background-color:rgb(0,0,255)" data-500="background-color:rgb(255,0,0)"></div>

改變高度的實例：效果展示

<!-- 
    當(dāng)滾動條在頂部的時候，div的高度是20px
    當(dāng)滾動300px的時候枕荞，div的高度是100px
    滾動條滾動的過程中柜候，高度是逐漸由20px變?yōu)?00px的
-->
<div data-0="height:20px" data-300="height:100px"></div>v

旋轉(zhuǎn)動畫的實例：效果展示

<div data-0="background-color:rgb(0,0,255);transform:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform:rotate(360deg);">WOOOT</div>

注意事項：
- 我們只需要寫出關(guān)鍵幀的狀態(tài)，skrollr會自己添加過度幀躏精。
- 至少要添加兩個關(guān)鍵幀渣刷，但是如果只添加一個關(guān)鍵幀，是沒有過渡效果的矗烛，但是這一幀的樣式會作用于元素辅柴。
- 關(guān)鍵幀的書寫順序沒有要求，即下面兩種寫法瞭吃，最終的效果是一樣的
```
<div data-0="height:20px" data-300="height:100px"></div>

<div data-300="height:100px" data-0="height:20px"></div>
```
- 在設(shè)置顏色過度的時候碌嘀，要使用background-color:rgb(0,255,0),不要使用background-color:blue，否則沒有過度效果歪架。
- skrollr已經(jīng)為我們處理這些討厭的CSS前綴股冗。
- skrollr允許非線性動畫，你可以把 easing和蚪、quadratic止状、cubic、begin/end攒霹、swing怯疤、sqrt、outCubic催束、bounce 放到屬性后面的方括號里面集峦，來控制不同的效果，還可以的通過easings 參數(shù)自定義運動函數(shù)
```
<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-top="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">WOOOT</div>
```

四、skrollr的兩種模式：absolute mode和relative mode

1.absolute mode

格式 data-[offset]-[anchor]
offset： 可以使任意整數(shù),默認(rèn)值是0
anchor： 可以是start或者end

data-0 = data-start = data-0-start：滾動條在位置0
data-100 = data-100-start：滾動條滾動100px.
data--100 = data--100-start：滾動條滾動-100px. (這個看起來是沒有意義的少梁，但是在relative mode里面會用到).
data-end = data-0-end：滾動條距離底部為0的時候.
data-100-end：100px 滾動條距離底部為100px的時候.
data--100-end：滾動條距離底部為-100px的時候

2.relative mode

格式 data-[offset]-(viewport-anchor)-[element-anchor]
offset：可以使任意整數(shù)洛口，默認(rèn)值是0
viewport-anchor：表示視口的底部或者頂部可以是top、center凯沪、bottom
element-anchor：表示相對元素的頂部或者底部可以是top第焰、center、bottom

data-top = data-0-top = data-top-top = data-0-top-top: 當(dāng)參照元素的頂部和視口頂部對齊
data-100-top = data-100-top-top：當(dāng)參照元素的頂部距離視口頂部100px
data--100-top = data--100-top-top：當(dāng)參照元素的頂部距離視口頂部-100px
data-top-bottom =data-0-top-bottom：當(dāng)參照元素的底部在視口底部對齊
data-center-center = data-0-center-center：當(dāng)參照元素的中部在視口的中間.
data-bottom-center = data-0-bottom-center：當(dāng)參照元素和視口的底部對齊

3.特別提醒

有時候你可能需要參照另一個元素來確定關(guān)鍵幀妨马，你需要用到 data-anchor-target
我們可以利用這一屬性來制作 視察滾動 (后面會有專門的文章分享)挺举，所以這個屬性特別重要

<div data-anchor-target="#foo"></div>

4.備注

absolute mode 和 relative mode 的offset也可以是百分比，注意格式為 data-10p

<!--
    當(dāng)滾動條滾動十樓的10%的時候烘跺，div的高度是20px
    當(dāng)滾動條滾動十樓的30%的時候湘纵，div的高度是100px
-->
<div data-10p="height:20px" data-30p="height:100px"></div>

absolute mode 和 relative mode 的offset前面都是可以放一個常量的。但是這個常量需要一個 標(biāo)識符 使用的時候需要在這個標(biāo)識符前面加 下劃線

<div data-_t="height:50px" data-_t--50="height:10px" data-_t-500="height:100px"></div>
<script>
    var s=skrollr.init({
        constants:{
            t:100            // 在定義常量的時候滤淳，不用加下劃線
        }
    });
</script>

<!--上述代碼等價于下面代碼-->
<div data-100="height:50px" data-50="height:10px" data-600="height:100px"></div>

五梧喷、 skrollr的一些特性

1.自動給元素添加Class

skrollr會自動html標(biāo)簽添加class="skrollr"并且會移除 class="no-skrollr"（如果存在的話）。
還會根據(jù)設(shè)備檢測結(jié)果脖咐，給html標(biāo)簽添加class="skrollr-desktop"或者class="skrollr-mobile"以表明運行的平臺

skrollr會給關(guān)鍵幀添加 class ="skrollable-before" , class ="skrollable-between" 或者class ="skrollable-after" 铺敌。skrollr會根據(jù)關(guān)鍵幀所在的位置確定添加哪一個。

2.自動補全css屬性

相鄰的兩個關(guān)鍵幀屁擅，如果前一個關(guān)鍵幀設(shè)置了某一個css屬性偿凭，例如left:0%，但是后二個關(guān)鍵幀沒有設(shè)置派歌，那么skrollr會在后一個關(guān)鍵幀處弯囊，自動將該css屬性設(shè)置為前一個關(guān)鍵幀處的屬性值left:0%。
特別注意的是胶果，這里自動補全是針對相鄰的兩個關(guān)鍵幀匾嘱。如果一個元素有多個關(guān)鍵幀，則從左到右早抠，依次自動補全相鄰的兩個關(guān)鍵幀的css屬性奄毡。
因此，下面兩行代碼是等價的

<div data-100="left:0%;" data-200="top:0%;" data-300="left:50%;" data-400="top:50%;"></div>

<div data-100="left:0%;top:0%;" data-200="left:0%;top:0%;" data-300="left:50%;top:0%;" data-400="left:50%;top:50%;"></div>

3.注意事項

所有的數(shù)字值都需要單位0也不例外贝或。
復(fù)合寫法 margin:0px 0px 0px 0px;對應(yīng) margin:0px 100px 50px 3px; 但是不能對應(yīng) margin:10px;值的數(shù)量必須保持一致吼过，否則會出錯。
css3 transform 里面的屬性順序必須一致咪奖。例如 transform: scale(10) translate(20px); 可以對應(yīng) transform: scale(25) translate(60px); 但是不可以對應(yīng) transform:translate(60px) scale(25);
動態(tài)改變顏色不支持名稱（例如：red盗忱，green）和 16進(jìn)制色值（例如：#ff0）必須使用 rgb() , rgba() , hsl() 或者 hsla()
而且必須對應(yīng)使用，不能第一個關(guān)鍵幀使用rgba()羊赵，下一個關(guān)鍵幀就換成hsla()

六趟佃、 skrollr.init()中的參數(shù)

我們在初始化skrollr的時候扇谣，可以通過設(shè)置一些參數(shù)，來控制滾動條運動的時候的一些效果闲昭，這里列出一些非常常用的參數(shù)罐寨。

1.smoothScrolling

默認(rèn)值：true
作用：在smoothScrolling:true情況下，滾動條停止的時候動畫不會立即停止序矩，而是有一個過渡鸯绿，過渡時間可以記性設(shè)置。在smoothScrolling:false情況下簸淀，沒有過渡瓶蝴，滾動條停止的時候，動畫也立即停止租幕。
示例代碼：

<script>
    var s=skrollr.init({
        smoothScrolling:false
    });
</script>

如果在這里設(shè)置smoothScrolling:false舷手，那么整個頁面上的元素都沒有了過渡效果。在這種情況下劲绪，如果想給指定的元素設(shè)置過渡效果男窟，可以采用添加屬性data-smooth-scrolling="on"

<div data-100="height:50px" data-50="height:10px" data-600="height:100px" data-smooth-scrolling="on"></div>

2.smoothScrollingDuration

默認(rèn)值：200
單位：ms
作用：設(shè)置滾動條停止后，動畫的過渡時間
示例代碼：

<script>
    var s=skrollr.init({
        smoothScrollingDuration:500
    });
</script>

3.constants

作用：定義常量贾富，并且在HTML代碼中引用這些常量
示例代碼：

<div data-_t="height:50px" data-_t--50="height:10px" data-_t-500="height:100px"></div>
<script>
    var s=skrollr.init({
        constants:{
            t:100,            // 在定義常量的時候歉眷，不用加下劃線
            i:10,         
            j:200      
        }
    });
</script>

<!--上述代碼等價于下面代碼-->
<div data-100="height:50px" data-50="height:10px" data-600="height:100px"></div>

4.forceHeight

默認(rèn)值：true
作用：假如你整個HTML頁面的高度為1000px，但是給一個元素標(biāo)簽設(shè)置了data-1500="background-color:rgb(255,0,0)"祷安。在forceHeight:true的情況下，頁面會一直往下滾到1500px的位置兔乞；在forceHeight:false的情況下汇鞭，會阻止繼續(xù)滾動，滾動到頁面的底部庸追，也就是1000px處霍骄，就停止。
示例代碼：

<script>
    var s=skrollr.init({
        forceHeight:false
    });
</script>

4.mobileCheck=function() {...}

作用：這個參數(shù)允許我們淡溯，定義一個檢測移動端的檢測函數(shù)來覆蓋默認(rèn)的檢測函數(shù)读整。個人覺得用處不是很大。
示例代碼：

<script>
    var s=skrollr.init({
        mobileCheck:function(){
            return (/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera);
        }
    });
</script>

5.mobileDeceleration

默認(rèn)值：0.004
作用：設(shè)置慣性參數(shù)咱娶，在移動設(shè)備上米间，通過這個參數(shù)，設(shè)置用戶松開手指之后膘侮，滑動停止得有多快或者有多慢屈糊。設(shè)置為1表示不使用慣性。
示例代碼：

<script>
    var s=skrollr.init({
        mobileDeceleration:0.01
    });
</script>

6.edgeStrategy

默認(rèn)值：set
作用：滾動條超過所定義的關(guān)鍵幀范圍之外的時候琼了，定義元素的狀態(tài)逻锐。即滾動條的位置在 第一幀之前 或者在 最后一幀之后 的時候，定義元素的狀態(tài)。
可能取值：set昧诱、ease晓淀、reset
edgeStrategy:'set'：如果滾動條的位置在第一幀之前，那么元素保持第一幀的狀態(tài)盏档；如果滾動條的位置在最后一幀之后凶掰，那么元素保持最后一幀的狀態(tài)。
edgeStrategy:'ease'：效果同上妆丘。只不過ease會根據(jù)easing里面定義的函數(shù)變化锄俄。我覺得不用太過理會這一變化。.
edgeStrategy:'reset'：滾動條的位置在所定義的關(guān)鍵幀范圍之外的時候勺拣，元素的狀態(tài)和關(guān)鍵幀沒有任何關(guān)系了奶赠。這個時候，元素會顯示沒有添加關(guān)鍵幀之前的樣式药有，即按照自己寫的普通的css樣式顯示毅戈。

7.skrollrBody

默認(rèn)值：skrollr-body
作用： 設(shè)置新的值來設(shè)置覆蓋默認(rèn)的id選擇符。它功能在移動設(shè)備上非常重要愤惰。如果我們沒有去更改skrollrBody的數(shù)值苇经，那么我們需要給 skrollr容器元素 添加id="skrollr-body"。如果我們修改了skrollrBody的數(shù)值宦言，那么相對應(yīng)的 skrollr容器元素 的id值也要修改扇单。否則在移動設(shè)備上無法正常使用skrollr.js
示例代碼：

<script>
    var s=skrollr.init({
        skrollrBody:'my-body'       // 一般不建議修改
    });
</script>

8.beforerender

作用：這是一個事件偵聽函數(shù)，每一次我們滑動鼠標(biāo)或者拖動滾動條的時候奠旺，skrollr.js就會渲染頁面蜘澜。在渲染頁面之前，這個函數(shù)會執(zhí)行响疚。
備注：這個函數(shù)的功能鄙信，我到現(xiàn)在都沒搞明白，所以下面先給出原本的英文解釋忿晕。等自己搞明白了装诡，再進(jìn)行修改。
A listener function that gets called each time right before we render everything. The function will be passed an object with the following properties:

{
    curTop: 10, //the current scroll top offset
    lastTop: 0, //the top value of last time
    maxTop: 100, //the max value you can scroll to. curTop/maxTop will give you the current progress.
    direction: 'down' //either up or down
}

Returning false will prevent rendering.

8.render

作用：這是一個事件偵聽函數(shù)践盼，每一次我們滑動鼠標(biāo)或者拖動滾動條的時候鸦采，skrollr.js就會渲染頁面。在渲染頁面之后咕幻，這個函數(shù)會執(zhí)行赖淤。
示例代碼：

<script>
    var s=skrollr.init({
        
      render:function(){
          console.log("完成一次渲染");
      }

    });
</script>

9.easing

作用：用來定義新的運動函數(shù)或者是重寫已經(jīng)存在的運動函數(shù)，用來控制元素運動時候時候的效果谅河。
下面列出skrollr內(nèi)置的一些運動函數(shù)：
linear：線性運動咱旱，是默認(rèn)的運動函數(shù)确丢。如果不對元素設(shè)置運動函數(shù)，元素會線性運動吐限。
quadratic： 二次方程式運動函數(shù)
cubic： 三次方程式運動函數(shù)
cubic： 三次方程式運動函數(shù)
begin/end：分別返回0和1鲜侥，沒有動畫。直接從第一幀的狀態(tài)調(diào)到最后一幀的狀態(tài)诸典。
swing：開始的時候很慢描函，但是后面會慢慢加速
sqrt：開始的時候很快，但是后面會慢慢減速
bounce：像球一樣運動狐粱，進(jìn)入 網(wǎng)站舀寓，查看圖解
如何定義新的運動函數(shù)：

<script>
    // 下面這些事官方給出的事例
    // 但是我在實際測試的時候，發(fā)現(xiàn)這種方式定義的運動函數(shù)肌蜻，不能使用
    // 即使正常使用定義的wtf互墓，但是元素還是使用默認(rèn)的linear方式運動
    // 所以大家這里做一個參看即可
    skrollr.init({
        easing: {
            //This easing will sure drive you crazy
            wtf: Math.random,
            inverted: function(p) {
                return 1 - p;
            }
        }
    });
</script>

如何重寫已有的運動函數(shù)：

<script>
    var s = skrollr.init({

        // 重寫linear運動函數(shù)
        // 注意這里的函數(shù)的返回值的范圍是[0,1]
        // 如果我們對已有的函數(shù)進(jìn)行重寫，那么是有效的蒋搜，可以改變元素的運動狀態(tài)
        easing:{
            linear:function(){
                return 0.5;
            }
        }
        
        })
</script>

如何使用運動函數(shù)：

<!--
    直接把easing篡撵、quadratic、cubic豆挽、begin/end育谬、swing、sqrt帮哈、outCubic膛檀、bounce
    放到屬性后面的方括號里面，來控制不同的效果
-->
<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-top="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">WOOOT</div>

七娘侍、skrollr中的API：

1.skrollr.get()

作用：返回skrollr事例對象
示例代碼：

<script>
    
    var s = skrollr.init();

    console.log(skrollr.get());

</script>

返回結(jié)果：

2.refresh([elements])

作用：刷新傳入的elements對象咖刃，這些傳入的elements對象可以是Array, NodeList 或者jquery對象。
備注：如果不傳入對象私蕾，則刷新所有

3.getScrollTop()

作用：獲取當(dāng)前的scrollTop
示例代碼：

<script>
    var s = skrollr.init();
    console.log(s.scrollTop());
</script>

4.getMaxScrollTop()

作用：獲取最大scrollTop
示例代碼：

<script>
    var s = skrollr.init();
    console.log(s.getMaxScrollTop());
</script>

5.setScrollTop(top[, force = false])

作用：設(shè)置當(dāng)前scrollTop
備注：如果設(shè)置force=true,那么會直接無動畫的到達(dá)設(shè)置的scrollTop僵缺。默認(rèn)情況下是有動畫的
示例代碼：

<script>
    var s = skrollr.init();
    s.setScrollTop(100,force = true);
</script>

6.isMobile()

作用：返回是否運行在移動端
示例代碼：

<script>
    var s = skrollr.init();
    alert(s.isMobile());
</script>

效果展示：

7.animateTo(top[, options])

作用：控制滾動條從當(dāng)前位置移動到我們通過top設(shè)置的位置胡桃，而且是有過渡動畫的踩叭。我認(rèn)為這是一個很好用API。
options有三個可選參數(shù)翠胰，注意options要以一個對象的形式傳值：
duration：過渡時間容贝，單位是ms。默認(rèn)值是1000ms
easing：運動函數(shù)之景，默認(rèn)是linear
done：回調(diào)函數(shù)斤富，動畫執(zhí)行完成后執(zhí)行
示例代碼：

<script>
    var s = skrollr.init();

    s.animateTo(100, {'duration': 500, "easing": 'linear', "done": fn});

    // 定義回調(diào)函數(shù)，也可在options中使用匿名函數(shù)
    function fn() {
        alert("動畫執(zhí)行完畢");
    }

</script>

8.stopAnimateTo()

作用：停止上面提到的滾動條移動動畫

9.on(name, fn)

作用：給beforerender, render, keyframe添加事件偵聽函數(shù)锻狗。
示例代碼：

<script>
    var s = skrollr.init();
    
    // 頁面渲染之前满力，執(zhí)行函數(shù) 
    s.on('beforerender',function(){
        console.log("渲染頁面之前");
    })

    // 頁面渲染之后焕参，執(zhí)行函數(shù)
    s.on('render',function(){
        console.log("渲染頁面之后");
    })

    // 需要說明的是，如何給keyframe添加事件偵聽函數(shù)油额，我沒有理解
    // 官方文檔中也沒有給出示例代碼
    // 感覺這一點還是有點坑
</script>

效果展示：

10.off(name)

作用：移除上面添加的事件偵聽函數(shù)
示例代碼：

<script>
    var s = skrollr.init();

    // 頁面渲染之前叠纷，執(zhí)行函數(shù)
    s.on('beforerender',function(){
        console.log("渲染頁面之前");
    })

    // 頁面渲染之后，執(zhí)行函數(shù)
    s.on('render',function(){
        console.log("渲染頁面之后");
    })

    // 移除了render的事件偵聽函數(shù)
    s.off('render')
</script>

效果展示：

以上便是我對skrollr.js這個輕量級js庫的總結(jié)潦嘶。
如果文章中有錯誤的地方涩嚣，或者遺漏了某些重要的知識點，歡迎大家及時指出掂僵，我會及時修正航厚。
最后還是要說一句，如果你的英文不是特別差的話锰蓬，推薦大家讀讀英文原版文檔幔睬。
看到全英文，不用慌互妓，慢慢讀溪窒，你肯定看得懂。

JavaScript庫——skrollr.js中文教程

一、skrollr 相關(guān)地址鏈接：

二、認(rèn)識我們下載的代碼包：

三溺健、skrollr使用方法：

1. 引入源碼文件 skrollr.min.js 或者是 skrollr.js

2.頁面加載完成后，初始化skrollr

3.在HTML代碼中鞭缭，給標(biāo)簽元素添加類似data-200="height:20px"屬性，來進(jìn)行控制樣式變化魏颓。

四、skrollr的兩種模式：absolute mode和relative mode

1.absolute mode

2.relative mode

3.特別提醒

4.備注

五梧喷、 skrollr的一些特性

1.自動給元素添加Class

2.自動補全css屬性

3.注意事項

六趟佃、 skrollr.init()中的參數(shù)

1.smoothScrolling

2.smoothScrollingDuration

3.constants

4.forceHeight

4.mobileCheck=function() {...}

5.mobileDeceleration

6.edgeStrategy

7.skrollrBody

8.beforerender

8.render

9.easing

七娘侍、skrollr中的API：

1.skrollr.get()

2.refresh([elements])

3.getScrollTop()

4.getMaxScrollTop()

5.setScrollTop(top[, force = false])

6.isMobile()

7.animateTo(top[, options])

8.stopAnimateTo()

9.on(name, fn)

10.off(name)

3.在HTML代碼中鞭缭，給標(biāo)簽元素添加類似`data-200="height:20px"`屬性，來進(jìn)行控制樣式變化魏颓。