固定位置Div可防止焦點在其元素之間移動時滾動

Question

我在div內有兩個文本框，需要固定其位置。 問題是當我在第一個文本框上時，如果我跳到第二個文本框，則由於div的position屬性固定，頁面不會向下滾動到第二個文本框。 有什么辦法可以保持div的固定位置，但仍然向下滾動到具有焦點的元素？

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

有關完整代碼，請參見我的小提琴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>

請參閱更新的提琴： https ： //jsfiddle.net/sablefoste/s0jmzph0/