title: custom scrollbar using javascript with no plugins
body: <p>I want to implement a custom scrollbar using javascript. I have following jsfiddle code </p>
  
  <p><a href="https://jsfiddle.net/uq2pLufn/" rel="nofollow">JSFIDDLE</a></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;ul&gt;
      &lt;li&gt;1&lt;/li&gt;
      &lt;li&gt;2&lt;/li&gt;
      &lt;li&gt;3&lt;/li&gt;
      &lt;li&gt;4&lt;/li&gt;
      &lt;li&gt;5&lt;/li&gt;
      &lt;li&gt;6&lt;/li&gt;
      &lt;li&gt;7&lt;/li&gt;
      &lt;li&gt;8&lt;/li&gt;
      &lt;li&gt;9&lt;/li&gt;
      &lt;li&gt;10&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.container {
    height: 100px;
    width: 100px;
    overflow-y: scroll;
  }
  </code></pre>
  
  <p>It currently has browser's default scrollbar but I want to implement my own with pure javascript. I know there are css3 solutions available but it has browser compatibility issues. There are also plenty of jquery plugins available but my requirement is only javascript. </p>
  
  <p><strong>How can I implement this?</strong></p>