Jq-滚动条插件写法(二)-白红宇

接着上次的未完的部分。

接下是对滚轮的支持。

滚轮大概可以分为这么两类：

1. Firefox

Firefox 需要添加 'DOMMouseScroll' 事件支持，并取值是使用detail 为正负30。

2. IE,Opera,Safari,Chrome

而这四类，则直接在 window.onmousewheel = document.onmousewheel = $(dom).onmousewheel = fn

取值是：正负120，

虽然这两个取值是不一样的，但含义是一样的，正为向上，负为向下。

所以：

       mousewheel:  
function(fun){ 
return
this.each( 
function(){ 
var that =  
this; 
             that.delta = 0;  
//
滚动方向
if($.browser.msie || $.browser.safari){  
//
IE Safari 
            that.onmousewheel =  
function(){ 
                 that.delta = event.wheelDelta;  
//
 IE,Opera,Safari,Chrome 使用wheelDelta 只取 +-120
                event.returnValue =  
false; 
                 fun && fun.call(that);  
//
    
            } 
         }  
else {  
//
Firefox
            that.addEventListener('DOMMouseScroll',  
function(e){ 
                 that.delta = e.detail > 0 ? -1 : 1;  
//
 Firefox 使用 detail 只取 +-3
                e.preventDefault(); 
                 fun && fun.call(that); 
             },  
false); 
         } 
     }); 
 } 

然后根据，上面总结的特性，添加代码：

       $(that).mousewheel( 
function(){ 
if( 
this.delta > 0){  
//
如果大于零，则向上，反之向下。
        currentTop -= 15; 
     }  
else { 
         currentTop += 15; 
     } 
     setScrollTop(); 
 }); 

然后，添加对上下按钮的支持：

View Code

基本代码块就这么多，然后是添加风格修改，

由于css属性选择器覆盖的特性，父类可以覆盖子类的权重。所以提供其它两种风格：

/*
 简单 
*/
 .jkscroll-wrap .jkscroll-simple{ 
width: 
12px; 
background: 
#f2f2f2; 
border-left: 
1px solid #dadada;} 
 .jkscroll-wrap .jkscroll-simple .jkscroll-bar-top,.jkscroll-wrap .jkscroll-simple .jkscroll-bar-bot{ 
display: 
none;} 
 .jkscroll-wrap .jkscroll-simple .jkscroll-bar-mid{ 
top: 
0; 
right: 
-2px; 
background: 
#c0c0c0; 
border: 
none 0;} 
 .jkscroll-wrap .jkscroll-simple .hover{ 
background: 
#909090;} 
/*
 blue 
*/
 .jkscroll-wrap .jkscroll-gray{ 
background: 
url(http://app.soche8.com/show/jscoll/s_bg.gif) repeat-y right 0 #edf7fa;} 
 .jkscroll-wrap .jkscroll-gray .jkscroll-bar-top,.jkscroll-wrap .jkscroll-gray .jkscroll-bar-bot{ 
background: 
url(http://app.soche8.com/show/jscoll/s_bg.gif);} 
 .jkscroll-wrap .jkscroll-gray .jkscroll-bar-mid{ 
background: 
url(http://app.soche8.com/show/jscoll/s_bg.gif) repeat-y -45px 0; 
border: 
1px solid #BCBCBC;} 

由此，在调用时直接可以对样式进行操作，添加 .jkscroll-simple, .jkscroll-gray 两个样式，即可更换风格。

var defaults = { 
     pattern: 'blue', //默认风格 
 }; 
var opts = $.extend(defaults, options); 
//
风格设定
if(opts.pattern == 'jkscroll-simple'){ 
     jkBar.addClass('jkscroll-simple'); 
     jkBarBtnWidth = 0; 
 }  
else
if(opts.pattern == 'jkscroll-gray'){ 
     jkBar.addClass('jkscroll-gray'); 
 } 

在调用时，提供三种风格的支持：

       $('.jkscroll-wrap').jikeyScrollerBar({ 
     pattern: 'jkscroll-simple'  
//
简版
//
pattern: 'jkscroll-gray' //灰色
//
pattern: 'jkscroll-blue' //蓝色
}); 

由于想更自动化一点，外部的包装层也使用jquery提供的方向进行动态的添加：

var jkScrollWrap =  
this.wrapInner('<div class="jkscroll-cont"></div>'), 
     jkScrollCont = jkScrollWrap.append('<div class="jkscroll-bar"><div class="jkscroll-bar-top"></div><div class="jkscroll-bar-mid"></div><div class="jkscroll-bar-bot"></div></div>'); 

这样的话，只要对内容高度进行限定，外边的滚动条，从DOM结构到js控制都是通过插件来实现，这样增加了插件的灵活性。

那最终的代码如下：

运行代码

本文转自豪情博客园博客，原文链接：XXXXXXXX，如需转载请自行联系原作者