聚焦元素被固定菜单遮挡了。

Question

我有一个站点，在底部有一个菜单，我将其设置为 position: fixed。当滚动时，它仍然保持不变。

当使用键盘 tab 键导航网站时，如果焦点元素不在视口中，它会自动滚动到该位置。问题是，当一个焦点元素滚动到后面的固定菜单时，它不会显示出来。

你有什么解决方法，使窗口滚动得更多，以便焦点元素显示出来？

谢谢。

- badtant

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
}

- techfoobar

---

很酷，看起来很有前途。现在，我该如何捕获应运行此代码的事件？只有当通过制表符聚焦到元素时，才应触发此操作。 - badtant

为此，您应该在“onblur”上调用此函数，即$（'.x'）.blur（function（）{scrollNow(this); }）; - 根据需要替换.x - techfoobar

不错。但是我想做的Tab键检查怎么办？我不想在每个焦点事件上运行它，只想在通过Tab键获得焦点时运行。通过单击获得焦点不应该运行scrollNow()。 - badtant

如果没有特殊的方法，很难找到元素获得焦点的方式。此外，我认为如果元素已经可见，scrollIntoView() 方法将不起作用。 - techfoobar

scrollIntoView 似乎总是尽可能向上滚动元素（至少在 FF 中）。因此，它现在也会在单击时滚动，这并不是预期的行为。 - badtant