代码待优化...
如图:
image.png
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
*{
padding:0;
margin:0;
font-size:24px;
}
html,body{
height:100%;
}
.box{
width:300px;
height:300px;
border:1px solid;
overflow: hidden;
position: relative;
-webkit-user-select: none;
top:200px;
}
.i_scrollBar{
position: absolute;
z-index:9999;
width:15px;
height:100%;
top:0;
bottom:0;
right:0;
box-sizing: border-box;
}
.i_scrollSpan{
position: absolute;
z-index: 9999;
width:15px;
height:15px;
border-radius:50%;
background:rgba(73,155,233,0.5);
transition:backgroundColor 2s ease;
}
.i_scrollSpan:hover{
background: rgba(73,155,233,1);
}
.i_scrollbgLine{
width:0px;
margin:0 auto;
height:100%;
padding:2px 0;
box-sizing: border-box;
border-radius: 2px;
background: rgba(0,0,0,0.15);
transition:all .2s ease;
}
.i_scrollBar:hover .i_scrollbgLine{
width:3px;
}
</style>
<script type="text/javascript">
$(function(){
class IscrollBar{
constructor(box,body){
if(box.hasClass('i_scroll_x')){
return false;
}else{
box.addClass('i_scroll_x');
this.box=box;
this.sBody=body;
this.addscrollbar();
this.resize();
$(window).on('resize',()=>{
this.resize();
});
this.addScrollBlock();
this.mouseContrl();
}
}
addscrollbar(){
let scrollBox=$('<div class="i_scrollBar">');
let i_scrollSpan=$('<div class="i_scrollSpan">');
i_scrollSpan.appendTo(scrollBox)
let i_scrollbgLine=$('<div class="i_scrollbgLine">');
i_scrollbgLine.appendTo(scrollBox);
this.box.append(scrollBox);
this.scrollBox=scrollBox;
this.block=i_scrollSpan;
}
resize(){
this.sliderH=this.scrollBox.height();
this.bodyH=this.sBody.height()-this.box.height();
if(this.box.height()>=this.sBody.height()){
this.scrollBox.hide();
}else{
// this.blockH=this.sliderH*this.box.height()/this.sBody.height();
// this.blockH=this.blockH<15?15:this.blockH;
// this.block.css({'height':this.blockH});
this.blockH=this.block.height();
this.scrollBox.show();
}
}
addScrollBlock(){
let _this=this;
// this.block.appendTo(this.box);
this.block.on('mousedown',()=>{
let sliderInnerH=this.sliderH-this.blockH;
let elTop=_this.block.offset().top;
let distanceY=event.pageY-elTop;
console.log(elTop,distanceY)
$(document).on('mousemove',()=>{
let newOffsetTop=event.pageY-distanceY-this.box.offset().top;
console.log(newOffsetTop);
newOffsetTop=newOffsetTop<=0?0:newOffsetTop;
newOffsetTop=newOffsetTop>=sliderInnerH?sliderInnerH:newOffsetTop;
this.bodyTop=-this.bodyH*newOffsetTop/sliderInnerH;
this.sBody.css({'transform':'translate(0,'+this.bodyTop+'px)'})
_this.block.css({'top':newOffsetTop});
});
$(document).on('mouseup',()=>{
$(document).off('mousemove');
});
});
return this;
}
mouseContrl(){
this.box.on('mouseover',()=>{
$(document).on('mousewheel',()=>{
this.bodyTop=this.bodyTop?this.bodyTop:0;
if(event.deltaY>0){
//向上
this.bodyTop-=50;
this.bodyTop=this.bodyTop<=-this.bodyH?-this.bodyH:this.bodyTop;
this.sBody.css({'transform':'translate(0,'+this.bodyTop+'px)'});
this.blockMove();
}else{
this.bodyTop+=50;
this.bodyTop=this.bodyTop>=0?0:this.bodyTop;
this.sBody.css({'transform':'translate(0,'+this.bodyTop+'px)'});
this.blockMove();
}
})
})
this.box.on('mouseout',()=>{
$(document).off('mousewheel')
})
}
blockMove(){
let sliderInnerH=this.sliderH-this.blockH;
let newOffsetTop=-this.bodyTop/this.bodyH*sliderInnerH;
newOffsetTop=newOffsetTop<=0?0:newOffsetTop;
newOffsetTop=newOffsetTop>=sliderInnerH?sliderInnerH:newOffsetTop;
this.block.css({'top':newOffsetTop});
}
}
new IscrollBar($('#box'),$('#scrollInner'));
})
</script>
</head>
<body>
<div class="box" id="box">
<ul id="scrollInner">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
<li>36</li>
<li>37</li>
<li>38</li>
<li>39</li>
<li>40</li>
<li>41</li>
<li>42</li>
<li>43</li>
<li>44</li>
<li>45</li>
<li>46</li>
<li>47</li>
<li>48</li>
<li>49</li>
<li>50</li>
</ul>
</div>
</body>
</html>
