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/

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

1 个答案: