简易的阻尼滚动条的插件 

 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

posted @ 2012-11-18 03:40  Yorkie  阅读(413)  评论(0)  编辑  收藏  举报