Question

我正在构建一个包含大量延迟加载选项的选择列表。数据首先加载预设数量的项目，然后当用户向下滚动列表时，会加载更多项目。这一切都很有效。

但是，添加新选项时，浏览器会滚动到最近选择的项目，如果没有选择任何项目，则滚动到顶部（在Firefox和IE11中测试）。这非常刺耳和恼人。我想在添加选项时视口保持在同一位置。这不是其他HTML元素（如div或lis）的问题。

这是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重置为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;
    }
  },

添加选项元素会重置select元素中的滚动位置

1 个答案: