在按 Tab 键时，由于固定的底部页脚，页面不会向上滚动

Posted

技术标签:

【中文标题】在按 Tab 键时，由于固定的底部页脚，页面不会向上滚动【英文标题】：On pressing tab key the page does not scroll up due to fixed bottom footer 【发布时间】：2017-12-21 18:35:35 【问题描述】：

我在网页中有一个很长的表单。底部有一个带有 z-index:999 的固定页脚。当我按下制表符并从一个字段移动到另一个字段时，页面底部的焦点会转到隐藏在页脚后面的字段上。对于这些字段，页面不会向上滚动。一旦焦点低于这些字段，页面就会向上滚动（按逻辑）。但是当焦点位于固定页脚后面的字段时，有没有办法向上滚动页面？The issue is demonstrated in the image.

.footer 
background: none repeat scroll 0 0 #f5f5f5;
border-top: 1px solid #e5e5e5;
bottom: 0;
height: 45px;
left: 0% !important;
line-height: 40px;
position: fixed;
right: 0;
text-align: center;
width: 100% !important;
z-index: 999;

更新了 JSFiddle 中的字段名称以便更好地理解：https://jsfiddle.net/2hgo3zo1/3/

我已更新 jsfiddle，以便字段标签不同。一旦我打开小提琴，焦点就在电子邮件地址字段上，密码 1 文本框在我的屏幕上可见。复制我的问题的步骤：

    关注电子邮件地址字段。我开始按 Tab。 当我到达密码 1 文本框时，我再次按 Tab。 焦点在电子邮件地址 2 的文本框上。但文本框不可见。 现在输入“abc”（不按 Tab） 再次按 Tab 键，密码 2 文本框处于焦点位置，现在页面自行向上滚动。 请注意，虽然文本框不可见，但电子邮件地址 2 字段的文本为 abc。 现在我想要的是当焦点位于电子邮件地址 2 的文本框时页面滚动（这不会自动向上滚动，因为在页面高度中不考虑固定页脚。）

【问题讨论】：

请输入代码.... @Vishnu 添加了 CSS。 请在sn-p或jsfiddle.net添加html和css代码，否则我们找不到问题 @Vishnu - 添加了 JSFiddle。 【参考方案1】： 

$(document).ready(function()
	
	$("input").keydown(function (e) 
   if (e.which == 9)
    var center = $(window).height()/2;
    var top = $(this).offset().top ;
    if (top > center)
        $(window).scrollTop(top-center);
		
	);
	);
.footer 
background: none repeat scroll 0 0 #f5f5f5;
border-top: 1px solid #e5e5e5;
bottom: 0;
height: 45px;
left: 0% !important;
line-height: 40px;
position: fixed;
right: 0;
text-align: center;
width: 100% !important;
z-index: 999;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div>
  <nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid">
      <div class="navbar-header">
        <a href="#">Brand</a>
      </div>
      <div>
        <ul class="nav navbar-nav">
          <li class="active">
          	<a href="#">Home</a>
          </li>
        </ul>
      </div>
	</div>
	</nav>
  <div>
    <div class="container" style="padding-top: 80px; padding-bottom: 50px;">
      <form role="form">
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input autofocus="" type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address 1</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password 1</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address 2</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password 2</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address 3</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password 3</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address 4</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password 4</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail2">Email address 5</label>
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword2">Password 5</label>
          <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputFile">File input</label>
          <input type="file" id="exampleInputFile">
          <p class="help-block">Example block-level help text here.</p>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox"> Check me out
          </label>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
  </div>
   <div class="footer">
    Fixed footer
   </div>

【讨论】：

请用jquery试试，我在***上找到了 感谢@ChanderShekhar，这行得通，但在某种程度上。在全屏形式下，页面不必要地向上滚动页面后半部分的字段。尽管这些字段已经可见。【参考方案2】：

经过几天的搜索，并使用@ChanderShekhar 发布的 jQuery，下面给出了最适合我的最终脚本块：

