Question

看看this page。

我的页面有一个较低的“浮动”固定位置div，它覆盖屏幕底部的某些部分，具有高z-index和一堆输入框。

问题在于当其中一个较低的输入框被聚焦时，通过按TAB，它们的内容被div部分隐藏。我想检测下方输入框何时聚焦，并将页面向下滚动“足够”以将它们带到可见的位置。

有干净的方法吗？

修改：my solution似乎无法使用浏览器缩放功能。例如，在缩放144％时尝试一下。关于如何解决的任何想法？

Answer 1

这是a solution by a friend of mine。

似乎可以跨浏览器正常运行。

选择时元素的边框仍然存在一个小的烦恼，并且部分放大的边框仍然隐藏。我总是可以在滚动中添加一个或多个像素，但我确信必须有一个更优雅的解决方案。

Answer 2

Ripper234的解决方案对我来说效果很好。以下解决方案适用于任何字段由其上方的元素（例如固定导航）覆盖而不是在其下方的人。

我还使用jQuery对其进行了动画处理，并添加了一个填充变量，如果您在要显示的字段上方有一个标签，或者想要将字段居中（仅将填充设置为屏幕高度的一半），则该变量非常有用。

var navHeight = 200;
var padding = 25;
$('input').on('focus', function() {
  try {
    var elemTop = $(this).offset().top;
    var maxVisible = $(document).scrollTop() + navHeight;
    if (elemTop < maxVisible) {
      $("html, body").animate({ scrollTop: elemTop - navHeight - padding }, 250);  
    } 
  } catch (e) {
    console.log("Error: " + e);
  }
});

Answer 3

如果在每个文本框上添加onfocus处理程序并验证它们的位置是否太靠近/远离“bottom-box”元素，那么该怎么办呢？这样你可以相应地改变这个div元素的位置（向下/向上移动）

Answer 4

我只想使用Z-index弹出固定div

上方的焦点输入

我认为没有任何常见的方法可以将屏幕向下移动，也许我错了..

也许你可以使用这样的页面内链接来实现它，因为它们旨在拉下屏幕，使用JQuery说“当这个输入是焦点时转到相应的锚点”

<a href="#box5"><input type="text" /></a>

Answer 5

element.scrollIntoView();

所有市长浏览器都支持

，即6-7-8-9-10 firefox，webkit

或：

element.focus(); element.blur();

如何在覆盖输入框聚焦时向下滚动页面？

5 个答案: