上一篇使用jqueryUI编写了一个显示数值的滑动条，这次继续参考一下demo写一个自定义的滚动条。
参考demo
需求
使用限制y轴运动的特性，写一个嵌套div，做成滚动条的形式。左边还有一个div，随着滚动条的滚动而改变上下位置。
编写基本HTML + CSS
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin:0;padding: 0;}
.scroll_warp{
width: 500px;
height: 500px;
border: 1px solid #000;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.scroll_warp .content{
width: 485px;
text-align: center;
}
.scroll_warp .scroll_outside{
position: absolute;
top: 0;
right: 0;
width: 10px;
height:100%;
}
.scroll_warp .scroll_outside .scroll_inside{
height: 200px;
border-radius: 15px;
background-color: pink;
}
</style>
</head>
<body>
<!-- div.scroll_warp>div.content+div.scroll_outside>div.scroll_inside -->
<div class="scroll_warp">
<div class="content">
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="scroll_outside">
<div class="scroll_inside"></div>
</div>
</div>
</body>
</html>
下面设置右边的粉红div可以拖动，同时修改左边内容div的top位置，就可以达到滚动拖动的效果了。
思路：将内容的div改为绝对定位，根据拖动ui.position.top的相反值来设置在内容div的top值即可。
实现代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin:0;padding: 0;}
.scroll_warp{
width: 500px;
height: 500px;
border: 1px solid #000;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.scroll_warp .content{
position: absolute;
top: 0;
left: 0;
width: 485px;
text-align: center;
}
.scroll_warp .scroll_outside{
position: absolute;
top: 0;
right: 0;
width: 10px;
height:100%;
}
.scroll_warp .scroll_outside .scroll_inside{
height: 200px;
border-radius: 15px;
background-color: pink;
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
$(".scroll_inside").draggable({
axis: "y",
containment: "parent", // 限制在父级元素下拖动
opacity: 0.6, // 设置拖动的时候，透明度设置为0.6
drag:function(ev,ui){
console.log(ui.position.top);
$(".content").css({"top":-ui.position.top});
}
})
})
</script>
</head>
<body>
<!-- div.scroll_warp>div.content+div.scroll_outside>div.scroll_inside -->
<div class="scroll_warp">
<div class="content">
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="scroll_outside">
<div class="scroll_inside"></div>
</div>
</div>
</body>
</html>
网友评论