防止默认滚动到元素进行输入答案

【问题标题】：Prevent default scroll to element for input防止默认滚动到元素进行输入
【发布时间】：2025-12-28 17:55:11
【问题描述】：

我可以阻止默认滚动顶部在焦点集中且不可见时输入吗？简单例子：

<input type="search">
<div style="height: 2000px"></div>

要了解我的意思，请转到 http://jsfiddle.net/PV5tC/ 并：

点击输入使其成为焦点。
向下滚动到页面末尾（输入现在不可见）。
开始输入任何内容。

【问题讨论】：

为什么要阻止这种行为？人们应该猜测他们在输入什么吗？不是每个人都是 400wpm 的打字员。
这并不完全符合您的要求，但您可以在document 级别捕获输入，然后使用这些击键更改输入元素的值。不知道你为什么想要，但它应该可以工作。
我的网站上有更复杂的逻辑。首先，我只是想阻止它，执行一些操作并以编程方式调用焦点输入。
我想说这是不可能的，因为你试图破坏所有浏览器的某些东西，也许操作系统默认会这样做，也就是糟糕的 UX 想法
感谢大家，我决定让事情变得简单并使用模糊。

标签： javascript jquery html css

【解决方案1】：

position : fixed; 将避免自动滚动输入，因为它不会在可滚动区域中。

这是一个快速编写的示例，基于this answer，并使用 jQuery，抱歉……

CSS

.hiddenInput{position: fixed; opacity: 0;}

jQuery

    var inputTop, inputBottom;
    window.onload = function()
    {
        inputTop = $('#input').offset().top
        inputBottom = inputTop + $('#input').height();
    }

    function isScrolledIntoView(el)
    {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();
        return ((inputBottom <= docViewBottom) && (inputTop >= docViewTop));
    }
    function hideInput()
    {
        var el = $('#input');
        if ( isScrolledIntoView(el) ){
            el.removeClass();
            }else{
            el.addClass('hiddenInput');
            el.css({top: inputTop});
        }
    }
    window.onscroll = hideInput;

working fiddle

【讨论】：

我知道，但这不是我需要的。

【解决方案2】：

我也不能认为这是好的设计。但我们都必须按照自己的方式做事。如果有帮助，请尝试以下脚本

$('input[type="search"]').on("keypress", function(event){
    event.preventDefault();
    return false;
});

这将允许专注于输入框，浏览器也不会滚动到输入框。如果你想要它跨浏览器，你可能还需要处理 keydown 事件。如果您在处理其他事件时遇到任何问题，请告诉我。

但它会阻止您随时在任何输入中输入任何值：然后模糊更容易

【讨论】：

【解决方案3】：

这可能是反模式，但这应该可以。信息在这里：Disable scrolling when changing focus form elements ipad web app

$('input[type="search"]').on("keydown", function(){
  var oldScroll = $(window).scrollTop();
  $(window).one('scroll', function() {
    $(window).scrollTop(oldScroll);
  });
  // Your ACTION HERE
})

【讨论】：