HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>list focus</title>
  <style>
    body { font-family: sans-serif; margin: 1rem; }
    ul { height: 140px; overflow-y: auto; border: 1px solid #cbd5e1; border-radius: 8px; padding: 0; list-style: none; margin: 0; }
    li { padding: 0.6rem 0.75rem; border-bottom: 1px solid #e2e8f0; cursor: pointer; }
    li.selected { background: #dbeafe; font-weight: bold; }
  </style>
</head>
<body>
  <ul id="list">
    <li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li>
    <li>Item 5</li><li>Item 6</li><li>Item 7</li><li>Item 8</li>
    <li>Item 9</li><li>Item 10</li>
  </ul>
  <p>Click any item to select and scroll if needed.</p>
  <script>
    function selectItem(row) {
      document.querySelectorAll("#list li").forEach(function (li) { li.classList.remove("selected"); });
      row.classList.add("selected");
      if (typeof row.scrollIntoViewIfNeeded === "function") {
        row.scrollIntoViewIfNeeded(false);
      } else {
        row.scrollIntoView({ block: "nearest" });
      }
    }
    document.querySelectorAll("#list li").forEach(function (li) {
      li.addEventListener("click", function () { selectItem(li); });
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Element.scrollIntoViewIfNeeded — list item focus (Try It)