Управление горизонтальной прокруткой с помощью JavaScript - PullRequest
Новая
       8

Управление горизонтальной прокруткой с помощью JavaScript

1 голос
/ 23 марта 2019

Я работаю над проектом, и я застрял, и я решил попросить вас о помощи

У меня есть 2 Div

1 - Div, который хранит контент с полной шириной

2 - Div, имитирующий полосу прокрутки, которая будет выполнять прокрутку первого Div

под изображением моего проекта https://prnt.sc/n1vyg5

100% функциональный пример https://www.udacity.com/course/blockchain-developer-nanodegree--nd1309 inсеанс «Учись у лучших»

Структура похожа на эту 

.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

1 Ответ

0 голосов
/ 23 марта 2019

Необходимо выполнить некоторые вычисления ширины полосы прокрутки и ширины прокручиваемого содержимого. Затем определите, сколько процентов составляет левая позиция полосы прокрутки, и передайте ее проценту прокрутки содержимого. Я сделал все вычисления для загрузки окна, чтобы убедиться, что размер элементов является окончательным: 

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