View Full Version : FaceScroll scrollbar help please...

09-25-2012, 09:24 PM
1) Script Title: FaceScroll Custom scrollbar

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

3) Describe problem: I'm using this script and it is very nice. Thank you to whoever posted it.

I would like to get the div scroll position or the scroll thumb position. I fiddled around but only got JS syntax errors.

Can someone show me how to get the scroll position?

Thanks a bunch...

09-26-2012, 12:41 AM
What's the scroll thumb position? The word thumb doesn't appear on the demo page.

If you want the position of the content within the scroller, just query that from the element. For example, if you install the script exactly as directed on the demo page, you can add the highlighted:

. . . vascript" src="facescroll.js">
* FaceScroll custom scrollbar (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.

<script type="text/javascript">
jQuery(function(){ // on page DOM load
$('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });
var demo1 = $('#demo1').find('.alt-scroll-content');
setInterval(function(){$('#dat').val(demo1.position().top);}, 100);
<p><b>Scrollbar (default style) shows onMouseover</b></p>
<input type="text" id="dat">
<div id="demo1" style="width:300px; height:250px; padding:8px; background:lightyellow; border:1px solid gray; resize:both; overflow:scroll">

From Wikipedia- Gunpowder, also known since in the la . . .

The scroll position will be continually updated in the text input. Now that's probably not the use you want to put this to. But you should be able to adapt the code to do what you want it to do.

Any questions, feel free to ask.

If you're having problems, and/or want tweaks, a link to your page would be a good idea.

09-26-2012, 09:03 PM
Thanks John,

This is brilliant. You not only answered my question, you anticipated my next one. Can't thank you enough.

I must have tried every possible combination of syntax, but I never used position(). In hindsight, that's a head slap.

As for 'Thumb'...

This may be just an Apple thing, but a thumb is any dragable portion of a control. This would refer to scrollbars, sliders, and resizing widgets, that allow a user to manipulate. Apple defined the term in their HIG tome, back in 1984... Am I out of touch, did they change the name on me? So what does everyone call these boogers now-a-days?

You've been most helpful.

09-26-2012, 09:16 PM
I'm not an Apple person. Most people call them a scrollbar. The technical term for what you call the thumb is I suppose the face. At least that's the term used to style it in browsers that support that. If you want to find it's position instead of or in addition to that of the contents, you can use a similar sort of approach, substituting the class of the thumb for that of the contents. Those are:




depending upon which direction the scrollbar moves in. You can have either or both.

Which reminds me, use .left instead of .top for the position() modifier if you're working with a horizontal scroller.

09-26-2012, 11:06 PM
Just scrollbar or maybe "handle". I'm an apple person (but only since the mid 90s) and I've never heard that term. They probably dropped it due to competition with windows (either to seem more similar or more distant, whichever applied at the time).

09-30-2012, 10:07 PM
Sorry to bump this, but since my question is so related I decided to tack on to the original question.

Can you now show me how to set the scroll position? Again all my attempts have failed with syntax errors.