javascript - How to create a custom scrollbar to scroll the document vertically? -
i'm running out of ideas here. i'm trying make side scroll bar control slide of whole document. can see on jsfiddle i've been experimenting couldnt work. here markup , css. can see more elaborate version @ link on bottom. welcome.
html
<div id="sidescroll"> <div id="sidescrollbtn"></div> </div> css
#sidescroll{height:80px;width:10px;background:grey;border:1px solid black;margin:0 auto;} #sidescrollbtn{height:10px;width:10px;background:red;margin-top:10px;}
here's updated fiddle addresses few of issues comments.
firstly, here's fiddle link: http://jsfiddle.net/dlbbntwz/
one of things wanted clean code , reduce duplication in individual up/down event handlers before. instead, have 1 function _scroller passes 1/-1 actual _scroll logic.
in addition, demonstration of mouse wheel logic added. syncs up!
there ugly bug, mentioned, occur if clicked down , moved cursor off buttons. due interval not being cleared. mentioned in other comment set flag , check @ document level (allowing user move cursor off buttons - feels more "right" mouseevents). i've updated fiddle use logic. feels better?
in addition, there 1 slight issue percentualoffset. while calculated ratio properly, didn't take account scrollbar height (causing scrollbutton go further bar). updated that, it's more accurate.
there slight issue logic resize button. if document height greater document scroll height (no scroll bar), things broke. so, logic has been cleaned well.
you mentioned wanted 10px (for background image) - added padding address (which recommend) - it's eases logic when calculating offset button.
hopefully helps! 1 other area see exploring being able click , drag scroll button scroll actual page - that'd slick!
Comments
Post a Comment