?
Solved

How to determine the direction of the scroll in onScroll event

Posted on 2002-05-06
5
Medium Priority
?
1,310 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
5 Comments
 
LVL 22

Expert Comment

by:CJ_S
ID: 6993274
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 1500 total points
ID: 6993599
<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
ID: 6993611
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
ID: 6997849
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
ID: 6998154
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…
Suggested Courses

770 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