JS自定义滚动条效果+鼠标滚轮事件

最新推荐文章于 2022-01-27 21:08:33 发布

七夜丨鸣

最新推荐文章于 2022-01-27 21:08:33 发布

阅读量2.3k

点赞数 1

文章标签：滚动条鼠标滚轮 javascript

本文链接：https://blog.csdn.net/qyaroon/article/details/51153794

版权

页面代码：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="jquery-1.11.3.js"></script>
  <style>
   *{margin:0;padding:0}
   ul{list-style:none}
   .detail{width:400px;height:360px;border:1px solid #ddd;text-align:center;margin:50px auto}
   .title{width:400px;height:40px;background-color:#D6C3A7;border-bottom:1px solid #ddd;}
   .title li{float:left;height:40px;line-height:40px;width:80px;}
   .title li+li{width:160px}
   .box{width:400px;height:300px;overflow:hidden}
   .content{width:360px;float:left;}
   .content li{height:50px;line-height:50px;font-size:18px;}
   .content li div{display:inline-block;width:80px}
   .content li div+div{width:130px}
   .bar{float:left;width:10px;height:300px;background-color:#ddd;position:relative;}
   .btn{position:absolute;right:-8px;top:0px;width:25px;height:25px;background-color:lightblue;
    border:1px solid #ddd;border-radius:50%;cursor:pointer;}
   .active{background-color:red}
  </style>
 </head>
 <body>
  <div class="detail">
   <div class="title">
    <ul>
     <li>序号</li><li>用户</li><li>人气</li>
    </ul>
   </div>
   <div class="box">
    <ul class="content">
     <li><div>1</div><div>137****1234</div><div>10,000</div></li>
     <li><div>2</div><div>137****1234</div><div>9,000</div></li>
     <li><div>3</div><div>137****1234</div><div>8,000</div></li>
     <li><div>4</div><div>137****1234</div><div>7,000</div></li>
     <li><div>5</div><div>137****1234</div><div>6,000</div></li>
     <li><div>6</div><div>137****1234</div><div>5,000</div></li>
     <li><div>7</div><div>137****1234</div><div>4,000</div></li>
     <li><div>8</div><div>137****1234</div><div>3,000</div></li>
     <li><div>9</div><div>137****1234</div><div>2,000</div></li>
     <li><div>10</div><div>137****1234</div><div>1,000</div></li>
    </ul>
    <div class="bar">
     <div class="btn"></div>
    </div>
   </div>
  </div>
  <script src="scroll.js"></script>
 </body>
</html>

JS代码：

var box=$('.box');//主体内容的父级
var con=$('.content');//滑动的主体内容
var bar=$('.bar');//滑动条
var btn=$('.btn');//滑动槽
//自定义条状滑动条的长度
    /*new_h = box.height() * bar.height() / con.height();
    btn.css("height", new_h);*/
//初始化滑动条和滑动内容的位置
    /* bth.style.top = 0;
    con.style.marginTop=0;*/
var e = e || window.event;

var ay = parseInt(bar.height() - btn.height());//手柄可滑动距离
var by = parseInt(con.height() - box.height());//主体内容可滑动的内容

var ismove = 1;
var startY = 0;
var positionY=0;
var newTop,distanceMove,distanceMain;

btn.mousedown(function(e){
    startY = e.clientY;
    positionY = parseInt(btn.position().top);
    ismove = 2;
    btn.addClass('active');
    return false;//阻止浏览器默认事件，比如拖拽鼠标会选中文字
});
btn.mouseup(function(){
    ismove = 1;
    btn.removeClass('active');
    return false;
});
btn[0].οnmοusemοve=function(e){
    stopDefault(e);
    if (ismove == 2){
        btn.addClass('active');
        distanceMove = e.clientY - startY;
        newTop = positionY + distanceMove;
        if (newTop < 0){
            newTop = 0;
        }else if(newTop > ay){
            newTop = ay;
        }
        distanceMain = - newTop * by / ay;
        btn.css('top', newTop);
        con.css('margin-top',distanceMain);
    }
    return false;
};
$(document).mouseup(function(){
    btn.mouseup();
})
$(document).mousemove(function(e){
    if(ismove == 2){
        btn[0].onmousemove(e);
    }
})

//点击滚动槽的事件
var topCommon = box.offset().top-$(window).scrollTop();//元素到文档边框的距离
var btnHeight =btn.height();
bar.click(function (e) {
    var e = e || window.event;
    var distancsMove = e.clientY - topCommon - btnHeight/2;
    var distanceMain = - distancsMove * by / ay;
    con.animate({marginTop: distanceMain}, 100);
    btn.animate({top: distancsMove}, 100);
    return false;
})

//鼠标滚轮事件
 box.on("mousewheel DOMMouseScroll", function (e){
        var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
            (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));      //detail是firefox的属性
        var newBtop = parseInt(btn.css('top'));
        var newCtop = 0;
        if(delta < 0){ //向下滚动滑轮
            newBtop += 20;
            newCtop = -newBtop * by / ay;
            if (newBtop > ay) {
                newBtop = ay;
                newCtop = -by;
            }
            btn.css('top', newBtop);
            con.css("margin-top", newCtop);
            return false;
        }else if (delta > 0){    //向上滚动滑轮
            newBtop -= 20;
            newCtop = -newBtop * by / ay;
            if (newBtop < 0){
                newBtop = 0;
                newCtop = 0;
            }
            btn.css('top', newBtop);
            con.css("margin-top", newCtop);
            return false;
        }
        return false;
    })

function stopDefault(e) {
    //阻止默认浏览器动作(W3C)
    if (e && e.preventDefault){
        e.preventDefault();
    }else{//IE中阻止函数器默认动作的方式
        window.event.returnValue = false;
    }
    return false;
}

七夜丨鸣

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JS自定义滚动条效果+鼠标滚轮事件

页面代码： Document *{margin:0;padding:0} ul{list-style:none} .detail{width:400px;height:360px;border:1px solid #ddd;text-align:center;margin:50px auto} .title{width:400px;heigh
复制链接

扫一扫