Javascript 浏览器自动滚动,用于在表单元素之间进行选项卡切换
当选项卡切换到视口底部下方的表单字段(或键入与底部重叠的文本区域)时,浏览器通常会自动向上滚动足够多,以便您可以看到该字段。有没有办法设置浏览器移动到的位置 这是一个问题,因为我在页面底部有一个固定的位置栏,因此它覆盖了浏览器滚动到的位置,并希望它进一步向上滚动Javascript 浏览器自动滚动,用于在表单元素之间进行选项卡切换,javascript,html,css,browser,Javascript,Html,Css,Browser,当选项卡切换到视口底部下方的表单字段(或键入与底部重叠的文本区域)时,浏览器通常会自动向上滚动足够多,以便您可以看到该字段。有没有办法设置浏览器移动到的位置 这是一个问题,因为我在页面底部有一个固定的位置栏,因此它覆盖了浏览器滚动到的位置,并希望它进一步向上滚动 干杯当然,您可以在输入中添加焦点事件处理程序,并检查它们在焦点上的位置。如果离底部太近,只需稍微推动窗口滚动,直到可以接受为止 下面是如何在jQuery中实现这一点: // Constant amount of padding an e
干杯当然,您可以在输入中添加焦点事件处理程序,并检查它们在焦点上的位置。如果离底部太近,只需稍微推动窗口滚动,直到可以接受为止 下面是如何在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);
}
});
你可以看到
编辑:在文本区域中键入
您可以在键入时使用处理程序捕获并检查textarea的位置:
嗨,帕特,谢谢你的回复,我最终还是这么做了。然而,还有一个事实是,当在与视口底部重叠的文本区域中键入时,窗口会滚动到光标,这样它就不会消失。这可能也会改变吗?没问题,而且肯定是可能的-请参阅我的编辑,了解如何做到这一点。
$('textarea').keydown(function(){
// same logic as above to check textarea position relative to window
});