浏览器自动滚动通过表单元素跳转

Question

当选项卡低于视口底部的表单字段（或键入与底部重叠的文本区域）时，浏览器通常会自动向上滚动，以便您可以看到字段。有没有办法设置浏览器移动的位置？

这是一个问题，因为我在页面底部有一个固定的位置栏，所以它覆盖了浏览器滚动到的位置，并希望它进一步向上滚动。

干杯

Answer 1

当然，你可以一个焦点事件处理程序添加到您的输入，并检查他们的位置的onfocus。如果它太接近底部，只需将窗口滚动一下，直到可以接受为止。

下面是你如何能做到这一点jQuery中：

// Constant amount of padding an element should be from the bottom of the window 
var padding = 50; 

// Add focus event to all your different form elements 
$("input, textarea, select").focus(function(){ 

    // Check their position relative to the window's scroll 
    var elementBottom = $(this).offset().top + $(this).height(); 
    var windowScroll = $(window).scrollTop(); 
    var windowBottom = windowScroll + $(window).height(); 

    if(elementBottom + padding > windowBottom){ 
     $(window).scrollTop(windowScroll + padding); 
    } 

}); 

你可以看到它in action here。

编辑：打字在textarea的

您可以捕捉并检查使用keydown event处理程序编写过程中textarea的位置：

$('textarea').keydown(function(){ 
    // same logic as above to check textarea position relative to window 
});