Scrolling handle

by techsin

HTML

<div class="top">
    <div class="box">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit in cum temporibus provident odio voluptatum iste nostrum sunt veritatis doloribus atque architecto alias! Beatae vero eaque porro odit pariatur natus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur labore iure ad maxime consectetur harum commodi itaque accusamus architecto aliquid. Eos id consequuntur praesentium. Cumque fuga delectus incidunt sed tempora.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus minima dolores deserunt beatae voluptatibus dolore itaque. Dolorum repellendus ex odit laborum alias accusantium quam in perspiciatis repellat quis mollit incidunt sed tempora.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus minima dolores deserunt beatae voluptatibus dolore itaque. Dolorum repellendus ex odit laborum alias accusantium quam in perspiciatis repellat quis mollitia deleniti.</p>
    </div>
    <div class="slider"></div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
.box {
    height: 200px;
    border: 10px solid rgba(0, 0, 0, 0);
    overflow: hidden;
}
.top {
    background-color: brown; color: #fff;
    position: relative;
    width: 200px;
    border:1px solid;
}
.slider {
    pointer-events: visible;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 30px;
    width: 8px;
    position: absolute;
    background-color: black;
    border-radius:1000px;
    top: 10px;
    left: 205px;
}
p {
    position: relative;
}

JavaScript

var slider= $('.slider'), mY, dY, clicking=false, cpos, pEle=$('p');

slider.mousedown(function(e){
     mY = e.pageY, clicking = true;
})
$(window).mousemove(function(e){
    if (!clicking) return;
    e.preventDefault();
    dY= e.pageY-mY;
    mY =e.pageY;
    cpos = parseInt(slider.css('top'));
    if(cpos+dY < 0 ) { slider.css('top','10px');
    }else if(dY<0 && cpos >=10 ){ slider.css('top','+='+dY);}
    if(cpos+dY > 170 ) { slider.css('top','170px');
    }else if(dY>0 && cpos <= 170){ slider.css('top','+='+dY);}

    var ps =-1*pEle[0].scrollHeight*(1-(Math.abs((cpos-170)/160)));
    pEle.css('top',ps+'px');
   
}).mouseup(removeit);

function removeit(){ 
    clicking=false; 
}