javascript - 使用javascript控制水平滚动

Question

我正在做一个元素，但我陷入困境，我决定向你寻求帮助

我有 2 个 Div

1- 存储全宽内容的 Div

2- 模拟滚动条的 Div，这将使第一个 Div 滚动

在我的元素图片下方 https://prnt.sc/n1vyg5

100% 功能示例 https://www.udacity.com/course/blockchain-developer-nanodegree--nd1309 在“与最优秀的人一起学习” session 中

结构与此类似

.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的滚动同步

Answer 1

您必须对滚动条的宽度和滚动内容的宽度进行一些计算。然后决定滚动条左侧位置的百分比是多少，并将其传递给内容的滚动百分比。我对窗口加载进行了所有计算，以确保元素的大小是最终的:

$(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>