By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,741 Members | 2,004 Online
Bytes IT Community

Home Questions Articles Browse Topics Latest Top Members FAQ

home > topics > javascript / ajax / dhtml > questions > track scroll events.
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,741 IT Pros & Developers. It's quick & easy.

Track Scroll Events.

dmjpro
100+
P: 2,476
How do i track the scroll events in JS. Is there any standard way to do it ?
Please help me ... ;)
Nov 4 '08 #1
Share this Question
Share on Google+
16 Replies
acoder
Expert Mod 15k+
P: 16,027
Use the onscroll event. It's not part of any standards, but should be reasonably well supported.
Nov 4 '08 #2
dmjpro
100+
P: 2,476
Use the onscroll event. It's not part of any standards, but should be reasonably well supported.
I test this code in Mozilla...
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. var golbal_var = 0;
  3. function test(){
  4.     alert('');
  5.     document.getElementById('text_id').value = ++golbal_var;
  6. }
  7. </script>
  8. </head>
  9.  
  10. <body onScroll=test()>
  11. <input type='text' id='text_id'/>
  12. <div style='width:2000px;height:2000px'/>
  13.  
In Mozilla it's working ..but not in IE ......what should i be doing ??
Nov 4 '08 #3
acoder
Expert Mod 15k+
P: 16,027
For Mozilla compatibility, see MDC.
Nov 4 '08 #4
dmjpro
100+
P: 2,476
For Mozilla compatibility, see MDC.
Hi ... Acoder thanks!
In IE i had to do .... window.onscroll = function_ref.
Now in both it's working ..... ;)
Nov 4 '08 #5
dmjpro
100+
P: 2,476
Hi ... Acoder thanks!
In IE i had to do .... window.onscroll = function_ref.
Now in both it's working ..... ;)
Hey Acoder.....
A typical problem appears ...
It's
Expand|Select|Wrap|Line Numbers
  1. alert(document.body.scrollLeft+'\t'+document.body.scrollTop);
always showing value 0 ..no matter which scroll bars scrolled ....
What's wrong with it ..
Nov 4 '08 #6
acoder
Expert Mod 15k+
P: 16,027
Which browser? A quick test in Firefox works.
Nov 4 '08 #7
dmjpro
100+
P: 2,476
Which browser? A quick test in Firefox works.
I am having this HTML code .....
Expand|Select|Wrap|Line Numbers
  1. <body onLoad = _test()>
  2. <input type='text' id='text_id'/>
  3. <div style='width:2000px;height:2000px' id='div_id'>
  4. </div>
  5. </body>
  6.  
And this is my JavaScript code ..
Expand|Select|Wrap|Line Numbers
  1. function test(){
  2.     alert(document.body.scrollLeft+'\t'+document.body.scrollTop);
  3. }
  4. function _test(){
  5.     window.onscroll = test;
  6. }
  7.  
When horizontal or vertical scroll bars gets scrolled then the both of the values come 0 ...... in Mozilla and in IE both ..
What's wrong with it .... ?
Nov 4 '08 #8
acoder
Expert Mod 15k+
P: 16,027
Again, your code works too in FF, at least. Have you got anything else on the page?
Nov 4 '08 #9
dmjpro
100+
P: 2,476
Again, your code works too in FF, at least. Have you got anything else on the page?
How strange ..i am getting an alert box with two values ..and both are 0 .....
believe me :(
Nov 4 '08 #10
acoder
Expert Mod 15k+
P: 16,027
I tested with this version of your code:
[html]<html>
<head>
<script>
function test(){
alert(document.body.scrollLeft+'\t'+document.body. scrollTop);
}
function _test(){
window.onscroll = test;
}
</script>
</head>

<body onload = '_test()'>
<input type='text' id='text_id'>
<div style='width:2000px;height:2000px' id='div_id'>
</div>
</body>
</html>[/html]Works in Firefox 3.0.3
Nov 4 '08 #11
dmjpro
100+
P: 2,476
I tested with this version of your code:
[html]<html>
<head>
<script>
function test(){
alert(document.body.scrollLeft+'\t'+document.body. scrollTop);
}
function _test(){
window.onscroll = test;
}
</script>
</head>

<body onload = '_test()'>
<input type='text' id='text_id'>
<div style='width:2000px;height:2000px' id='div_id'>
</div>
</body>
</html>[/html]Works in Firefox 3.0.3

But mine was Firefox 2.
Whatever it is ...i just wanted to know ..is there any way to position an element at the right most of the page ..... that means according to the position of the scroll bars ...could you guide me to do this ....?
Please ... ;)
Nov 5 '08 #12
acoder
Expert Mod 15k+
P: 16,027
Use "position: fixed" - a simple solution. Set the right property to 0 for it to be fixed to the right side of the window.

Note that position: fixed is not supported in IE 6, but you can make it work using the fix described here.
Nov 5 '08 #13
dmjpro
100+
P: 2,476
Use "position: fixed" - a simple solution. Set the right property to 0 for it to be fixed to the right side of the window.

Note that position: fixed is not supported in IE 6, but you can make it work using the fix described here.
No no ..... if i scroll down or up ..or scroll horizontally ..at every situation the element should be at the rightmost corner of the page ..i think now u got my point ... ;)
That's why i tried to track the scroll event ... :)
Nov 5 '08 #14
acoder
Expert Mod 15k+
P: 16,027
Then you didn't understand what position: fixed does. That's exactly what you need.

See this modified example:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. #text_id {
  5.   position:fixed;
  6.   top:0px;
  7.   right:0px;
  8. }
  9. </style>
  10. </head>
  11.  
  12. <body>
  13. <input type='text' id='text_id'/>
  14. <div style='width:2000px;height:2000px' id='div_id'>
  15. </div>
  16. </body>
  17. </html>
Nov 5 '08 #15
dmjpro
100+
P: 2,476
I tested this code ..in IE 6 ..but it's not running ...
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. <head>
  7. <style type="text/css">
  8. #text_id {
  9. position:fixed;
  10. top:0px;
  11. right:0px;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <input type='text' class='text_id'/>
  17. <div style='width:2000px;height:2000px' id='div_id'>
  18. </div>
  19. </body>
  20. </html>
  21.  
Where i am wrong ... :(

Sorry sorry .... i didn't read out your previous post ... ;)

I also tested it in Mozilla ...it's not working ....
Nov 5 '08 #16
acoder
Expert Mod 15k+
P: 16,027
IE 6 doesn't support position:fixed as I mentioned earlier. Use the fix that's described on the page I linked to earlier - Making Internet Explorer use position:fixed;

I'm not sure why it's not working for you in Firefox. It has done for a number of versions. Does the example in that link work?
Nov 5 '08 #17

Post your reply

Sign in to post your reply or Sign up for a free account.

Question stats

  • viewed: 2403
  • replies: 16
  • date asked: Nov 4 '08
BYTES.COM © 2019 About Bytes | Advertise on Bytes | Privacy Policy | Manage Cookies
Sitemap | JavaScript / Ajax / DHTML Answers Sitemap | JavaScript / Ajax / DHTML Insights Sitemap

Follow us to get the Latest Bytes Updates