Как зафиксировать фокус на прокручиваемом элементе?
Есть элемент, в котором контент по высоте больше высоты родителя, как итог появляется вертикальный скролл.
Далее проблема:
При прокрутке до конца внутри родителя фокус передается на следующего родителя(ну т.е. родителя родителя), в данном случае, например, это сама страница - и продолжается скролл уже страницы. По сути задача состоит в том, чтобы не передавать фокус "по каскаду", а зафиксировать внутри того элемента, который сейчас получает hover.
Средствами css реально это? А если не css, то может js?
Ну поняли верно, судя по предложенному варианту)) жаль только, что поддержка у этого свойства прям совсем печалит, а проблема по сути на реальном примере такова:
Есть сайт, у которого имеется "липкое меню", т.е. которое прилипает к верху и сохраняет положение при скролле. У этого меню, есть еще 2 уровня вложенности с большим кол-вом элементов. Суммарная высота, занимаемая раскрывающимся меню превышает размеры родителя, и чтобы можно было посмотреть все элементы меню, родителю добавляется скролл. Так вот когда юзвер прокручивает это меню до конца, то фокус с него перелетает на саму страницу и прокручивает ее.
Эффект конечно не смертелен, но немного напрягает когда ты меню открываешь находясь в одной области страницы, пролистываешь его до конца и свернув видишь, что страница сместилась:) Странно, что браузеры имея возможность отслеживать событие наведения, не реализовали возможность подобной блокировки внутри контейнера.
Простой
