jquery 自定义滚动条

最新推荐文章于 2023-05-05 23:22:22 发布

每逢佳节掉三根.

最新推荐文章于 2023-05-05 23:22:22 发布

阅读量380

点赞数

分类专栏： javascript 文章标签： jquery 自定义滚动条

本文链接：https://blog.csdn.net/qq_42043377/article/details/80042320

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="keywords" content="我的梦想:暴富!">
<meta name"description" content="工匠精神的证明，隐藏在每一个值得被放大欣赏的细节中。">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 260px;
height: 300px;
border: 1px solid skyblue;
overflow: hidden;
position: relative;
padding-right: 10px;
margin: 100px auto;
 
 
}
.scrollBox{
width: 13px;
height: 100%;
border-left: 1px solid gray;
position: absolute;
right: 0;
top: 0px;
 
 
}
.scroll{
width: 10px;
background-color: pink;
position: absolute;
top: 0;
left: 1.5px;
cursor: pointer;
border-radius: 5px;
height: 20px;
}
.content{
position: absolute;
top: 0;
left: 0;
width: 260px;
color: #132658;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.js"></script>
<script src="https://cdn.bootcss.com/jquery-mousewheel/3.1.0/jquery.mousewheel.min.js"></script>
</head>
<body>
<div class="box" id="box">
<div class="scrollBox" id="scrollBox">
<div class="scroll ui-widge-content" id="scroll"></div>
</div>
<div class="content" id="content">孩儿励志出湘关，学不成名终不还。
埋骨何须桑梓地，人生无处不青山。
孩儿励志出湘关，学不成名终不还。
埋骨何须桑梓地，人生无处不青山。
孩儿励志出湘关，学不成名终不还。
埋骨何须桑梓地，人生无处不青山。
孩儿励志出湘关，学不成名终不还。
埋骨何须桑梓地，人生无处不青山。
孩儿励志出湘关，学不成名终不还。
埋骨何须桑梓地，人生无处不青山。
孩儿励志出湘关，学不成名终不还。
埋骨何须桑梓地，人生无处不青山。
孩儿励志出湘关，学不成名终不还。
埋骨何须桑梓地，人生无处不青山。
孩儿励志出湘关，学不成名终不还。
埋骨何须桑梓地，人生无处不青山。
孩儿励志出湘关，学不成名终不还。
埋骨何须桑梓地，人生无处不青山。
孩儿励志出湘关，学不成名终不还。
埋骨何须桑梓地，人生无处不青山。
孩儿励志出湘关，学不成名终不还。
埋骨何须桑梓地，人生无处不青山。
孩儿励志出湘关，学不成名终不还。
埋骨何须桑梓地，人生无处不青山。
孩儿励志出湘关，学不成名终不还。
埋骨何须桑梓地，人生无处不青山。
孩儿励志出湘关，学不成名终不还。
埋骨何须桑梓地，人生无处不青山。
孩儿励志出湘关，学不成名终不还。
埋骨何须桑梓地，人生无处不青山。
孩儿励志出湘关，学不成名终不还。
埋骨何须桑梓地，人生无处不青山。
孩儿励志出湘关，学不成名终不还。
埋骨何须桑梓地，人生无处不青山。
孩儿励志出湘关，学不成名终不还。
埋骨何须桑梓地，人生无处不青山。
孩儿励志出湘关，学不成名终不还。
埋骨何须桑梓地，人生无处不青山。
孩儿励志出湘关，学不成名终不还。
埋骨何须桑梓地，人生无处不青山。
孩儿励志出湘关，学不成名终不还。
埋骨何须桑梓地，人生无处不青山。
孩儿励志出湘关，学不成名终不还。
埋骨何须桑梓地，人生无处不青山。
</div>
</div>
<script type="text/javascript">
var rate=$('#box').outerHeight()/$('#content').outerHeight();
$('#scroll').css('height',$('#scrollBox').outerHeight()*rate+'px');
console.log($('#scrollBox').offset());
$('#scroll').draggable({
axis:'y',//约束在水平方向移动 y 垂直方向移动
containment:'parent',//在父元素中移动
grid:[1,1],//每次移动的长度
drag:function (event,ui) {
// 拖拽事件的回调
console.log(ui);
console.log(ui.position.top);
//输出的是p在父元素中的位置变化
$('#content').css('top',-(ui.position.top/rate)+'px');
 
 
}
// console.log(ui.position.left,ui.position.top);
});
var nowScrollTop = 0;
 
 
$('#box').mousewheel(function(event, delta, deltaX, deltaY) {
if (window.console && console.log) {
if (deltaY) {
var direction = deltaY > 0 ? 1 : -1;
}else{
var direction = evt.deltaY > 0 ? -1 : 1;
}
nowScrollTop+=-10*direction;
// console.log(direction);
// console.log(nowScrollTop);
if (nowScrollTop < 0) {
nowScrollTop = 0;
 
 
}else if (nowScrollTop > $('#scrollBox').outerHeight() - $('#scroll').outerHeight()) {
console.log(nowScrollTop);
 
 
nowScrollTop = $('#scrollBox').outerHeight() - $('#scroll').outerHeight();
}
 
$('#scroll').css('top',nowScrollTop + 'px');
$('#content').css('top',-(nowScrollTop/rate)+'px');
         // console.log(deltaY);d
         
     }
 });
 
 
</script>
</body>
</html>

效果图:

每逢佳节掉三根.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 自定义滚动条

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><meta name="keywords" content="我的梦想:暴富!"><meta name"description" c...
复制链接

扫一扫