如何让我的选择列表滚动到底部？

Question

我创建了一个多选列表，输入文本框和一个添加按钮。用户可以通过输入框和添加按钮在多选列表中插入新选项。我也创造了一个例子小提琴：

http://jsbin.com/exuwis/7/edit

我在我的例子中使用了knockout.js。选择列表定义为“size =”5“。在列表中输入超过5个条目之后，我看不到任何新条目而没有手动滚动到我希望当用户在列表中输入任何新条目时，滚动条会自动移动到列表的底部。我该怎么做？

Answer 1

添加bindingHandler：

ko.bindingHandlers.scrollDown = {
update: function (elem, valueAccessor) {
    var shouldBeSelected = ko.utils.unwrapObservable(valueAccessor());
    if (shouldBeSelected) {
        //scroll
        $(elem).scrollTop(val);
        // back to previous state
        var boundProperty = valueAccessor();
        if (ko.isWriteableObservable(boundProperty))
            boundProperty(false);
    }
}};

将数据绑定添加到滚动元素：

  select data-bind="scrollDown: scrollDown ...

添加到MainModel：

self.scrollDown = ko.observable(false);
self.CourseOptions.subscribe(function(){
  setTimeout(function () { 
    self.scrollDown(true); 
  }, 0); 
});

示例：http://jsbin.com/exuwis/14/edit

Answer 2

考虑在其他选项之上添加新选项。

自动滚动内容不是一个好习惯。

使用

self.CourseOptions.unshift(self.OptionToAdd());

而不是

self.CourseOptions.push(self.OptionToAdd());

在数组的乞讨处插入项目。