我正在做一个项目,我陷入困境,我决定向你寻求帮助
我有2个Div
1- Div以全宽度存储内容
2- Div模拟滚动条,它将滚动第一个Div
在我的项目图像下面https://prnt.sc/n1vyg5
100%功能范例https://www.udacity.com/course/blockchain-developer-nanodegree--nd1309在会议中“与最好的学习”
结构与此类似
.page {
overflow: hidden;
}
.container {
width: 60%;
margin: auto;
}
h3 {
background: #dbd0bc;
color: #000;
padding: 1rem;
}
.hs {
list-style: none;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
width: 100%;
padding: 0 20% 2rem 20%;
}
.hs .item {
display: inline-block;
width: 17rem;
background: #dbd0bc;
text-align: center;
margin-right: 0.75rem;
height: 10rem;
white-space: normal;
}
.scrollbar {
width: 100%;
background: #bcc9d4;
height: 0.2rem;
position: relative;
margin: 3rem 0 3rem 0;
border-radius: 2rem;
height: 0.2rem;
}
.handle {
position: absolute;
width: 30%;
height: 0.7rem;
background: purple;
cursor: pointer;
cursor: -webkit-grab;
top: 50%;
transform: translateY(-50%);
border-radius: 2rem;
top: 1px !important;
}
<div class="page">
<div class="container">
<h3>Container</h3>
</div>
<ul class="hs">
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
</ul>
<div class="container">
<div class="row">
<div class="scrollbar">
<div class="handle"></div>
</div>
</div>
</div>
</div>
$('.handle').draggable({
axis: 'x',
containment: 'parent',
drag: function (event, ui) {
console.log(ui.position.left)
}
});
我不知道如何将'.handle'的拖动与第一个div的滚动同步
您必须对滚动条的宽度和滚动内容的宽度进行一些计算。然后决定滚动条左侧位置的百分比,并将其传递给内容的滚动百分比。我对窗口加载进行了所有计算,以确保元素的大小是最终的:
$(window).on("load",function(){
var scrollbarWidth=$(".scrollbar").width();
var handleWidth=$(".handle").width();
var remaining=scrollbarWidth-handleWidth;
var hsWidth=$("ul.hs")[0].scrollWidth- $("ul.hs")[0].clientWidth;
var percent;
$('.handle').draggable({
axis: 'x',
containment: 'parent',
drag: function (event, ui) {
percent=(ui.position.left/remaining);
$("ul.hs").scrollLeft(percent*hsWidth);
}
});
})
.page {
overflow: hidden;
}
.container {
width: 60%;
margin: auto;
}
h3 {
background: #dbd0bc;
color: #000;
padding: 1rem;
}
.hs {
list-style: none;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
width: 100%;
padding: 0 20% 2rem 20%;
}
.hs .item {
display: inline-block;
width: 17rem;
background: #dbd0bc;
text-align: center;
margin-right: 0.75rem;
height: 10rem;
white-space: normal;
}
.scrollbar {
width: 100%;
background: #bcc9d4;
height: 0.2rem;
position: relative;
margin: 3rem 0 3rem 0;
border-radius: 2rem;
height: 0.2rem;
}
.handle {
position: absolute;
width: 30%;
height: 0.7rem;
background: purple;
cursor: pointer;
cursor: -webkit-grab;
top: 50%;
transform: translateY(-50%);
border-radius: 2rem;
top: 1px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<div class="page">
<div class="container">
<h3>Container</h3>
</div>
<ul class="hs">
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
</ul>
<div class="container">
<div class="row">
<div class="scrollbar">
<div class="handle"></div>
</div>
</div>
</div>
</div>