View Full Version : Resolved Facescroll: Changing the position of the scrollbar so that its outside of the textbox

06-15-2012, 11:08 AM
1) Script Title: Facescroll

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex11/facescroll/index.htm

3) Describe problem: If you want to move the scrollbar so that it doesn't overlap with the text and put it someplace outside of the containing div, there is no easy way to do this.

4) Solution: I solved this myself. Posting here in case it helps someone else. I only modified it for the vertical scrollbar but the same thing can be easily done for the horizontal scroll bar too.

Modify the script so that instead of putting the scrollbar inside the holder div, it makes the scrollbar a sibling with the holder div. Then modify it so that it makes the original div have an overflow of visible, instead of hidden, and make the holder div be the one that has the overflow set to hidden.

1. find the lines

$scrollHolder.append('<div class="alt-scroll-vertical-bar ' + settings['bar-class'] + ' ' + settings['vertical-bar-class'] + '"><ins></ins></div>');
var $verticalBar = $('.alt-scroll-vertical-bar', $scrollObj); and replace $scrollHolder with $scrollObj ($scrollObj is simply the parent of $scrollHolder, the original div that .alternateScroll() was called on)

2. Then find the line that initializes scrollObj (var $scrollObj) and set the overflowProperty to visible instead of hidden

3. find the line that inistializes the holder
($scrollObj.wrapInner('<div class="alt-scroll-holder" style="position: relative;) and set the overflow to hidden

4. You can now place the scroll bar wherever you want on the page, allowing more flexible styling. Commonly you may want to set it so that it is right at the side, and not overlapping with the text. To do that you can simply add left: 100%; to your "bar-class"