View Full Version : FaceScroll scrollbar setting scroll position

10-04-2012, 02:17 AM
1) Script Title: FaceScroll Custom scrollbar

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

3) Describe problem: I now find I need to set the scroll position and haven't been successful. I tried to rework John's solution to get the position, but position().top=-100 didn't seem to work. What's the trick to do this?

Thanks to all you guys...

10-04-2012, 02:31 AM
what do you mean by setting the scroll position? Do you mean that you want the scrollbar to start in a particular place?

10-04-2012, 04:22 AM
I want to enable page up and page down buttons. The div's content is dozens of screen heights tall. With that much content, it's nice to just be able to jump from page to page without all that scrolling. I need to programmatically set the div scroll position to a set value. I'm usually pretty good at adapting code, but I'm thinking I need to re-evaluate my skill level, I just can't seem to get this to work.

10-04-2012, 05:05 AM
Scroll to bottom:

scrollTop: $jq('#nameofdiv')[0].scrollHeight}

Scroll to top:

scrollTop: 0 }

Now of course, you will have to trigger this jquery if the keys are pressed. In case you don't know, the keycode for pageup is 33, and pagedown is 34. See here (http://stackoverflow.com/questions/1444477/keycode-and-charcode) for more info.

10-06-2012, 04:39 PM
Thanks bernie1227 for the assist...

That's not it. Facescroll creates additional divs dynamically. I need to access the proper one. I may even have to move the scroll thingie to accomplish this. Your example moved the outer div and once scroll that way a portion of the div is no longer available when scrolling (it clipped the div).

Really could use some help with this.

10-06-2012, 06:41 PM
Maybe the scrolltop() documentation will help you:

10-07-2012, 04:22 AM
Thanks again bernie1227,

I had a basic understanding of scrollTop before I read your posted link, but know much more now. In one of the comments it states that this doesn't work if a parent div has overflow:hidden set. I'll look through my code to see if a wrapper div is set that way, but this could also be within a div created by the faceScroll javascript file. I need to apply scrollTop to one of faceScroll's internal divs, just don't know which one and if I'm running into this overeflow:hidden issue. Seems to me reversing John code to read the position, should work but everything I tried did nothing or failed on syntax error. I'm finding this harder that it should be...

John, you've been silent on this... I know you have the answer:) Did you give a clue in your previous answer and I'm not seeing it?

10-07-2012, 09:05 AM
Well, reversing what I did would mean not setting the position, rather setting the top. Like:

$('whatever').css({top: -55});

Unlike regular javascript, you don't need to specify pixels.

I hesitated to mention this though because in order for both the content and the scrollbar to react properly, you probably have to set them both and that could get tricky as one must be proportional to the other. I've been thinking about playing with it, but I've been a bit busy with other things. Another approach would be to find or create a public method within the script itself that would use the script's own proportional positioning routine.

But it might not be all that complicated, setting just one might set them both. I just haven't checked yet. I'm pretty sure though, that doing it that way, they'd get out of sync.

10-07-2012, 09:19 AM
That solution doesn't seem to be working for me John (nothing happens at all).
I've crawled through the script for a while today, and I can't seem to find whatever is controlling the position. I know for a fact that position().top shows where the scrollbar is, but it can't be modified, ie:

$('whatever').position().top = 0;

Or it's nearest equivalent doesn't work, you may have more luck taking a look.

10-07-2012, 05:27 PM
It works like I said more or less and as I feared. If I type this into the console on the demo page:

$('#demo2 .alt-scroll-content').animate({top: -55});

and execute it, it does. But the scrollbar doesn't move. And if the scrollbar was at the bottom (-55 is near the top, all movement of the content is in negative values or to 0, which is the top), as soon as I start dragging the scrollbar after that it jumps the content to the bottom where the scrollbar still is. In other words like I said, they're out of sync.

Now there are functions in the script that keep these two proportional (they never move the exact same amount for any given movement because their respective ranges of movement are different) and in sync (so that the position of one corresponds to the position of the other). I'll have a look to see how we can use them to our purpose here.

10-07-2012, 08:43 PM
OK, I have a working update to the script that takes care of this as well as makes getting the position a little easier while eliminating the need to poll the content element's position with a setInterval function.



Updated script (right click and 'Save As'):


To get the scroll position, you can now put a function in as part of the scroller's options to do whatever you like with that information. It reports both the top and the left position in case you have both a vertical and a horizontal scrollbar, but you only have to use the one you want. In my demo I use both, but only the vertical one changes as the demo only has a vertical scrollbar. These positions are given as top and left of an object that's the sole argument of the optional function, example usage:

