聚焦元素隐藏在固定菜单后面

Question

我的网站底部有一个菜单，我将其设置为固定位置。滚动时它仍然存在。

使用键盘选项卡导航网站时，如果焦点元素尚未在视口中，则会自动滚动到该元素。这里的问题是，当一个聚焦的元素被碾压时它没有显示，因为它位于底部固定菜单的后面。

任何关于如何解决这个问题的内容，以便窗口更多地滚动到焦点元素显示的位置。

谢谢

Answer 1

尝试使用滚动代码：

// lets say element is the DOM element you want to scroll into view
function scrollNow(element) {
   // create a dummy element X pixels above 'element' 
   // where X is the height of your bottom menu
   // if X is not known in advance, calculate it using $('#menu').outerHeight()
   var dummy = $('<div></div>').css({
      position: 'absolute', top: $(element).offset().top - X 
   }).appendTo('body');
   dummy[0].scrollIntoView();
   dummy.remove(); // remove the dummy element
}