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

Question

I have two text boxes inside of a div that needs to have its position fixed. Problem is when I am on the first text box and if I tab to the second one, the page does not scroll down to the second because of the fixed position attribute of the div. Is there any way I can keep the fixed position of the div but still scroll down to the element which has focus?

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

For the full code please see my fiddle https://jsfiddle.net/43dLktss/1/

I am thinking maybe jQuery animate on the focus event handler of the text boxes?

Answer 1

No additional javascript/jQuery necessary. Add an inner div , with relative position, height:100%; and 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>

See the updated fiddle: https://jsfiddle.net/sablefoste/s0jmzph0/