Прокручивать до активного элемента?

Question

[Jesse Pinkman]

https://jsfiddle.net/e5c2trLb/
Есть такая навигация по списку (фокус на инпут и нажимать стрелку вниз/вверх)

Каким образом можно прокручивать к выбранному элементу ?

Answer 1

[Stalker_RED]

1. У активного элемента вызываете getBoundingClientRect(), получаете все размеры, включая высоту блока и расстояние до верха родительского контейнера.

2. Вычисляете на сколько нужно прокрутить (например: высота до верха + высота элемента + 10px запаса снизу).

3. Родителю делаете scroll(), при желании можете добавить ему behavior: 'smooth'

Comments

[Jesse Pinkman]

Илья , Stalker_RED - не знаю почему, но getBoundingClientRect() и scrollIntoView() вызывают ошибку

Uncaught TypeError: $this.scrollIntoView is not a function

возможно это из-за jq ?

[Jesse Pinkman]

Илья , Stalker_RED - спасибо!
Все такие в jq была проблема, нашел такое решение на SO: ..[0];

var hiddenElement = $this[0];
hiddenElement.scrollIntoView({block: "center", behavior: "smooth"});

[Stalker_RED]

Jesse Pinkman, это ванильные методы, а не jq.

this.scrollIntoView()
или this.getBoundingClientRect()

[Stalker_RED]

Jesse Pinkman, если ваш $this это $(this), то вместо $this[0] можно использовать просто this, и не дергать лишний раз jQuery.

Answer 2

[Илья Рупасов]

Element.scrollIntoView();