Solved

How to determine the direction of the scroll in onScroll event

Posted on 2002-05-06
5
1,281 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 500 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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

726 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