DIV автопрокрутка

Question

У меня есть div, в котором много предметов. Я выбираю эти элементы динамически, нажимая кнопку, в моем случае переполнение происходит автоматически. То, что я хочу, это когда элемент, который не виден, выбран для прокрутки div, чтобы он мог быть видимым. Как я могу это сделать?

Answer 1

Вы можете использовать свойство scrollTop объекта HTMLElement, чтобы установить количество, на которое его содержимое прокручивается.

И вы можете получить сумму, которую вам нужно прокрутить, из offsetTop элемента, к которому вы хотите прокрутить.

Например, с этим HTML:

<div id="container">
  <p id="item-1">foo</p>
  <p id="item-2">bar</p>
  <p id="item-3">baz</p>
</div>

Вы можете использовать этот JavaScript для прокрутки контейнера div до третьего абзаца:

document.getElementById("container").scrollTop = document.getElementById("item-3").offsetTop;

Answer 2

Еще одним вариантом является использование jQuery вместе с плагином ScrollTo .

Answer 3

Когда нажата ваша кнопка и выбранный элемент вызывает метод focus () этого выбранного элемента. это приведет к автоматической прокрутке вашего элемента:

<div style="height:80px; overflow:auto;">
    <input type="text" id="id1"><br><br>
    <input type="text" id="id2"><br><br>
    <input type="text" id="id3"><br><br>
    <input type="text" id="id4"><br><br>
    <input type="text" id="id5"><br><br>
    <input type="text" id="id6"><br><br>
</div>
<input type="button" onclick="document.getElementById('id6').focus();">  

Answer 4

Еще один вариант ... якоря.

Присвойте каждому элементу уникальный идентификатор, а когда вы хотите перейти к определенному элементу, выполните следующий код JavaScript:

location.hash = itemID;

... где itemID - это переменная, содержащая идентификатор элемента, на который вы хотите перейти.

Steve

Answer 5

Вы также можете использовать свойство scrollTop или scrollLeft в DIV (в зависимости от того, горизонтальный или вертикальный свиток).

Я делал это раньше и использовал событие setTimeout для плавной прокрутки, а не в 1 движении. Это без JQuery, хотя.