javascript - 如何避免滚动到焦点元素

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，这样即使焦点移动到输入，您的滚动位置也不会受到影响

    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>