custom scrollbar using javascript with no plugins
<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>