Как указано в заголовке. Когда вы начинаете вкладку, он не учитывает тот факт, что в нижней части экрана есть наложение навигации. Таким образом, определенные ссылки и кнопки, скрытые за оверлеем, будут перенесены на вкладки, но не будут видны пользователю.
Есть ли способ переопределить эту функцию и принудительно отображать элементы с вкладками?
Я нашел две вещи:
DocumentOrShadowRoot.activeElement это один из способов, которым мы могли бы захватить текущую кнопку или ссылку.
Element.scrollIntoView() так мы перемещаем сфокусированный элемент в центр области просмотра.
Попытка перехватить tab и т. д. и самостоятельно отрегулировать положение прокрутки - это одна из возможностей, как вы заявили, но это потенциально может привести к неожиданному поведению.
Лучший способ справиться с этим — настроить макет с учетом наложения внизу.
По сути, весь ваш основной контент будет находиться в контейнере (это может быть элемент <main>
, если ваше наложение внизу представляет собой <aside>
, в противном случае просто используйте <div>
).
Сделайте этот контейнер высотой страницы за вычетом высоты наложения.
Таким образом, за оверлеем никогда не будет никакого контента (который технически больше не является оверлеем, поскольку за ним ничего не скрывается).
Прелесть этого в том, что когда вы доберетесь до самого низа страницы, все будет видно, с наложением вы можете получить что-то частично скрытое, если вы не дадите ему достаточно полей / отступов внизу.
Я согласен, и это все еще прорабатывается, так что, возможно, это будет решение, которое примет команда дизайнеров.
Можете ли вы разместить свой код здесь? codepen.io/stephanmax/pen/daswq или здесь? codepen.io/gsarig/pen/GWgNdx Или исполняемый фрагмент, подобный этому stackoverflow.com/questions/61205581/…