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