Как прокрутить секцию прокрутки html с помощью ползунка ввода и наоборот

Question

У меня есть раздел, который можно прокручивать на моей странице, и я хочу иметь возможность прокручивать раздел с помощью ползунка ввода. Если я перемещаю ползунок ввода, секция прокручивается, а также, если я прокручиваю прокручиваемую секцию, я хочу, чтобы прокрутка ползунка ввода прокручивалась.

Вот пример кода, где я создал прокручиваемую секцию и ползунок: codepen example

Я хочу получить этот результат, используя только ядро ​​javascript.

Я хочу получить текущее положение раздела прокрутки, а затем преобразовать его в процент и связать его к ползунку ввода. Значение входного ползунка колеблется от 0 до 100, поэтому я подумал, что это может быть достигнуто таким образом. Затем, когда мы перемещаем ползунок ввода, он соответствующим образом меняет положение прокрутки секции прокрутки. Окончательный результат должен состоять в том, что независимо от того, перемещаете ли вы ползунок или прокручиваете на самом участке прокрутки, они оба прокручиваются последовательно.

Answer 1

Это весь код, который я сделал. Он должен работать.

function something() {
  var test = document.getElementById("slideScroll").value;
  document.getElementById("scrollingSection").style.top = test + "px";
}
setInterval(something, 1)

.second-section {
  position: relative;
  padding-left: 20%;
  background: #d2d2d2;
}

.scrollslider {
  width: 100px;
  position: absolute;
  z-index: 9;
  left: 5%;
  top: 50%;
  transform: translateY(-50%)rotate(90deg);
}

.slider-scroll {
  -webkit-appearance: none;
  width: 100%;
  height: 1.5px;
  border-radius: 50%;
  background: #030303;
  outline: none;
  opacity: 0.95;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider-scroll:hover {
  opacity: 1;
}

.slider-scroll::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #a1a1a1;
  border: 1px solid #fff;
  cursor: pointer;
}

.slider-scroll::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #ffc800;
  border: 1px solid #fff;
  cursor: pointer;
}

.scrollable-section {
  overflow-y: auto;
  height: 100px;
}

#scrollingSection::-webkit-scrollbar {
  display: none;
}

#scrollingSection {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

<div class="first-section">
  <p>Lorem ipsum Loreum ipsum<br>Lorem ipsum Loreum ipsum<br></p>
</div>
<div class="second-section">
  <div class="scrollslider">
    <input type="range" min="1" max="100" class="slider-scroll" id="slideScroll">
  </div>
  <div class="scrollable-section" id="scrollingSection" style="position:absolute;top:30px">
    <div class="scrollable-section" id="scrollingSection">
      <div class="dummydiv">
        <p>lorem ipsum</p>
        <button>Button</button>
      </div>
      <div class="dummydiv">
        <p>lorem ipsum</p>
        <button>Button</button>
      </div>
      <div class="dummydiv">
        <p>lorem ipsum</p>
        <button>Button</button>
      </div>
      <div class="dummydiv">
        <p>lorem ipsum</p>
        <button>Button</button>
      </div>
      <div class="dummydiv">
        <p>lorem ipsum</p>
        <button>Button</button>
      </div>
      <div class="dummydiv">
        <p>lorem ipsum</p>
        <button>Button</button>
      </div>
      <div class="dummydiv">
        <p>lorem ipsum</p>
        <button>Button</button>
      </div>
      <div class="dummydiv">
        <p>lorem ipsum</p>
        <button>Button</button>
      </div>
      <div class="dummydiv">
        <p>lorem ipsum</p>
        <button>Button</button>
      </div>
    </div>
  </div>
  <div class="third-section">
    <p>Lorem ipsum<br>lorem ipsum</p>
  </div>

Часть JS в основном получает значение Slider и добавляет его к вершине: 10px; ценность. Когда вы тащите его вниз, он идет вниз. Когда вы перетаскиваете его, оно поднимается.