我爱编程程序员W3C

skrollr.js中文教程

2018-08-24  本文已影响9人  振礼硕晨

skrollr.js是一款轻量级且强大的js库，关于这款js库的相关的详细教程却不多。
所以这里根据国内一些大神们的笔记和skrollr官方文档进行总结，方便自己以后查阅，也方便大家学习。
这里主要参考了 Shimily大神的skrollr中文教程，在这个基础上进行改进和完善。有什么不妥之处，还希望大家能够及时指出，共同修改。

一、skrollr 相关地址链接：

二、认识我们下载的代码包：

三、skrollr使用方法：

1. 引入源码文件 skrollr.min.js 或者是 skrollr.js
<script src="skrollr.js"></script>
2.页面加载完成后，初始化skrollr
<script>
    // 一定要在页面文档全部加载完成之后，再进行初始化skrollr
    window.onload=function(){
        var s=skrollr.init();
    }
</script>
3.在HTML代码中，给标签元素添加类似data-200="height:20px"属性，来进行控制样式变化。
<!--
    当滚动条在顶部的时候，div的背景是蓝色
    当滚动500px的时候，div的颜色变为红色
    滚动条滚动的过程中，颜色是逐渐由绿色变为蓝色的
-->
<div data-0="background-color:rgb(0,0,255)" data-500="background-color:rgb(255,0,0)"></div>

<!-- 
    当滚动条在顶部的时候，div的高度是20px
    当滚动300px的时候，div的高度是100px
    滚动条滚动的过程中，高度是逐渐由20px变为100px的
-->
<div data-0="height:20px" data-300="height:100px"></div>v

<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>

四、skrollr的两种模式：absolute mode和relative mode

1.absolute mode

格式 data-[offset]-[anchor]
offset： 可以使任意整数,默认值是0
anchor： 可以是start或者end

2.relative mode

格式 data-[offset]-(viewport-anchor)-[element-anchor]
offset：可以使任意整数，默认值是0
viewport-anchor：表示视口的底部或者顶部可以是top、center、bottom
element-anchor：表示相对元素的顶部或者底部 可以是top、center、bottom

3.特别提醒
<div data-anchor-target="#foo"></div>
4.备注
<!--
    当滚动条滚动十楼的10%的时候，div的高度是20px
    当滚动条滚动十楼的30%的时候，div的高度是100px
-->
<div data-10p="height:20px" data-30p="height:100px"></div>

<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
2.自动补全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.注意事项

六、 skrollr.init()中的参数

我们在初始化skrollr的时候，可以通过设置一些参数，来控制滚动条运动的时候的一些效果，这里列出一些非常常用的参数。

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

<div data-100="height:50px" data-50="height:10px" data-600="height:100px" data-smooth-scrolling="on"></div>
2.smoothScrollingDuration
<script>
    var s=skrollr.init({
        smoothScrollingDuration:500
    });
</script>
3.constants
<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
<script>
    var s=skrollr.init({
        forceHeight:false
    });
</script>
4.mobileCheck=function() {...}
<script>
    var s=skrollr.init({
        mobileCheck:function(){
            return (/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera);
        }
    });
</script>
5.mobileDeceleration
<script>
    var s=skrollr.init({
        mobileDeceleration:0.01
    });
</script>
6.edgeStrategy
7.skrollrBody
<script>
    var s=skrollr.init({
        skrollrBody:'my-body'       // 一般不建议修改
    });
</script>
8.beforerender
{
    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
}
8.render
<script>
    var s=skrollr.init({
        
      render:function(){
          console.log("完成一次渲染");
      }

    });
</script>
9.easing
<script>
    // 下面这些事官方给出的事例
    // 但是我在实际测试的时候，发现这种方式定义的运动函数，不能使用
    // 即使正常使用定义的wtf，但是元素还是使用默认的linear方式运动
    // 所以大家这里做一个参看即可
    skrollr.init({
        easing: {
            //This easing will sure drive you crazy
            wtf: Math.random,
            inverted: function(p) {
                return 1 - p;
            }
        }
    });
</script>

<script>
    var s = skrollr.init({

        // 重写linear运动函数
        // 注意这里的函数的返回值的范围是[0,1]
        // 如果我们对已有的函数进行重写，那么是有效的，可以改变元素的运动状态
        easing:{
            linear:function(){
                return 0.5;
            }
        }
        
        })
</script>

<!--
    直接把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()
<script>
    
    var s = skrollr.init();

    console.log(skrollr.get());

</script>
2.refresh([elements])
3.getScrollTop()
<script>
    var s = skrollr.init();
    console.log(s.scrollTop());
</script>
4.getMaxScrollTop()
<script>
    var s = skrollr.init();
    console.log(s.getMaxScrollTop());
</script>
5.setScrollTop(top[, force = false])
<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])
<script>
    var s = skrollr.init();

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

    // 定义回调函数，也可在options中使用匿名函数
    function fn() {
        alert("动画执行完毕");
    }

</script>
8.stopAnimateTo()
9.on(name, fn)
<script>
    var s = skrollr.init();
    
    // 页面渲染之前，执行函数 
    s.on('beforerender',function(){
        console.log("渲染页面之前");
    })

    // 页面渲染之后，执行函数
    s.on('render',function(){
        console.log("渲染页面之后");
    })

    // 需要说明的是，如何给keyframe添加事件侦听函数，我没有理解
    // 官方文档中也没有给出示例代码
    // 感觉这一点还是有点坑
</script>
10.off(name)
<script>
    var s = skrollr.init();

    // 页面渲染之前，执行函数
    s.on('beforerender',function(){
        console.log("渲染页面之前");
    })

    // 页面渲染之后，执行函数
    s.on('render',function(){
        console.log("渲染页面之后");
    })

    // 移除了render的事件侦听函数
    s.off('render')
</script>

以上便是我对skrollr.js这个轻量级js库的总结。
如果文章中有错误的地方，或者遗漏了某些重要的知识点，欢迎大家及时指出，我会及时修正。
最后还是要说一句，如果你的英文不是特别差的话，推荐大家读读英文原版文档。
看到全英文，不用慌，慢慢读，你肯定看得懂。

上一篇下一篇

猜你喜欢

热点阅读