频道导航

javascript动画系列之模拟滚动条

2019-01-06 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了javascript动画系列之模拟滚动条，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

前面的话

当元素内容溢出元素尺寸范围时，会出现滚动条。但由于滚动条在各浏览器下表现不同，兼容性不好。所以，模拟滚动条也是很常见的应用。本文将详细介绍滚动条模拟

原理介绍

滚动条模拟实际上和元素模拟拖拽类似。

仅仅通过范围限定，使元素只可以在单一方向上拖拽

Box" style="height: 200px;width: 16px;background-color:#F5F5F5;border-radius:10px;Box-shadow:inset 0 0 6px rgba(0,0.3);position:relative;">

Box-shadow:inset 0 0 6px rgba(0,.3);border-radius:10px;position:absolute;">

通过将上面代码封装成函数，可以实现横向和纵向两种滚动条

Box1" style="height: 200px;width: 16px;background-color:#F5F5F5;border-radius:10px;Box-shadow:inset 0 0 6px rgba(0,0.3);position:relative;">

Box-shadow:inset 0 0 6px rgba(0,.3);border-radius:10px;position:absolute;">

Box2" style="height: 16px;width: 200px;background-color:#F5F5F5;border-radius:10px;Box-shadow:inset 0 0 6px rgba(0,0.3);position:relative;">

Box-shadow:inset 0 0 6px rgba(0,.3);border-radius:10px;position:absolute;">

应用

下面来介绍通过滚动条实现的几个应用

数字加减

通过移动滚动条来实现数字的加减。

比例关系为：

滚动条已移动距离/滚动条可移动距离= 数字当前值/数字最大值

Box" style="height: 16px;width: 200px;display:inline-block;background-color:#F5F5F5;border-radius:10px;Box-shadow:inset 0 0 6px rgba(0,0.3);position:relative;">

Box-shadow:inset 0 0 6px rgba(0,.3);border-radius:10px;position:absolute;">

元素尺寸

通过拖动滚动条来实现元素尺寸的变化，以改变元素宽度为例

。比例关系为：

滚动条已移动距离/滚动条可移动距离= 元素当前宽度/元素最大宽度

Box" style="height: 16px;width: 200px;display:inline-block;background-color:#F5F5F5;border-radius:10px;Box-shadow:inset 0 0 6px rgba(0,.3);border-radius:10px;position:absolute;">

内容滚动

通过拖动滚动条来实现内容滚动，

比例关系为：

滚动条已移动距离/滚动条可移动距离= 内容已移动距离/内容可移动距离

Box" style="height: 200px;width: 16px;display:inline-block;background-color:#F5F5F5;border-radius:10px;Box-shadow:inset 0 0 6px rgba(0,0.3);position:relative;vertical-align:middle;">

Box-shadow:inset 0 0 6px rgba(0,.3);border-radius:10px;position:absolute;">