Menu
How can I prevent scroll bubbling?
The following example isn't work:
<!DOCTYPE html>
<html>
<head>
<title>Scroll Bubbling</title>
<style>
#menu {
width: 80px;
height: 150px;
background: red;
overflow: auto;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function isScrollOnBound( scrollContainer ) {
if ( $( scrollContainer ).scrollTop() === 0 ||
$( scrollContainer ).scrollTop() + $( scrollContainer ).innerHeight() >= $( scrollContainer )[0].scrollHeight ) {
return true;
} else {
return false;
}
}
$(function() {
$( '#menu' ).on( 'scroll', function(e) {
if ( isScrollOnBound( this ) ) {
e.stopPropagation();
}
});
$( window ).on( 'scroll', function(e) {
alert( 'stopPropagation not working' );
});
});
</script>
</head>
<body>
page 1<br />page 2<br />page 3<br />page 4<br />page 5<br />page 6<br />page 7<br />page 8<br />page 9<br />page 10<br />page 11<br />page 12<br />page 13<br />page 14<br />page 15<br />page 16<br />page 17<br />page 18<br />page 19<br />page 20<br />page 21<br />page 22<br />page 23<br />page 24<br />page 25
<div id="menu">
menu 1<br />menu 2<br />menu 3<br />menu 4<br />menu 5<br />menu 6<br />menu 7<br />menu 8<br />menu 9<br />menu 10
</div>
page 26<br />page 27<br />page 28<br />page 29<br />page 30<br />page 31<br />page 32<br />page 33<br />page 34<br />page 35<br />page 36<br />page 37<br />page 38<br />page 39<br />page 40<br />page 41<br />page 42<br />page 43<br />page 44<br />page 45<br />page 46<br />page 47<br />page 48<br />page 49<br />page 50
</body>
</html>
517
Here's why what you're trying to do doesn't work. It's not supposed to.
I've come across one reliable method to achieve what, I'm guessing, you want.
Example | Code
var menu = $('#menu')
menu.on('mousewheel', function(e, d) {
if((this.scrollTop === (menu[0].scrollHeight - menu.height()) && d < 0) || (this.scrollTop === 0 && d > 0)) {
e.preventDefault();
}
});
Note: It does work in IE as well, it's just that when JSFiddle includes the plugin, IE returns a mime mismatch error. IE sucks.
115
You need to bind touchmove to the document (I think) and return false, meaning don't do anything. Only bind this when needed (when scrolling in your div) then unbind it as scrolling finishes.
I had the same issue with the parent being scrolled when I don't want it to and this is the only way I could solve it.
Do the following when you need the document to not scroll:
$(document).bind('touchmove', function(){
return false;
});
And unbind when you are done:
$(document).unbind('touchmove');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
