HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scrollBy() — horizontal</title>
  <style>
    #gallery { display: flex; gap: 16px; overflow-x: auto; width: 280px; border: 1px solid #ccc; padding: 8px; }
    .card { min-width: 120px; height: 80px; background: #dde; display: flex; align-items: center; justify-content: center; }
  </style>
</head>
<body>
  <button type="button" id="rightBtn">Scroll gallery right</button>
  <div id="gallery">
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
    <div class="card">4</div>
    <div class="card">5</div>
  </div>
  <script>
    document.getElementById("rightBtn").onclick = function () {
      document.getElementById("gallery").scrollBy({ left: 130, behavior: "smooth" });
    };
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

JavaScript scrollBy() — horizontal gallery (Try It)