HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery .scrollLeft setter</title>

  <style>

    div.demo {

      background: #ccc;

      border: 3px solid #666;

      margin: 5px;

      padding: 5px;

      width: 200px;

      height: 100px;

      overflow: auto;

    }

    p.inner {

      margin: 10px;

      padding: 5px;

      border: 2px solid #666;

      width: 1000px;

      height: 1000px;

      background: #f8fafc;

    }

    .hint { color: #64748b; font-size: 14px; margin-top: 8px; }

  </style>

</head>

<body>

  <div class="demo">

    <p class="inner">Hello — wide content (scrollLeft set to 300px on load)</p>

  </div>

  <p class="hint">The box scrolls 300px to the right immediately.</p>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <script>

    $("div.demo").scrollLeft(300);

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .scrollLeft(300) — setter (Try It)