title: Control horizontal scroll with javascript
body: <p>I'm working on a project and I'm stranded and i decided to ask you for help</p>
  
  <p>I have 2 Divs</p>
  
  <p>1- Div that stores content with full width</p>
  
  <p>2- Div that simulates a scrollbar, which will make scrolling of the first Div</p>
  
  <p>below my project image
  <a href="https://prnt.sc/n1vyg5" rel="nofollow noreferrer">https://prnt.sc/n1vyg5</a></p>
  
  <p>100% functional example
  <a href="https://www.udacity.com/course/blockchain-developer-nanodegree--nd1309" rel="nofollow noreferrer">https://www.udacity.com/course/blockchain-developer-nanodegree--nd1309</a>
  in the session "Learn with the best"</p>
  
  <p>The structure is similar to this</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <pre><code>&lt;div class="page"&gt;
      &lt;div class="container"&gt;
      &lt;h3&gt;Container&lt;/h3&gt;
      &lt;/div&gt;
  
      &lt;ul class="hs"&gt;
      &lt;li class="item"&gt;test&lt;/li&gt;
      &lt;li class="item"&gt;test&lt;/li&gt;
      &lt;li class="item"&gt;test&lt;/li&gt;
      &lt;li class="item"&gt;test&lt;/li&gt;
      &lt;li class="item"&gt;test&lt;/li&gt;
      &lt;li class="item"&gt;test&lt;/li&gt;
      &lt;li class="item"&gt;test&lt;/li&gt;
      &lt;li class="item"&gt;test&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="scrollbar"&gt;
          &lt;div class="handle"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre><code>$('.handle').draggable({
      axis: 'x',
      containment: 'parent',
      drag: function (event, ui) {
      console.log(ui.position.left)
      }
  });
  </code></pre>
  
  <p>I do not know how to synchronize the drag of the '.handle' with the scrolling of the first div</p>