自定义滚动条
Posted 飘然离去
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自定义滚动条相关的知识，希望对你有一定的参考价值。
转载：
0.模拟滚动条的原理。
http://www.qdfuns.com/notes/13003/128599c8f7abfee8e2e1933ed79353e7
1.最简单的css3自定义滚动条，但是兼容性我没有测试。
http://www.qdfuns.com/notes/25619/986fecdbc6b3b2ca0378c4036e8f0d25.html
2.看网友定义的一个，也叫xiaoyan，代码看的挺好的，他还定义了一个自己的库看的很6。
http://www.qdfuns.com/notes/16843/e204e911e9637b77ad8fed50bcfa3ed9.html
3.jquery 插件一种简易的自定义方式。
代码粘贴
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://cdn.bootcss.com/jquery/1.11.1-beta1/jquery.js"></script> <script src="https://cdn.bootcss.com/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script> </head> <body> <div class="box"> <div class="scroll-content"> 内容区........... </div> </div> <style> .box{width:500px;height:300px;border:1px solid #ccc;overflow:hidden;position:relative;} .scroll-bar-parent{background-color:#ccc;right:0;}/*滚动条父级的样式*/ .scroll-bar{background:#666;left:0;}/*滚动条的样式*/ </style> </body> </html>
(function(){
$.fn.scrollBar = function( options ){
options = $.extend({}, $.fn.options, options);//默认参数，如果没传 则使用默认参数
var _scrollInit = function (obj){//滚动主函数
obj.data(‘_this‘,this);//把当前对象缓存起来，更新的时候会用到this
this.This = obj,//当前调用的对象
this.scrollContent = this.This,//滚动的内容
this.parent = this.This.parent(),//对象父级
this.scrollContent = this.scrollContent.wrap(‘<div class="scroll-box"></div>‘),//给滚动内容包裹一个容器
this.scrollBox = this.scrollContent.parent(‘.scroll-box‘),//容器
this.scrollBarParent = $(‘<div class="scroll-bar-parent"><div class="scroll-bar"></div></div>‘).appendTo(this.scrollBox),//插入一个滚动条到容器中(这一块是滚动条的父级)
this.scrollBar = this.scrollBarParent.children();//滚动条
this.mark = true;//一个标记，当options.animate(是否运动方式滚动)存在时,记录是否运动完毕，当完毕情况下才能继续滚动；
this.setStyle();
this.styleInit();//初始化元素高宽，一般用于内容区高度改变时调用
this.scrollWheel();//初始化滚动事件
this.mouse();
}
_scrollInit.prototype = {//函数方法
setStyle:function(){//初始化样式
this.scrollBox.css({//容器样式
‘overflow‘:‘hidden‘,
‘position‘:‘relative‘
});
this.This.css({//滚动内容的样式
‘position‘:‘relative‘
});
this.scrollBarParent.css({//滚动条父级样式
‘position‘:‘absolute‘,
‘height‘:‘100%‘,
‘width‘:‘10px‘,
‘top‘:‘0‘
});
this.scrollBar.css({
‘position‘:‘absolute‘,
‘top‘:‘0‘,
‘width‘:‘100%‘,
‘height‘:‘20px‘
});
},
styleInit:function(){//初始化元素高宽
$.fn.scrollChange.call(this);//第一次初始化改变this指向
},
scrollWheel : function(e){//鼠标轮滚动事件
var _this = this;//当前对象
this.scrollContent.mousewheel(function(e, delta){//添加事件
e.preventDefault();
if(options.animate){//判断是否是以运动形式滚动
if(!_this.mark)return;//判断是否运动完成
_this.mark = true;//还在运动当中的话 就设置为false
}
var $this = $(this);//当前事件对象
if(delta < 0){//小于0说明往下面滚
var t = _this.scrollBar.position().top + options.distance;//滚动内容的top值-设定的距离值
}else{//往上面滚
var t =_this.scrollBar.position().top - options.distance;//滚动内容的top值+设定的距离值
}
_this.scrollTop(t);//设置元素的位置
});
},
mouse:function(){
var _this = this;
this.scrollBar.mousedown(function(e){
var DY = e.clientY -_this.scrollBar.position().top;
$(document).mousemove(function(e){
var MY = e.clientY - DY;
_this.scrollTop(MY,true);
return false;
});
$(document).mouseup(function(e){
$(document).unbind(‘mousemove‘);
$(document).unbind(‘mouseup‘);
});
return false;
});
},
scrollTop:function(t,type){//设置元素滚动位置
if(t < 0){//大于0 滚动条到顶了
t = 0;//不能让他超出，所以设置为0
}else if(t > this.barParentHeight - this.scrollHeight){//滚动条到底了
t = this.barParentHeight - this.scrollHeight;//让他直接等于底部的值
}
var pro = this.scrollHeight / this.barParentHeight;//拿到滚动条与父级的比例
var _this = this;//当前对象
if( options.animate ){//判断是否是以运动形式滚动
this.scrollContent.stop().animate(
{
top:-t / pro}
,options.speed
,options.esing
,function(){//t : 滚动的值，options.speed: 运动的速度,options.esing:运动方式
options.Callback && options.Callback({t:t,o:this});//滚动完成回调函数
_this.mark = true;//完成运动之后把标记设置为true,这样就可以继续下一次滚动
});
if(type){
this.scrollBar.css({‘top‘:t});//设置滚动条的top
}else{
this.scrollBar.stop().animate({‘top‘: t},options.speed);//滚动条滚动
}
}else{//直接滚动，不以运动方式滚动
this.scrollBar.css({‘top‘:t});//设置滚动条的top
this.scrollContent.css({top:-t / pro});//设置滚动内容的top
}
}
}
$.fn.scrollChange = function(){//更新函数
if($(this).data(‘_this‘)){//如果当前元素初始化过，则用缓存中的this
var This = $(this).data(‘_this‘);//取出缓存中的对象
}else{
var This = this;//否则是第一次初始化
}
This.boxWidth = This.parent.outerWidth(true);//父级的宽度
This.boxHeight =This.parent.outerHeight(true);//父级的高度
This.scrollBox.css({//设置容器的高宽
width:This.boxWidth,
height:This.boxHeight
});
This.scrollBarParent.css({//设置滚动条父级的高宽
height:This.boxHeight,
width:options.width
});
This.barParentHeight = This.scrollBarParent.outerHeight(true);//滚动条父级的高度
This.contentHeight = This.scrollContent.outerHeight(true);//滚动内容的高度
var pro = This.boxHeight / This.contentHeight;//拿到父级高度与滚动内容的比例
var t = This.scrollContent.position().top;
This.scrollBar.css({//设置滚动条的高度
/*父容器的高度乘以滚动条父级的高度除以 滚动内容的高度等于 滚动条的高度*/
height:This.boxHeight * This.barParentHeight / This.contentHeight,
top:-t * pro
});
This.scrollHeight = This.scrollBar.innerHeight();//滚动条高度
}
return this.each(function(){
var scrollObj = new _scrollInit($(this));//初始化对象
});
}
$.fn.options = {//默认参数
width:6,//滚动条的宽度
distance : 100,//一次滚动的距离
animate:false,//是否以运动形式滚动
speed:500,//运功速度（animate为true的情况下才能设置）
esing:‘swing‘,//运动方式
Callback:function(position){//回调函数
}
}
})();
$(‘.box .scroll-content‘).scrollBar();
3.
以上是关于自定义滚动条的主要内容，如果未能解决你的问题，请参考以下文章
Malihu 自定义滚动条 - 滚动到 id 插件在页面中不起作用
如何在 MS Word 文档中显示代码片段，因为它在 *** 中显示（滚动条和灰色背景）