html - Control horizontal scroll with javascript - Stack Overflow

admin管理员组

文章数量:1392002

I'm working on a project and I'm stranded and i decided to ask you for help

I have 2 Divs

1- Div that stores content with full width

2- Div that simulates a scrollbar, which will make scrolling of the first Div

below my project image

100% functional example in the session "Learn with the best"

The structure is similar to this

.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)
    }
});

I do not know how to synchronize the drag of the '.handle' with the scrolling of the first div

I'm working on a project and I'm stranded and i decided to ask you for help

I have 2 Divs

1- Div that stores content with full width

2- Div that simulates a scrollbar, which will make scrolling of the first Div

below my project image https://prnt.sc/n1vyg5

100% functional example https://www.udacity./course/blockchain-developer-nanodegree--nd1309 in the session "Learn with the best"

The structure is similar to this

.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)
    }
});

I do not know how to synchronize the drag of the '.handle' with the scrolling of the first div

• javascript
• html
• css
• scroll
• scrollbar

Share Improve this question Follow edited Mar 23, 2019 at 15:56 Isaac Gomes 43011 gold badge66 silver badges1616 bronze badges asked Mar 23, 2019 at 15:21 Yung SilvaYung Silva 1,53044 gold badges2525 silver badges4040 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

You have to do some calculation on the width of scrollbar and the width of scrolling content. Then decide how much is the percentage of the left position of scrollbar and pass it to the scroll percentage of content. I made all calcuations on window load to make sure that the size of elements are final:

$(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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery./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>

本文标签： htmlControl horizontal scroll with javascriptStack Overflow