欢迎来到我的JS拖拽专题系列文章，更多精彩内容持续更新中，欢迎关注 ：)

上一章节我们通过拖拽的变形实现了一个简单的轮播图示例。学习了如何利用鼠标的位置差去作用在图片的平移样式上。

本章目标拖拽时端点的条件判断如何将拖拽的滚动条的位置去找出相应的内容滚动的位置。（解简单的一元一次方程）

先来看我们今天的最终效果！

有时候我们的web页面上经常需要用到的自定义的滚动条。那么接下来跟着我就去实现这样的一个示例吧。

布局

这个布局就比较简单了。7个li上下依次排列。父级container设置高度并添加overflow:hidden溢出隐藏。然后container的右侧添加一个自定义滚动条的dom，并设置样式。不多赘述，贴代码：

JS核心

1、单独拖拽滚动条上下滑动，给滚动条添加mousedown事件，分析可知，鼠标上下滑动的距离就是滚动条滑动的距离。

这时候滑动条有上下两个临界条件

滚动条top值不能小于0滚动条top值不能大于容器的高减去滚动条本身的高

2、重点来了：滚动条滚动的距离要映射到左侧内容的滚动。我们接下来找两个临界点。

当滚动条的位置在最顶点的时候，内容滚动区域也在最顶端当滚动要的位置在最底端的时候，内容滚动区域也在最底端

也就是说，滚动条在滚动的过程中，当前top值与当前容器的高度存在一元一次方程式。

即：y = kx + b

前面我们找出了两个临界点：当x = 0 时，y = 0 ;这时候，我们代入到公式中即：

0 = 0 * k + b => b = 0 ;

所以 ：y = kx

我们还有一个条件，当滚动条最下面的时候，这时候

k = 滚动条的top值/ 最大可以滚动范围

var k = scrollbar.style.top / ( containerH - scrollBarH);

由于两个滚动的k是一样的，所以我们可以很轻松的计算出内容滚动的距离。 这里需要注意的是由于当滚动条下面滑动的时候，内容区域是往上走的。所以在设置内容区域的滚动距离的时候方向记得取反~

完整的代码

总结：

1、自定义滚动条的基本原理。通过滚动条的位置变化去改变内容滚动的位置，两者之前的滚动比例k是一样的，比如：当滚动条在最顶点的时候，内容区域也在最顶点，当滚动条滚动到最下面的时候，内容滚动也到最下面。

2、滚动条可滚动的范围应该是父容器的高度－滚动条的高度。同理，内容区域可滚动的范围应该是内容区域本身的高度－父容器的高度。

3、在我们平时的web开发中，由一个动作去控制另一个元素的运动的时候，通常是满足一元一次方程，也就是说他们之间存在一个比例关系，我们要做的就是找出这个比例系数，也就是找关系解一元一次方程即可！

这里是【畅哥聊技术】JS拖拽专题系列技术文章，更多精彩内容持续更新中。。。

未完待续。。。