JS滚轮组件

 

 

　　
　　// 滚轮组件
　　function wheelFn(obj,wheel_fn){

        if( window.navigator.userAgent.toLowerCase().indexOf('firefox')!==-1){
            obj.addEventListener('DOMMouseScroll',fn,false);    
        }else{
            obj.onmousewheel=fn;    
        };
        
        function fn(ev){

            var oEvent=ev||event;
            
            if(oEvent.wheelDelta){
                var down=oEvent.wheelDelta<0;
            }else{
                var down=oEvent.detail>0;
            };
            
            if(wheel_fn){
                wheel_fn(down);
            };
            
            if(ev){
                ev.preventDefault();
            };
            
            return false;
        };
    };

 

调用方法

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{ margin:0;}
.box{ width:300px; height:300px; border:1px solid #000;}
p{ margin:0; position:relative; top:0;}

</style>
</head>

<body>

<div class="box">
    <p>这是一堆的文字 这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字这是一堆的文字
    </p>
</div>


<script src="wheel.js"></script>
<script>

window.onload = function(){
    // 原生JS 滚轮函数
    var box = document.getElementsByTagName('div')[0];
    var p = document.getElementsByTagName('p')[0];
    
    wheelFn(box, function( down ){
        
        if( down ){
            // 向下
            p.style.top = p.offsetTop - 10 + 'px';    
        }else{
            p.style.top = p.offsetTop + 10 + 'px';
        };
        
    });
};



</script>
</body>
</html>

 

posted @ 2016-07-13 10:16  __枫伊飘渺  阅读(499)  评论(0)  编辑  收藏  举报