$('#demo1').alternateScroll({'scrolldatato': function(data){

That updates the dat-top and dat-left element's values with a positive whole integer representation of the top and left position of the content respectively, every time the script moves it. These functions can be customized to do whatever you like with the information. The raw data is always 0 (for all the way top or all the way left) or negative (representing how far the content has retracted to the top or to the left). It will be a floating point number in most cases.

Demo 1 also takes advantage of the new vscroll data function:

$('#demo1').alternateScroll({'scrolldatato': function(data){

After initialization, it will scroll to 155 pixels down. Notice that now positive integers are what's expected. It also has a link beneath its scroller:

<a href="#" onclick="$('#demo1').data('vscroll')('#classified'); return false;">Classification</a> (scroll demo1 content to element with id 'classification')

Here it's data vscroll function is called from the element itself because there's no longer any other reference to it. And instead of a number, a jQuery selector is used to scroll to an element within the content that has that specific selector. In this case it's a span with the id of "classified":

. . . npowder technology. <span id="classified">Gunpowder</span> is classified as a low ex . . .

There's also a data hscroll function that works the same way for a horizontal scroller. If your scroller has both vertical and horizontal scrolling, both functions may be used at once as needed.

One other thing, with this update the alternateScroll function returns the selector object it was fed. As a result it can no longer be used with the href="javascript:$('someselector').alternateScroll(whatever)" syntax because it will overwrite the page. You can keep that (the only reason to do so is because the href will show up in the status bar, so it's potentially informative to the user), but it must also have an onclick function that does the actual work and that either returns false or that otherwise prevents the default action of the link. So for example, from the demo page:

- <a href="javascript:$('#demo2').alternateScroll('remove');">Remove facescroll scrollbar</a><br />
- <a href="javascript:$('#demo2').alternateScroll({'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });">Add facescroll scrollbar</a>

could become (there are other ways of dealing with this):

- <a href="javascript:$('#demo2').alternateScroll('remove');" onclick="$('#demo2').alternateScroll('remove');return false;">Remove facescroll scrollbar</a><br />
- <a href="javascript:$('#demo2').alternateScroll({'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });" onclick="$('#demo2').alternateScroll({'vertical-bar-class': 'styled-v-bar', 'hide-bars': false }); return false;">Add facescroll scrollbar</a>

Another way is to use jQuery to add the event to the link. If you do that, have the event prevent default or return false.

10-07-2012, 10:27 PM
Thanks guys,

John, sorry to drag you into this... Ok, I'm not that sorry:)

Your comments have helped, not so much as in solving this problem, but in knowing it isn't a simple thing, and my struggle to find a solution is not the one line wonder I'd thought it would be.

I have been thinking that an additional function in the js file would be needed too. The js seems to cover three different events. One for IOS drags, one for clickwheel scrolls, and one for 'handle' drags. be nice to grab one of those. Knowing the order would be useful too, but I can't see it. Is the div scrolled and the scroll handle adjusted to match, or is it the other way around? Doing the proper one would seem to keep them in sync, don't you think?

I'm going to pay the js file another visit and see if I can do this with an additional function. Hope you don't mind me tampering with your code. (tampering=butchering)


10-07-2012, 10:30 PM
Never mind....

Oh, and many thanks John.

06-25-2013, 09:58 AM
Hi, I am using your version of facescroll
but I am getting an error. here is my code

$elem_parent.find('.message-fullview .fullview-ul').alternateScroll({'scrolldatato': function(data){}}).data('vscroll')(155);

and error is
Uncaught TypeError: undefined is not a function

pls help me..,,

06-25-2013, 03:38 PM
I think you're overcomplicating it. But I would have to see the page to be sure. And there's been an update to the update that you're probably using to get that error, so either way the syntax is different now.


{'scrolldatato': function(data){}}

is doing nothing because the function being assigned is an empty function, so can be removed.

Of what would remain, the highlighted:

$elem_parent.find('.message-fullview .fullview-ul').alternateScroll().data('vscroll')(155);

has been redefined. Change it to:


Here are the options for .altScrollTo -

$('#selector').altScrollTo(80); // will scroll the FaceScroll scroller initialized on $('#selector')
// to 80 pixels vertical, unless the scroller only scrolls horizontally, in which case it will
// scroll to 80 pixels horizontal.

$('#selector').altScrollTo(80, 50); // will scroll the FaceScroll scroller initialized on $('#selector')
// to 80 pixels vertical, 50 pixels horizontal, unless that scroller scrolls only horizontally,
// in which case it will only scroll to 50 pixels horizontal, or unless that scroller only scrolls
// vertically, in which case it will only scroll to 80 pixels vertical.

$('#selector').altScrollTo('#selector2'); // will scroll the FaceScroll scroller initialized on $('#selector')
// to the element within it with the id of 'selector2'.

$('#selector2').altScrollTo(); // a shortcut method for $('#selector').altScrollTo('#selector2'); will scroll
// the FaceScroll scroller that contains the element that has the id of 'selector2' to that element.
// Be careful here, if two scrollers contain the same selector, unexpected results may occur.

$('#selector').altScrollTo('end'); // will scroll the FaceScroll scroller initialized on $('#selector')
// to the end both vertically and horizontally, or only one or the other if that scroller only
// scrolls in that one direction. Other available keywords are 'middle', and 'begin'.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

Here's the new demo:


See also: