Solved

How to determine the direction of the scroll in onScroll event

Posted on 2002-05-06
5
1,248 Views
Last Modified: 2008-01-09
I'm trapping the onScroll event of the scrollable DIV. I need to determine whether it has been scrolled left or right. I can do it by storing and monitoring the scrollLeft attribute, but is there a better way?
0
Comment
Question by:ZhenyaT
  • 3
5 Comments
 
LVL 22

Expert Comment

by:CJ_S
Comment Utility
There is no better way AFAIK, you'll have to use the scrollLeft and scrollTop attributes if you want to get a good estimation.

CJ
0
 
LVL 2

Accepted Solution

by:
svd2002 earned 500 total points
Comment Utility
<DIV id="divTemp" onScroll="fnTemp();">
   .....
</DIV>
<SCRIPT Language="JavaScript">
<!--
function fnTemp()
{
  var sAction = divTemp.componentFromPoint(event.clientX, event.clientY);

if (sAction =="scrollbarLeft")
{
    // left scrolling.
    // your code here
}
if (sAction =="scrollbarRight")
{
    // right scrolling.
    // your code here
}


}
-->
0
 
LVL 2

Expert Comment

by:svd2002
Comment Utility
with reference to my above comment, you can also check the value of sAction aginst
"scrollbarPageLeft" (Page-left scroll bar shaft is at the specified location.) AND
"scrollbarPageRight" (Page-right scroll bar shaft is at the specified location.)
0
 

Author Comment

by:ZhenyaT
Comment Utility
Cheers mate. I'm still having a problem with the onScroll event firing off about 5 times when I press the scroll button. Is there a reason for this?
0
 
LVL 2

Expert Comment

by:svd2002
Comment Utility
Thanks for accepting my answer for determining the scroll direction. But, I was expecting

"A". But, for the first time, I got "B". Anyway.
Now, your problem is "onScroll" event fires multiple times. The reason for this is "Internet

Explorer 5 scrolls an HTML page in small increments, with each one generating a scroll

event." To overcome this problem,use a global variable flag and test against it when the

onscroll event fires. The first time, invoke the code you want and alter the flag;

subsequently, do nothing. Use setTimeout to reset the flag in, say, 200 milliseconds to

bypass on the subsequent events.

For e.g.
var CounterForScroll
function divNumbers_OnScroll()
{
    if (CounterForScroll == 0)
    {
        CounterForScroll = CounterForScroll + 1;
        // ... event handler code ...
        CountOnScroll = CountOnScroll + 1;
        window.setTimeout "Reset()",  200;
    }
}
function Reset()
{
  CounterForScroll = 0;
}
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now