Question

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

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

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

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

Answer 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

Answer 2

我也想不出这是好的设计。但我们都必须按照自己的方式做点什么。如果有帮助，请尝试以下脚本

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

这样可以保持对输入框的关注，浏览器也不会滚动到输入框。如果您希望它跨浏览器，您可能还需要处理keydown事件。如果您在处理其他活动时遇到任何问题，请与我们联系。

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

Answer 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
})

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

3 个答案: