title: How can I create custom scrollbar (jScrollPane) with knockout binding?
body: <p>I have an observableArray for insert message. I want to display all messages using knockout. I want to use a custom scrollbar graphic - jScrollPane. (<a href="http://jscrollpane.kelvinluck.com/index.html" rel="nofollow">plugin LINK</a>)</p>
  
  <p>How can I fix my example for display custom scrollbar from jScrollPane?</p>
  
  <p><strong>Example</strong>: <a href="http://jsfiddle.net/aZpgY/3/" rel="nofollow">http://jsfiddle.net/aZpgY/3/</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h2&gt;Chat with knockout binding&lt;/h2&gt;
  &lt;div id="chat-content" data-bind="foreach: messages"&gt;
      &lt;div data-bind="text: messageText"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;br /&gt;
  
  &lt;form data-bind="submit: sendMessage"&gt;
      message: &lt;input data-bind="value: message" placeholder="Insert your massage" /&gt;&lt;br /&gt;
      &lt;button type="submit"&gt;Add&lt;/button&gt;
  &lt;/form&gt;
  
  &lt;h2&gt;Example content - without knockout binding&lt;/h2&gt;
  
  &lt;div id="example-content"&gt;
      &lt;div&gt;Text&lt;/div&gt;
      &lt;div&gt;Text&lt;/div&gt;   
      &lt;div&gt;Text&lt;/div&gt;   
      &lt;div&gt;Text&lt;/div&gt;   
      &lt;div&gt;Text&lt;/div&gt;   
      &lt;div&gt;Text&lt;/div&gt; 
      &lt;div&gt;Text&lt;/div&gt;  
      &lt;div&gt;Text&lt;/div&gt;      
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#chat-content, #example-content{
      width: 300px; 
      height: 100px; 
      overflow: auto;
  }
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>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();
  
  });
  </code></pre>