オプション要素を追加すると、選択要素のスクロール位置がリセットされます

Question

私は遅延ロードで多数のオプションを持つ選択リストを作成しています。データは、予め設定された数のアイテムをロードすることによって開始され、ユーザがリストをスクロールすると、より多くのアイテムがロードされる。これはすごく効果的です。

ただし、新しいオプションが追加されると、ブラウザは最も最近選択されたアイテムにスクロールします。アイテムが選択されていない場合は、FirefoxとIE11でテストされます。これは非常に不快で迷惑です。オプションを追加するときにビューポートが同じ場所に残るようにしたいと思います。 divsやlisのような他のHTML要素には問題ありません。ここで

はCSSです：ここでは

#main { 
    height: 200px; 
    width: 200px; 
} 

はノックアウトバインディングとHTMLである：ここでは

<div> 
    <span data-bind="text: 'Loaded ' + items().length + ' out of ' + data.length + ' items'"></span> 
</div> 

<select id="main" size="10" data-bind="foreach: items, event: { scroll: scrolled }"> 
    <option data-bind="text: name"></option> 
</select> 

ではJavaScriptです：

var data = []; 
for (var i = 0; i < 100; i++) { 
    data.push({ 
    id: i, 
    name: "Item" + i 
    }); 
} 

function getItems(count) { 
    var target = viewModel.maxId + count; 
    while (viewModel.maxId < target && viewModel.maxId < data.length) { 
    viewModel.items.push(data[viewModel.maxId++]); 
    } 
} 

var viewModel = { 
    data: data, // total data 
    items: ko.observableArray([]), // visible items out of data 
    scrolled: function(data, event) { 
    var elem = event.target; 
    if (elem.scrollTop > (elem.scrollHeight - elem.offsetHeight - 10)) { 
     getItems(20); 
    } 
    }, 
    maxId: 0 
}; 


ko.applyBindings(viewModel); 
getItems(20); 

そして、ここではフィドルです：http://jsfiddle.net/4wjra438/2/

Answer 1

新しいアイテムを取得した後は、の前に戻してscrollTopをリセットすることができます。それはトップへのジャンプをあまり目立たなくしますが、私はそれを完全に防ぐ方法を知らない。

scrolled: function(data, event) { 
    var elem = event.target; 
    var scrollPos = elem.scrollTop; 
    if (scrollPos > (elem.scrollHeight - elem.offsetHeight - 10)) { 
     getItems(20); 
     elem.scrollTop = scrollPos; 
    } 
    },