摘要：
好久没有分享jquery特效教程了，今天分享的是jquery制作自定义滚动条插件。没错，就是手把手教你如何实现此特效！.....

下午@美匠在群内咨询自定义滚动条效果，其实昨晚的时候我们就有聊过，只是当时没有时间。然后花了点时间写了一个jquery版本的自定义滚动条插件，效果图如下：

下面艺灵将实现此特效的方法及步骤分享给看官，不会的别错过哦！

还是先从上面的效果图说起吧，从图中可以得出一些重要信息：当鼠标按住红色把柄在水平方向拖拽时，上面的内容区进行水平滚动；当松开鼠标时，内容区停止滚动；当鼠标区域超过绿色区域时，红色把柄及内容区停止滚动。下面来一步步实现此功能。

一、html布局

假设内容区的容器名为ylsj-scroll-bd，由于此内容区是水平方向上滚动，所以内容宽度远远大于容器宽度，此时我们再给ylsj-scroll-bd添加一个子级，叫做ylsj-scroll-main。然后我们把内容区的所有内容就全部放这个ylsj-scroll-main里面就可以了。

接下来是下面的滚动条了，我们先创建一个名叫ylsj-scroll-hd的容器，相当于这个滚动条的框框。然后在此容器里面添加一个名叫ylsj-scroll-bar的容器，这个就是我们看到的红色把柄了。当然了，这些中是随便一个配色，看官可根据自己的审美观进行美化滚动条哈。

看似这个滚动条的html布局已经完成了，但为了更好的控制它，我们再给它添加一个名叫ylsj-scroll-w的父级。这样我们在别处调用时可以直接将代码块ylsj-scroll-w拷贝走便是。个人感觉：这个代码已经很精简了吧。

滚动条html源码：

<div class="ylsj-scroll-w">
　<div class="ylsj-scroll-bd">
　　<div class="ylsj-scroll-main clearfix">
　　　<!--需要滚动的内容放这里-->
　　</div>
　</div>
　<!--把柄-->
　<div class="ylsj-scroll-hd">
　　<span class="ylsj-scroll-bar"></span>
　</div>
</div>

二、拖拽把柄

这一步的时候我们就需要写jquery了，毕竟我们要控制拖拽动作。不过看官也不要怕，只要把问题想清楚了一切就会变得很简单。

既然是拖拽，也就按住后才能进行移动。而移动的过程实际上是鼠标跟随，所以我们需要获取鼠标坐标，包括按下时的坐标及移动时的坐标。然后进行计算得出红色把柄移动的值，当松开鼠标时我们还要解绑把柄。需要注意的是：这里只是水平方向上运动，并且红色把柄运动是有范围区间的。相关代码如下：

拖拽把柄的核心代码：

<script type="text/javascript">
$(function(){
　$('.ylsj-scroll-bar').on('mousedown',function(e){
　　//按住红色把柄时执行代码......
　　$(document).mousemove(function(e){
　　　//按住并移动时
　　　//限制把柄范围
　　　if(小于0时){
　　　　//强制等于0
　　　}else if(大于最大滚动范围时){
　　　　//强制等于最大滚动范围的值
　　　};
　　　//把柄运动路径代码......
　　}).mouseup(function(){
　　　//松开按键时清除绑定动作
　　});
　});
})
</script>

三、内容区移动比例

把柄搞定后只剩下内容区了，这个只要把比例搞清楚就可以完工了！不过我们还要要拿出纸笔小计算并分析一下才行。

简单分析：红色把柄移动时内容区也进行移动，当红色把柄从最左侧运动到最右侧时内容区的内容也正好展示完毕。红色把柄运动的距离=滚动条的长度-红色把柄的宽度，同理可得出内容区运动的距离=总内容区的宽度-内容区父级的宽度。然后我们用内容区运动的距离除以把柄运动的距离得出一个比例，最后用此比例乘以把柄运动的距离便是内容区时时运动的距离。

运动值计算：

main_yu=$('.ylsj-scroll-main').width() - $('.ylsj-scroll-bd).width();　//内容区要走完的全部路程
bar_yu=$('.ylsj-scroll-hd').width() - $('.ylsj-scroll-bar').width();　//把柄要走完的全部路程
scale_x=main_yu/bar_yu;　//比例
main_x=-把柄移动的距离*scale_x;　//把柄每移动一定距离时内容区对应运动的值

至此，此特效就已经全部分析完毕，艺灵已将源码封装成插件，便于看官调用。

插件下载：

demo[源码]jquery制作自定义滚动条插件.zip　

插件调用：

<script type="text/javascript">
$(function(){
//调用自定义滚动条插件示例：
$('样式名').ylsjscrollbar({
　s_bd:"ylsj-scroll-bd",  	    //滚动内容父级
　s_main:"ylsj-scroll-main", 	    //滚动的内容
　s_hd:"ylsj-scroll-hd", 		     //把柄父级
　s_bar:"ylsj-scroll-bar",         //把柄自身
　s_bar_on:"ylsj-on"              //按下把柄时的样式
});

由于时间关系，此插件赶制匆忙，后续有空时会对其进行完善。例如：增加垂直滚动把柄、缓动等功能。

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2015-09-20/315.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。