title: How can I create a simple page vertical scroll bar without using jQuery?
body: <p>I have looked at I think all the scrollbars code but have not yet been able to find a simple one that does not use jQuery or a somewhat complex library. </p>
  
  <p>Has anyone created there own simple scrollbar using just Javascript? What I am looking for is an example of how this can be done. In particular I have a simple Bootstrap web page with:</p>
  
  <pre><code>&lt;body&gt;
     &lt;header&gt; ....&lt;/header&gt;
     &lt;main&gt; ......&lt;/main&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>What I would like to do is to be able to have a small in page scroll bar appear to the right of the <code>&lt;main&gt;</code> area if the content there is larger than will fit on a single page. For styling purposes I would like this <strong>not</strong> to be the browser default scroll bar.</p>
  
  <p>Here's an example of what I am looking for but this one does use jQuery so I cannot use it on my site:</p>
  
  <p><a href="http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html" rel="nofollow noreferrer">http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html</a></p>
  
  <p>I am looking for some way to do this using Javascript in a <strong>modern browser IE9 and above</strong>. As I think this would be useful for many people I have opened up a bounty of 200 for this in the hope that someone could provide a good example of a draggable page scrollbar that also would respond to the mousewheel when over the page content area. </p>
  
  <p>Just an update. I am not looking for a mobile solution for this. I am just looking for a solution that would work inside a PC / Mac browser. The site is not set up or suitable for a phone. It's possible to use on an IPad / tablet but for those needs I would like to be able to have the scrollbar default to use just the normal tablet scrolling method. </p>