<script type="text/javascript">
 jQuery(document).ready(function()
  jQuery('input, button, a, textarea, span').focus(function () 
    var footerHeight = 120; //footerHeight = footer height + element height + buffer
    var element = jQuery(this);
    if (element.offset().top - (jQuery(window).scrollTop()) > 
         (jQuery(window).height() - footerHeight)) 
        jQuery('html, body').animate(
            scrollTop: element.offset().top - (jQuery(window).height() - footerHeight)
        , 500);
     
  );
);
</script>

【讨论】：

【参考方案3】：

请尝试 padding-bottom: 45px;在正文标签中

【讨论】：

padding-bottom 已经存在。当页面滚动到底部时有效。但是页面还没有到底部。【参考方案4】：

@Izafa 检查这个答案，在你的小提琴中我找不到像 scrnshot 这样的问题。无论如何，您可以尝试将顶部和页脚 div 放在不同的类中：

.topDiv 
  padding-bottom: 40px;

.footer 
background: none repeat scroll 0 0 #f5f5f5;
border-top: 1px solid #e5e5e5;
bottom: 0;
height: 45px;
left: 0% !important;
line-height: 40px;
position: fixed;
right: 0;
text-align: center;
width: 100% !important;
z-index: 999;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="topDiv">
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="container-fluid">
      <div class="navbar-header">
        <a href="#">Brand</a>
      </div>
      <div>
        <ul class="nav navbar-nav">
          <li class="active">
          	<a href="#">Home</a>
          </li>
        </ul>
      </div>
	</div>
	</nav>
  <div>
    <div class="container" style="padding-top: 80px; padding-bottom: 50px;">
      <form role="form">
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input autofocus="" type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail2">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword2">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputFile">File input</label>
          <input type="file" id="exampleInputFile">
          <p class="help-block">Example block-level help text here.</p>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox"> Check me out
          </label>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div>
  </div>
  
</div>

 <div class="footer">
    Fixed footer
   </div>

【讨论】：

请参阅上面编辑的答案以了解了解我的要求的步骤。【参考方案5】：

将此脚本添加到您的脚本文件中，这将为您提供更可靠和准确的解决方案，谢谢，并评价我的解决方案。

$('input').focus(function() 
var ele = $(this);
$('html, body').animate(
    scrollTop: ele.offset().top - 80
, 800);

);

【讨论】：

【参考方案6】：

我实际上使用了提供的answer，但对其进行了一些更改。

我使用的是引导选择，这需要我更改事件处理程序，但更重要的是，我不喜欢用户单击页面上较高的字段时向上滚动引起的用户体验。

当您尝试通过滚动将字段强制到视图中的特定位置时，这会导致您在选项卡/单击字段时出现尴尬的来回运动。通常，该位置是基于 footerHeight 的页面底部，因此返回更高的字段将其放回底部。

如果他们使用固有的浏览器定位选项卡到视线之外的东西，这个选项会向上滚动，这对我来说很好。

if ($('div.activate-auto-scroll').length) 
    $(document).on('focus', 'input, button, a, textarea, span, select', function () 
        var footerHeight = 300; //footerHeight = footer height + element height + buffer
        var element = $(this);
        var formPosition = element.offset().top;
        var viewableArea = $(window).height() - footerHeight;
        var screenPosition = this.getBoundingClientRect().top;
        var scrollDestination = formPosition - viewableArea;

        if (formPosition > viewableArea && screenPosition > formPosition - scrollDestination)   // second conditional stops it from scrolling up and causing the page to force fields to the bottom
            $('html, body').animate(
                scrollTop: scrollDestination
            , 500);
        
    );

【讨论】：

以上是关于在按 Tab 键时，由于固定的底部页脚，页面不会向上滚动的主要内容，如果未能解决你的问题，请参考以下文章

页脚始终位于底部但不固定

如何将页脚固定在页面底部

将页脚固定到页面底部

如何将页脚固定在页面底部

将页脚放置在具有固定页眉的页面底部

页脚总是在底部不显示：固定