上节课程中我们编写了自定义滚动条的html代码和css脚本,但是他只是将滚动条的固定效果做出来了,但是还不能滚动,为了能使其能像浏览器的滚动条一样正常的滚动我们必须为其书写滚动脚本,
这也就是这节课的主题所在。
<script type="text/javascript">
"use strict";
(function (win,doc,$){
//构造函数
function CusScrollBar(options){
this._init(options);
}
/*把以下初始化方法重写为下面使用extend方法实现的方式
* CusScrollBar.prototype._init = function(){
console.log("test");
}*/
$.extend(CusScrollBar.prototype, {
_init:function(options){
var self = this;
self.options = {
scrollDir : "y", //滚动方向
contSelector : "", //滚动内容区选择器
barSelector : "", //滚动条选择器
sliderSelector : "" //滚动滑块选择器
}
;
$.extend(true,self.options,options || {});
}
});
win.CusScrollBar = CusScrollBar;
})(window,document,jQuery);
//测试代码
var temp = new CusScrollBar({
contSelector : ".scroll-wrap", //滚动内容区选择器
barSelector : ".scroll-bar", //滚动条选择器
sliderSelector : ".scroll-slider" //滚动滑块选择器
});
var temp2 = new CusScrollBar({
contSelector : ".scroll-wrap2", //滚动内容区选择器
barSelector : ".scroll-bar2", //滚动条选择器
sliderSelector : ".scroll-slider2" //滚动滑块选择器
});
console.log(temp);
console.log(temp2);
</script>
请您注意
·自觉遵守:爱国、守法、自律、真实、文明的原则
·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品,NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款