Although I've come across a few discussions about this topic before (including one of my own), I'm still searching for an improvement on the only solution that has actually worked for me.
My goal is to enable mouse wheel scrolling for a height-limited <div> with overflow: scroll; and ensure that it continues to work even when the <div> is within another <div> whose content is loaded via AJAX.
During my online journey, I stumbled upon this fiddle: http://jsfiddle.net/mrtsherman/eXQf3/33/. Unfortunately, I haven't been able to make it work with data fetched through AJAX - I'm baffled by this issue, so any guidance would be greatly appreciated!
However, my current dilemma revolves around the only functional solution I've found: adding a class onmouseover.
DIV
<div onmouseover="$('html').addClass('noscroll');"
onmouseout="$('html').removeClass('noscroll');"
style="overflow:auto;max-height: 200px;">Long data</div>
CSS Class
html.noscroll
{
position: fixed;
overflow-y: scroll;
width: 100%;
}
I had thought this code was flawless until I discovered a major inconvenience on smaller screens: it keeps jumping back to the top of the screen!
It appears that activating position: fixed; not only disables the scrollbar but also repositions it at the very top, making it impossible to use as my scrollable div is midway down the page.