javascript - 固定位置 Div 防止焦点在其元素之间移动时滚动

Question

我在一个 div 中有两个文本框需要固定其位置。问题是当我在第一个文本框上时，如果我切换到第二个文本框，由于 div 的固定位置属性，页面不会向下滚动到第二个。有什么方法可以保持 div 的固定位置但仍然向下滚动到具有焦点的元素？

<div style="width:100%;height:100%;position:fixed;">
<input id="FirstName"> Lots of padding goes here
<input id="LastName">
 </div>

完整代码请看我的fiddle https://jsfiddle.net/43dLktss/1/

我在想也许 jQuery 在文本框的焦点事件处理程序上设置动画？

Answer 1

无需额外的 javascript/jQuery。添加一个内部 div，相对位置 height:100%; 和 overflow:scroll;

<div style="width:100%;height:100%;position:fixed;">
  <div style="height:100%;position:relative;overflow:scroll;">
    <input id="FirstName"> lots of padding here<input id="LastName">
  </div>
</div>

查看更新的 fiddle :https://jsfiddle.net/sablefoste/s0jmzph0/