StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>In jquery, the <a href="http://api.jquery.com/scroll/" rel="nofollow"><code>.scroll()</code></a> listener...</p> <blockquote> <p>is a shortcut for <code>.on( "scroll", handler )</code>...</p> <p>The scroll event is sent to an element when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and elements with the overflow CSS property set to scroll (or auto when the element's explicit height or width is less than the height or width of its contents).</p> </blockquote> <p>In other words, it will fire for a div with a scroll bar when the user scrolls it.</p> <p>However, <a href="http://api.jquery.com/on/" rel="nofollow">be warned</a> </p> <blockquote> <p>...high frequency events such as <code>mousemove</code> or <code>scroll can</code> fire dozens of times per second, and in those cases it becomes more important to use events judiciously.</p> </blockquote> <p>You mention scrolling down, which will require computation and memory between the event handles. This puts you in danger of harming performance with a naive scroll handler.</p> <p>I would suggest the following approach:</p> <ol> <li>Don't do the work in the <code>.scroll</code> handler itself, just use it as a catalyst for starting the work.</li> <li>Have the scroll handler remove itself, so it doesn't keep firing all the time, once you've determined the event is a downward scroll.</li> <li>Instead, set a timeout to re-check whether or not the user is still scrolling down.</li> <li>If they've stopped scrolling, remove your css from the class in question and re-add the scroll handler to the DOM element in question, so if they scroll again, you're good to go.</li> </ol>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload