-1

I'm running out of ideas here. I'm trying to make a side scroll bar to control the slide of the whole document. As you can see on my Jsfiddle I've been experimenting but couldnt get it to work. Here is the markup and css. You can see a more elaborate version at the link on the bottom. Any help is 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;}

http://jsfiddle.net/vinicius5581/33fx6dpr/

Vinicius Santana
  • 3,216
  • 2
  • 23
  • 39
  • Experimenting: http://jsfiddle.net/vinicius5581/2y63xnxa/5/ – Vinicius Santana Sep 19 '14 at 23:06
  • You don't want to use css for this? Just a javascript? add `overflow-y:scroll` to the css style of the div you want to scroll. Adn don't forget the height attribute. – andrex Sep 19 '14 at 23:13
  • @andrex Do you think the `overflow-y:scroll`can make `#sidescroll` work? please view the fiddle. – Leonel Sarmiento Sep 19 '14 at 23:15
  • @LeoSarmiento check this updated version of your fiddle with only css. http://jsfiddle.net/2y63xnxa/12/ No javascript is being used. – andrex Sep 19 '14 at 23:23
  • You want the the scroll to work only if you click on the Up or Down buttons? So no mouse scroll option? Or you want them to work together? – Bojan Petkovski Sep 19 '14 at 23:31
  • 1
    Hey, I remember you! So if you remember previously, I mentioned you could resize the button to match the viewport. Here's an example of that: http://jsfiddle.net/2y63xnxa/13/ - Standalone: http://fiddle.jshell.net/2y63xnxa/13/show/ – Jack Sep 20 '14 at 00:09
  • Jack!! You are a life saver! I own you a beer. :) – Vinicius Santana Sep 20 '14 at 00:19
  • I'm very impressed with your solution. Thank you. – Vinicius Santana Sep 20 '14 at 00:21
  • I found out that with this solution if I scroll the page using the mouse weal it wont sync. Also I would like to have the button with 10px always as I intend to use a background image on it. – Vinicius Santana Sep 20 '14 at 00:27
  • possible duplicate of [CSS customized scroll bar in div](http://stackoverflow.com/questions/9251354/css-customized-scroll-bar-in-div) – davidcondrey Sep 22 '14 at 08:02
  • In response to possible duplicate, I'm not trying to customize the browser Scroll Bar. Instead I'm trying to create an extra "controler" to scroll the page. This is the closest thing we got so far: http://jsfiddle.net/2y63xnxa/24/ . – Vinicius Santana Sep 22 '14 at 19:00
  • 1
    Yup, this should not be marked as duplicate – Stephan Muller Sep 22 '14 at 22:55

1 Answers1

1

Here's an updated fiddle that addresses a few of the issues from the comments.

Firstly, here's the fiddle link: http://jsfiddle.net/dLbbntwz/

One of the things I wanted to do was clean up the code and reduce the duplication in the individual up/down event handlers from before. Instead, I have one function _scroller that then passes a 1/-1 to the actual _scroll logic.

In addition, a demonstration of the mouse wheel logic was added. So now it syncs up!

There was an ugly bug, as you mentioned, that would occur if you clicked down and then moved the cursor off the buttons. This was due to the interval not being cleared. I mentioned in the other comment you could set a flag and check at the document level (allowing the user to move the cursor off the buttons - which feels more "right" for MouseEvents). I've updated the fiddle to use that logic. Feels much better?

In addition, there was one slight issue with the percentualOffset. While it calculated the ratio properly, it didn't take into account the scrollbar height (causing the scrollbutton to go further than the bar). I updated that, so it's more accurate.

There was also a slight issue with the logic to resize the button. If the document height was greater than the document scroll height (no scroll bar), things broke. So, that logic has been cleaned up as well.

You mentioned you wanted 10px always (for the background image) - I added padding to address that (which I recommend) - It's eases the logic when calculating the offset for the button.

Hopefully this helps! One other area I see you could exploring is being able to click and drag the scroll button to scroll the actual page - that'd be slick!

Jack
  • 8,411
  • 2
  • 24
  • 38
  • Here's a fiddle with variable scroll speed: http://jsfiddle.net/dLbbntwz/5/ This would be good for longer pages where you might not want a constant speed. – Jack Sep 22 '14 at 08:34