固定位置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> 

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