jQuery Сделать Div прокрутить вертикально с полосой прокрутки

Question

У меня есть боковое меню, которое я установил, чтобы иметь положение как липкое. Рядом с ним есть div, который я хочу go вверх и вниз вместе с полосой прокрутки. При перемещении полосы прокрутки она должна перемещаться в соответствии с высотой (по вертикали).

Пример этой функции прокрутки можно найти на веб-сайте dropbox.com в разделе «Хранение и обмен файлами».

Это мой стартовый код. Я считаю, что этого можно добиться с помощью преобразований Javascript и Css, но мне не удалось найти ресурсы в inte rnet.

. Любая помощь будет высоко оценена.

https://codepen.io/zestweb/pen/BayexWa

<div class='container'>
  <div class="nav">
    <p>Nav Item</p>
    <p>Nav Item</p>
    <p>Nav Item</p>
    <p>Nav Item</p>
    <p>Nav Item</p>
    <p>Nav Item</p>
    <p>Nav Item</p>
    <p>Nav Item</p>
    <p>Nav Item</p>
    <p>Nav Item</p>
    <p>Nav Item</p>
    <p>Nav Item</p>
    <p>Nav Item</p>
    <p>Nav Item</p>
    <p>Nav Item</p>
    <p>Nav Item</p>
  </div>

  <div class="scrollbar-container">
            <div id="custom-scrollbar"></div>
  </div>
</div>

*{
  margin: 0;
  padding: 0;
}
.container {
  width: 800px;
  margin: auto;
  max-width: 100%;
  position: relative;
  height: 3000px;
}

.nav {
  background: blue;
  color: #FFF;
  position: fixed;
  top: 0;
  width: 100%;
}
.scrollbar-container {
    position: absolute;
    left: 0px;
    top: 100px;
    margin-left: -20px;
    z-index: 50;
}
#custom-scrollbar {
    width: 2px;
    height: 95px;
    background: #ff8256;
    z-index: 1000;
    webkit-transform-origin: top;
  transform-origin: top;
  border-radius: 1px;
}

Answer 1

Попробуйте следующий jquery код

function scrollMenu(){

  document.getElementById('menu').scrollIntoView({
      block: "end", behavior: "smooth"
  });
}

#menu {
  height: 500px;
  background-color:gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
<button onClick=scrollMenu()>Scroll</button>
</div>

Чтобы увидеть поведение scrollIntoView , вы можете посетить следующий URL: https://developer.mozilla.org/es/docs/Web/API/Element/scrollIntoView