Custom content scroll box's scroll bar jumps on drag
<p>I created a custom content scroll box using HTML, CSS and JavaScript. When you try to drag the scrollbar it jumps to the left edge of the scrollbar. Any idea why am I missing something?</p>

<pre><code>var scrollbar = document.getElementById("scrollbar");
var barWidth = 300;
var scrollbarWidth = 40;

scrollbar.addEventListener("mousedown", function(e) {
    window.addEventListener("mousemove", hScroll, null);
}, null)

window.addEventListener("mouseup", function(e) {
    window.removeEventListener("mousemove", hScroll, null);
}, null);

function hScroll(e) {
    var scroller_pos = e.clientX - offset;
    if (scroller_pos &lt;= 0) scroller_pos = 0;
    else if (scroller_pos &gt;= barWidth-scrollbarWidth) scroller_pos = barWidth-scrollbarWidth;
    scrollbar.style.marginLeft = scroller_pos + "px";
}
</code></pre>
