添加選項元素重置select元素中的滾動位置

我正在用大量的延遲加載選項構建一個選擇列表。數據首先加載預設數量的項目，然後當用戶向下滾動列表時，將加載更多項目。這一切都很好。添加選項元素重置select元素中的滾動位置

但是，當添加新選項時，瀏覽器會滾動到最近選擇的項目，如果沒有選擇項目（在Firefox和IE11中測試），則瀏覽到頂部。這是非常刺耳和煩人的。在添加選項時，我希望視口保持在同一個位置。這不是像div或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/

來源

2016-09-09 Waggles

獲取新項目後，您可以將scrollTop重置爲getItems之前的值。這將使跳到頂部不太明顯，但我不知道如何完全防止它。

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

來源

2016-09-10 13:04:45

添加選項元素重置select元素中的滾動位置

回答

相關問題