简易的阻尼滚动条的插件
生活随笔
收集整理的這篇文章主要介紹了
简易的阻尼滚动条的插件
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1 // 直接添加到html中就可以看到效果
2
3 var speed = 0; // 速度(不可改)
4 var s____ = 6; // 速度(可配置)
5 var max__ = 48; // 最大速度：最好是s的倍數(shù)(可配置)
6 var direction = 0; // 方向(不可改)
7
8 $(document).on("mousewheel", function (e) {
9 e.preventDefault(); // 阻止默認(rèn)滾動
10 var t1, t2 = -1, delta = e.originalEvent.wheelDeltaY || e.originalEvent.wheelDelta; // for IE
11 if (speed === 0) {
12 t1 = setTimeout(function () {
13 window.scrollBy(0, speed);
14 if (speed !== 0) {
15 setTimeout(arguments.callee, 1);
16 } else {
17 clearTimeout(t1);
18 }
19 }, 1);
20 // 緩沖(阻尼實現(xiàn))
21 t2 = setTimeout(function () {
22 speed > 0 ? speed-- : speed++;
23 if (speed !== 0) {
24 setTimeout(arguments.callee, 1);
25 } else {
26 clearTimeout(t2);
27 }
28 }, 1);
29 }
30 // 刷新speed的值，實現(xiàn)加速，轉(zhuǎn)向等
31 if (delta < 0) {
32 if (direction > 0) {
33 speed = 0;
34 direction = delta;
35 return;
36 }
37 if (speed <= max__) speed += s____;
38 else {
39 speed = max__;
40 }
41 } else {
42 if (direction < 0) {
43 speed = 0;
44 direction = delta;
45 return;
46 }
47 if (speed >= -max__) speed -= s____;
48 else {
49 speed = -max__;
50 }
51 };
52 });
github地址：https://github.com/yorkie/DampingScrollbar.js/blob/master/dampingScrollbar.js
轉(zhuǎn)載于:https://www.cnblogs.com/Mr-Jquery/articles/2775553.html
總結(jié)
以上是生活随笔為你收集整理的简易的阻尼滚动条的插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 酒店管理系统房态图的效果制作
- 下一篇： the more wites of co