JSFiddle - React, Tailwind, and code Playground

by der_robert

HTML

<div id="main">
  <div id="scroller">
    X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>
  </div>
</div>

  <button onclick="iw_scroll('#scroller', 400, false, false);">X px nach unten von der aktuellen Position</button><br>
  <button onclick="iw_scroll('#scroller', 500, true, false);">X px nach oben von der aktuellen Position</button><br>
  <button onclick="iw_scroll('#scroller', 600, false, true);">X px nach unten immer von ganz oben</button>

CSS

#main {
  display: flex;
}

#scroller {
  flex: 1;
  overflow: auto;
  border: 1px solid #ccc; /* Optional: Fügt einen Rahmen hinzu */
  padding: 10px; /* Optional: Fügt Innenabstand hinzu */
  max-height: 300px; /* Optional: Begrenzt die maximale Höhe der inneren Divs */
}

JavaScript

function iw_scroll(divId, pixels, scrollUp = false, scrollToTop = false) {
  var innerDiv = document.querySelector(divId);
  var currentScrollTop = innerDiv.scrollTop;
  var targetScrollTop = scrollToTop ? pixels : (scrollUp ? currentScrollTop - pixels : currentScrollTop + pixels);
  var animationDuration = 500; // Anpassen der Animationsdauer nach Bedarf (in Millisekunden)
  var startTime = null;

  function animateScroll(timestamp) {
    if (!startTime) startTime = timestamp;
    var timeElapsed = timestamp - startTime;

    innerDiv.scrollTop = easeInOutQuad(timeElapsed, currentScrollTop, targetScrollTop - currentScrollTop, animationDuration);

    if (timeElapsed < animationDuration) {
      requestAnimationFrame(animateScroll);
    }
  }

  requestAnimationFrame(animateScroll);
}

function easeInOutQuad(currentTime, startValue, changeInValue, duration) {
  currentTime /= duration / 2;
  if (currentTime < 1) {
    return changeInValue / 2 * currentTime * currentTime + startValue;
  }
  currentTime--;
  return -changeInValue / 2 * (currentTime * (currentTime - 2) - 1) + startValue;
}