Onscroll isn't always onscroll

In continuation of my experimentation with position:fixed from yesterday, I decided to try and enhance the form slightly by having it check to see how close the comment form was to the top of the page. If it got too high, I'd change from position:absolute to position:fixed like I did yesterday.

This should certainly resolve the issue for those at a resolution of 1024 by 768 that weren't able to fit the form onto the screen.

But what should have been a fairly simple procedure of using window.onscroll turned into confusion, only to realize that, in Firefox 1.0.3, the onscroll event only fires when you physically drag the scroll bar. Wheel mouse doesn't fire anything. Well, I use my wheel constantly so that just wouldn't do. Instead, I set up a constant loop that calculates where I am. This works somewhat well. Except it's a little jerky with the slight delay in the scroll script.

UPDATE: I've updated the JavaScript once more to now calculate the available window height. If I don't have enough then the comments area can be found in it's usual spot underneath the comments. Try resizing the window to test it out. Next on the to-do list: add support for IE.

UPDATE (Feb 23, 2007): The code is available in this article on handling onscroll.

Published April 26, 2005 · Updated September 17, 2005
Categorized as JavaScript
Short URL: https://snook.ca/s/358


27 Comments · RSS feed
Calrion said on April 27, 2005

Hmm, this sounds like a bug (in Firefox) to me.

I'm not aware of the exact semantics of 'onScroll', but it seems reasonable to expect that the event fires when you scroll the page. Since using the mouse wheel definately scrolls the page (you can use the scrollbar for this?), I'd say Fx should definately fire onScroll when the wheel's used.

Have you tested the behaviour in other browsers?

Oh, and I'm definately FOR the new comment box. It looks great!

Jonathan Snook said on April 27, 2005

Calrion: it's definitely a bug. I checked BugZilla and they know about it and are working on it. Hopefully it'll show up in 1.0.4.

Jonathan Snook said on April 27, 2005

Oh, and in using the comment form on my own site... it's true: you don't really look for it on the sidebar. It took me a half-second to find it! I might adjust the sidebar style to make it more noticeable.

Ben Kennedy said on April 27, 2005

Very nice.

There is a bit of a jump the first time that the JS kicks in to reposition the div (it at first scrolls slightly out of view and then corrects), but I suppose that's unavoidable.

In Firefox 1.0.3 on Mac, the mouse wheel works with onScroll properly (although it seems to take half a second to react after I roll the wheel, but I think that's just Ffx being junky).

Sywan said on April 28, 2005

Anything you do to further enhance the sidebar will just be that much more added usability.

I didn't notice your comment block right away either but once you start scrolling the magic happens. It was a very pleasant experience. Very good idea, users will definately get a kick out of it.

simianstar said on May 06, 2005

I have had troubles working with the onscroll event in Firefox. however I have been tinkering with the idea of using an timer checking the position of the scroll bar as a hack.

ps the comment box idea is fantastic. but it seems you are overestimating the size you need for the comment box by a fraction and sadly it isnt appearing although it has room.

Jonathan said on May 06, 2005

The overestimation is the calculation of the comment box if it were at the top of the page (which includes the search box and the background). I'll have to look into revising that and possibly adjusting the style of the comment area to make it more compact.

Peter said on May 31, 2005

No comment, just a test.

Anders said on June 04, 2005

Another test, just curious

Ioannis Cherouvim said on June 10, 2005

I found a small bug, but I dont know if you know about that one yet. Resize this page to something small (lets say 800x600). The horizontal scroll bar will pop up. Now instead of using the horizonal scroll bar, press the middle button of your button (or the wheel) and drag the mouse to the right and see what happens.

Dean Edwards said on June 22, 2005

Apparently, you are always redesigning this site. So is there any way you could provide a permanent example of this comment system. It's pretty damn cool.

Dean Edwards said on June 22, 2005

The search system is ace too. :-)

Jonathan Snook said on June 22, 2005

Dean: that's a good idea. I'll try to put up a permanent example this evening of what I had originally done. I didn't think I would redesign so quickly after posting this article. :)

Cormac said on January 07, 2006

I'm now using FF1.5. On your page for "experimentation with position:fixed", the comment box doesn't appear at all. (Which is I'm replying on the wrong page.)

Obviously it's working fine on the "Onscroll isn't always onscroll" page. Otherwise I wouldn't be able to tell you this :-)

Alexandre Lafrance-Drouin said on February 13, 2006

This design is really kewl and so is the comment box, really well done. Gratz!

said on March 03, 2006

nbmbvmbvnmbnmvbm m

Mark said on March 03, 2006

I think you guys are looking for the onMouseWheel event. If you use onMouseWheel in conjunction with onMouseScroll it works fine.

Ken said on April 05, 2006

Your new article is suffered from the peekobo IE bug. It could be fixed by setting the height of the container to 1%.

Luke said on July 26, 2006

very nice site design... i like the light switch... good work!!

Silver said on February 04, 2007

This doesnt work with IE?

quite nice with FFOX, with new version of FFOX the bug u speak of is already fixed :)

shima said on February 14, 2007

hello,i need a code that moves the scroll horizonally
can you help me please?

Simon said on February 22, 2007

Can you tell me how to get this working in IE as it is a really cool feature?

Jonathan Snook said on February 23, 2007

I've posted the code to do the horizontal and vertical scrolling in an article on handling onscroll.

hello said on September 05, 2007

hello, cool site, i love your work this is my blog: http://yandex.ru - look at it now!

hello said on September 05, 2007

hello, cool site, i love your work this is my blog: http://yandex.ru - look at it now!

Roarmakag said on February 15, 2009

Да, довольно интересная статья.

Roarmakag said on February 15, 2009

гордах, это тоже тема и история, пересмотрите темы.Я почту просматриваю, мне шлют не пойми что, не знаю кто, столько мусора, может оно и нужно, но не в дневнике.Я так понимаю, дневник это часть твоей души.Нам дается право выбирать - пользуйтесь. А информация бесполезной не бывает

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.