Javascript 如何创建带有敲除绑定的自定义滚动条（jScrollPane）？

我有一个用于插入消息的可观察耳环。我想使用knockout显示所有消息。我想使用自定义的滚动条图形-jScrollPane。（）

如何修复jScrollPane中显示自定义滚动条的示例

示例：

HTML:

#chat-content, #example-content{
    width: 300px; 
    height: 100px; 
    overflow: auto;
}

function Message(data) {
    this.messageText = ko.observable(data.messageText);
}

function ChatViewModel() {
    // Data
    var self = this;
    self.messages = ko.observableArray([]);
    self.message = ko.observable();


    // Operations
    self.sendMessage = function() {
        self.messages.push(new Message({ messageText: this.message() }));
        self.message("");
    };
    self.removeTask = function(task) { self.tasks.remove(task) };
}

ko.applyBindings(new ChatViewModel());

$(function(){

    $('#chat-content').jScrollPane();
    $('#example-content').jScrollPane();

});

与敲除绑定聊天


消息：

添加
示例内容-无敲除绑定
正文
正文
正文
正文
正文
正文
正文
正文

CSS:

#chat-content, #example-content{
    width: 300px; 
    height: 100px; 
    overflow: auto;
}

function Message(data) {
    this.messageText = ko.observable(data.messageText);
}

function ChatViewModel() {
    // Data
    var self = this;
    self.messages = ko.observableArray([]);
    self.message = ko.observable();


    // Operations
    self.sendMessage = function() {
        self.messages.push(new Message({ messageText: this.message() }));
        self.message("");
    };
    self.removeTask = function(task) { self.tasks.remove(task) };
}

ko.applyBindings(new ChatViewModel());

$(function(){

    $('#chat-content').jScrollPane();
    $('#example-content').jScrollPane();

});

JS:

#chat-content, #example-content{
    width: 300px; 
    height: 100px; 
    overflow: auto;
}

function Message(data) {
    this.messageText = ko.observable(data.messageText);
}

function ChatViewModel() {
    // Data
    var self = this;
    self.messages = ko.observableArray([]);
    self.message = ko.observable();


    // Operations
    self.sendMessage = function() {
        self.messages.push(new Message({ messageText: this.message() }));
        self.message("");
    };
    self.removeTask = function(task) { self.tasks.remove(task) };
}

ko.applyBindings(new ChatViewModel());

$(function(){

    $('#chat-content').jScrollPane();
    $('#example-content').jScrollPane();

});

---

创建自定义绑定处理程序以初始化和更新jScrollPane实例：

ko.bindingHandlers.jScrollPane={
init：函数（元素、值访问器）{
var o=valueAccessor（）| |{}；
//初始化
$（元素）.jScrollPane（o.options）；
var reinit=函数（）{
var scroll=$（元素）.data（“jsp”）；
如果（滚动）{
scroll.reinitialise（）；
} 
};
//处理窗口大小调整（如果您的聊天框具有设置的像素宽度，则实际上不需要）
$（窗口）。调整大小（重新调整）；
//如果传入，则向observable添加订阅
如有（o.subscribe）{
o、 subscribe.subscribe（函数（）{
//使用setTimeout，以便DOM在重新初始化之前完成更新
setTimeout（reinit，0）；
});
}
}
};

调用

#chat content

div上的新

jScrollPane

处理程序，传入

消息

observable，以便它知道何时刷新滚动条。将

foreach

绑定处理程序放在子元素中，以防止它干扰

jScrollPane

所做的DOM更改

JSFiddle：

---

jScrollPane绑定处理程序改编自：