如何避免滚动到焦点元素

Question

所以，我有一个输入 type=text 用作搜索。

搜索会自动滚动到长列表中找到的项目（因此输入在屏幕之外），但是当我继续输入时，在跳转到第一个找到的结果后，它会回到输入的位置。我想避免这种行为。

https://jsfiddle.net/ptjnr93q/

请看上面的jsfiddle。

var cont = 0;
var fill = "test";
for (cont = 0; cont < 1000; cont++) {
    $("body").append(fill + "<br>");
	console.log("e");
}

$("input").bind('focusin focus', function(e){
  e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Type something in the input field, scroll down, and type again.<br>
The page scrolls up to the input again, I want to avoid it.<br>

<input type="text" class="search">
<br>

Answer 1

我提出了另一种实现目标的方法，即保持向下滚动的位置不变。

• 将结果集保存在单独的 DIV 中。
• 添加滚动到resultSet div，这样即使焦点移动到输入，你的scolled位置也不会受到影响

    var cont = 0;
    var fill = "test";
    for (cont = 0; cont < 1000; cont++) {
        $("#resultSet").append(fill + cont + "<br>");
    	//console.log("e");
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="search">

    <br>
    
    <div id="resultSet" style="height:200px; overflow:scroll;"></div>