StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POLock body scrolling on div mouseover but maintain position
text
Body
copied!<p>I know there are a few other questions relating to this (including one from me a while ago), but I'm looking for a way to improve the only solution I've found to work.</p> <p>I'm trying to make it so that I can use the mouse wheel for scroll a height limited and <code>overflow: scroll;</code> <code><div></code>, and one that will continue to work when the <code><div></code> is contained within a <code><div></code> whose content comes from an AJAX call.</p> <p>On my web travels I happened upon this fiddle: <a href="http://jsfiddle.net/mrtsherman/eXQf3/33/" rel="nofollow">http://jsfiddle.net/mrtsherman/eXQf3/33/</a>. Unfortunately I cannot get this to work when the data is called from an AJAX call - I have no idea why this is happening, so if anyone is aware of this issue I'd appreciate some advice!</p> <p>I've gone a little off topic though, because my question relates to the only solution I've found that at least works: onmouseover class adding.</p> <p><strong>DIV</strong></p> <pre><code><div onmouseover="$('html').addClass('noscroll');" onmouseout="$('html').removeClass('noscroll');" style="overflow:auto;max-height: 200px;">Data that is long</div> </code></pre> <p><strong>CSS Class</strong></p> <pre><code>html.noscroll { position: fixed; overflow-y: scroll; width: 100%; } </code></pre> <p>I've been using this code thinking it worked flawlessly, however I've just found that on smaller monitors it throws up a much more annoying issue: jumping back to the top of the screen!</p> <p>It seems that when the <code>position: fixed;</code> is triggered it does disable the scrollbar and keep it visible (which I want) but it also moves the scrollbar all the way to the top again, and as my scrollable div is half way down the page it makes it impossible to use.</p>

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