Hinzufügen von Optionselementen setzt die Bildlaufposition im ausgewählten Element zurück

Question

Ich erstelle eine Auswahlliste mit einer großen Anzahl von Optionen mit Lazy Loading. Die Daten beginnen mit dem Laden einer voreingestellten Anzahl von Elementen, und wenn der Benutzer in der Liste nach unten scrollt, werden weitere Elemente geladen. Das funktioniert alles super.

Wenn jedoch neue Optionen hinzugefügt werden, scrollt der Browser zum zuletzt ausgewählten Element oder nach oben, wenn kein Element ausgewählt ist (getestet in Firefox und IE11). Das ist sehr ärgerlich und nervig. Ich möchte, dass das Ansichtsfenster beim Hinzufügen von Optionen an der gleichen Stelle bleibt. Dies ist kein Problem mit anderen HTML-Elementen wie divs oder lis. Hier

ist die CSS:

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

Hier ist der HTML mit Knockout-Bindungen:

<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> 

Hier ist die 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); 

Und hier ist die Geige: http://jsfiddle.net/4wjra438/2/

Answer 1

Nachdem Sie neue Objekte erhalten haben, können Sie das scrollTop auf das zurücksetzen, was es vor getItems war. Das macht den Sprung nach oben weniger bemerkbar, aber ich weiß nicht, wie ich das alles verhindern kann.

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