Как прокрутить активный элемент DIV средствами JS внутри DIV с owerflow: auto?

Question

[MFNIK]

Добрый день Тостеровцы!
Прошу совета, какие инструменты можно применить к данной задачи?
Есть меню с 5 элементами, появилось необходимость добавить еще несколько, но из за особенностей верстки, нужно придумать как их разместить что бы было понятно пользователю.
Так же есть элементы переключения между страницами (типо пангинации), только предыдущая страница и следующая.
Задумка такая, что при добавлении элементов в меню, добавлялся скролл, и при переключении страниц, например на следующую, активный элемент меню, так же прокручивался в видимую часть меню, и наоборот убирался, если пользователь вернулся назад.
Вот пен для примера!

Какие инструменты (функции) JS для этого использовать? Или может у кого то есть похожий пример?

Answer 1

[origami1024]

Можно использовать св-ва элементов - scrollLeft и scrollTop, например

https://codepen.io/origami1024/pen/VRaxKq

Comments

[MFNIK]

Имеется ввиду что при нажатии на следующий или предыдущий пункт, будет перезагрузка страницы.

[Варлам Ерофеич]

В песочницу закралась лишняя левая угловая скобка:
<li><a href=""><Предыдущий пункт меню</a></li>
Надо её убрать, чтобы было так:
<li><a href="">Предыдущий пункт меню</a></li>

[origami1024]

Варлам Ерофеич, ок

[origami1024]

MFNIK, но там будет ссылка на одну из других страниц, не на ту же? Это уже надо на стороне сервера тогда

[MFNIK]

Варлам Ерофеич, это было так задумано, направление в какую сторону матать)

[MFNIK]

origami1024, В принципе я думаю что можно какой то класс повесить .scroll-left , если данный пункт активный, и подвинуть его в сторону. Тогда при каждой перезагрузке JS проверит активный ли пункт, если да, то двигает его по указанным координатам влево (т.к. меню будет скрываться в правый бок) и наоборот.
Но честно я думаю это какой то велосипед.
Щас думаю на стороне сервера как сделать, типо если элемент активе, то пропускаем вывод с начала, по идее какая разница что 1 пунка не будет, зато будет последний. и т.д. в таком порядке. Но пока что то тяжело сотворить)

[origami1024]

можно скролить просто на загрузке страницы - 35px умножить на номер элемента в списке по порядку

[Варлам Ерофеич]

MFNIK, В таких случаях ставят их html-аналоги < > (как у меня, иначе будет ошибка):

[MFNIK]

Варлам Ерофеич, да это для примера просто)) особо в детали не вдавался

[MFNIK]

origami1024, ну а ну да, просто если активный пункт изначально будет в видимой части, то его еще подвинет)))
просто каждый 6 элемент двигать на определенное количество px для отображения его в видимой части.
Да это наверное правильный вариант, тк. на сервере еще сложнее все реализовать(((
Спасибо большое, лайк!!