Im having an issue where setting momentum scrolling on my web app seems to break the jQuery scroll event listener.
Here is the CSS:
html, body {
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
Here is the Javascript:
$(window).scroll(function (event) {
alert('Im scrolling!');
});
The above CSS allows for momentum scrolling on the iPhone.
Problem:
The JQuery event listener is not firing with "overflow-y: scroll" on html,body.
Removing "overflow-y: scroll" from html,body allows the JS scroll event to fire, but momentum scrolling is lost on the iPhone.
Attempted Solutions:
Having searched for solutions I found this topic: overflow-x: hidden is breaking jquery scroll event which says that removing "height: 100%" from html,body will allow the JS scroll event to fire. Doing this DOES fire the event but I loose momentum scrolling once again.
Summary:
Above CSS rules give momentum scrolling but break the jQuery scroll event listener. Removing any of the CSS rules from html,body allows the jQuery scroll event to fire but momentum scrolling is lost.
How can I keep momentum scrolling AND allow the scroll event to fire?
