js滚动到指定位置_JS拖拽专题(三)——「实战」通过解一元一次方程实现自定义滚动条...

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

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

本章目标

1. 拖拽时端点的条件判断
2. 如何将拖拽的滚动条的位置去找出相应的内容滚动的位置。(解简单的一元一次方程)

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

有时候我们的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拖拽专题系列技术文章，更多精彩内容持续更新中。。。

未完待续。。。