HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scrollIntoViewIfNeeded false</title>
  <style>
    body { font-family: sans-serif; margin: 1rem; }
    .panel { height: 160px; overflow-y: auto; border: 2px dashed #7c3aed; border-radius: 8px; padding: 0.5rem; }
    .item { height: 50px; margin-bottom: 6px; background: #ede9fe; border-radius: 4px; display: grid; place-items: center; }
    #target { background: #6d28d9; color: #fff; }
    button { margin: 0.5rem 0.5rem 0 0; padding: 0.5rem 1rem; cursor: pointer; }
  </style>
</head>
<body>
  <div class="panel" id="panel">
    <div class="item">A</div><div class="item">B</div><div class="item">C</div>
    <div class="item" id="target">Target</div>
    <div class="item">E</div><div class="item">F</div><div class="item">G</div>
  </div>
  <button type="button" id="center">center (true)</button>
  <button type="button" id="nearest">nearest (false)</button>
  <script>
    var target = document.getElementById("target");
    document.getElementById("center").addEventListener("click", function () {
      if (target.scrollIntoViewIfNeeded) target.scrollIntoViewIfNeeded(true);
    });
    document.getElementById("nearest").addEventListener("click", function () {
      if (target.scrollIntoViewIfNeeded) target.scrollIntoViewIfNeeded(false);
    });
    document.getElementById("panel").scrollTop = 0;
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Element.scrollIntoViewIfNeeded(false) — nearest edge (Try It)