Detecting when scrollbar arrow has been clicked.

[theniteowl]

I have a div tag set to be scrollable.
I would like to know if it is possible to detect when the up or down arrows of the scrollbars are clicked.

The scrolling is automatic but what I want to do is know when the top has been reached and the client is clicking on the up arrow (or same thing with down, left, right) so that I can trigger an event.

I am working with javascript and IE 5.5+

Anybody?

Thanks.

 

[jemminger]

not directly. you can however monitor the scrollTop property of body or documentElement, depending on if you are in quirks mode or not:

<script type="text/javascript">
function scrollListener() {
	self.lastScrollTop = self.lastScrollTop || getScrollTop();
	var currScrollTop = getScrollTop();

	if (currScrollTop != lastScrollTop) {
		alert("scroll!");
	}

	lastScrollTop = currScrollTop;

	function getScrollTop() {
		var quirks = document.compatMode.toLowerCase() == "backcompat";
		return quirks ? document.body.scrollTop : document.documentElement.scrollTop;
	}
}

window.onload = function() {
	window.setInterval("scrollListener()", 50);
}
</script>

-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big

 

[BillyRayPreachersSon]

You might also check out this thread in the JavaScript forum: thread216-1065669

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[theniteowl]

Monitoring position is not a problem but I still have no event to trigger a change if they are using the arrow keys and have moved to the top or bottom.

What I am trying to do is emulate the behavior of an Outlook calendar. It displays 12 months previous and 12 months future. Moving the scrollbar to the beginning or end goes directly to that end of the content. The only way to go past either end of content is to then click the direction arrow which causes the loading and display of an additional week of information. If I could detect the click of an arrow then I could do a check of scoll position and know what behavior to execute.

So far it looks like it cannot be done.
I have found lots of sample code creating scrollbars but none have been quite what I need or have their own limitations.

I could cheat and float my own buttons over top of the scrollbar arrows but that just seems too patchy an approach.

Thanks.

 

[BillyRayPreachersSon]

You might try harnessing the "onscroll" event (possibly IE-only), or failing that, just use a timer that fires every second (or however long) and checks the position.

I'd ask in the JavaScript forum (forum216) for more help with both of these.

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[theniteowl]

Funny, I just got finished testing the onscroll event.
It looks like it will work though I have to work out the details.

The drawback is that a scroll event is not just a single firing. If you scroll using a scroll wheel, arrows or slider or even change the scrollTop property it fires off an onscroll event but the event has not completed yet and seems to fire off for each pixel the scroll is moving so when I test it a single scroll click causes the onscroll event to fire 4 times.

I guess I can track current position and only fire another event from the onscroll event if the window position has reached top or bottom.

Just seems strange that the methods for the DHTML scrollbar are not exposed. It would be so much easier if they were.

Thanks again.