Solved

How to determine the direction of the scroll in onScroll event

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

816 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

8 Experts available now in Live!

Get 1:1 Help Now