简易的阻尼滚动条的插件
生活随笔
收集整理的這篇文章主要介紹了
简易的阻尼滚动条的插件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1 // 直接添加到html中就可以看到效果
2
3 var speed = 0; // 速度(不可改)
4 var s____ = 6; // 速度(可配置)
5 var max__ = 48; // 最大速度：最好是s的倍數(可配置)
6 var direction = 0; // 方向(不可改)
7
8 $(document).on("mousewheel", function (e) {
9 e.preventDefault(); // 阻止默認滾動
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 // 緩沖(阻尼實現)
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的值，實現加速，轉向等
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
轉載于:https://www.cnblogs.com/Mr-Jquery/articles/2775553.html
總結
以上是生活随笔為你收集整理的简易的阻尼滚动条的插件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 酒店管理系统房态图的效果制作
- 下一篇： the more wites of co