h5滚动隐藏滚动条_JS拖拽专题(三)——「实战」通过解一元一次方程实现自定义滚动条...

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

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

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

先来看我们今天的最终效果&＃xff01;

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

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

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

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

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

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

• 当滚动条的位置在最顶点的时候&＃xff0c;内容滚动区域也在最顶端
• 当滚动要的位置在最底端的时候&＃xff0c;内容滚动区域也在最底端

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

即&＃xff1a;y &＃61; kx &＃43; b

前面我们找出了两个临界点&＃xff1a;当x &＃61; 0 时&＃xff0c;y &＃61; 0 ;这时候&＃xff0c;我们代入到公式中即&＃xff1a;

0 &＃61; 0 * k &＃43; b &＃61;> b &＃61; 0 ;

所以 &＃xff1a;y &＃61; kx

我们还有一个条件&＃xff0c;当滚动条最下面的时候&＃xff0c;这时候

k &＃61; 滚动条的top值/ 最大可以滚动范围

var k &＃61; scrollbar.style.top / ( containerH - scrollBarH);

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

完整的代码

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

2、滚动条可滚动的范围应该是父容器的高度&＃xff0d;滚动条的高度。同理&＃xff0c;内容区域可滚动的范围应该是内容区域本身的高度&＃xff0d;父容器的高度。

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

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

未完待续。。。