Question

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

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

干杯

Answer 1

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

下面是你如何在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
});

浏览器自动滚动表格元素的标签

1 个答案: