Prevent body from scrolling on mouswheel, but not the texarea

问题

Here is an example: http://jsfiddle.net/cB3jZ/15/

When you scroll to the bottom of the textarea with your mousewheel, it continues to scroll the rest of the page.. How can i prevent that!?

When i mouseover the textarea i could disable scrolling intierly with this script: https://stackoverflow.com/a/4770179/973485 But i still want the textarea to be scrollable.

http://jsfiddle.net/cB3jZ/15/

Hope you can help! :=)

回答1:

I found out the it only continues scrolling if the outer container if it is the body tag. So if you this it works!

<style>
   body,html {height:100%;}
   #fakeBody {height:100%; overflow:auto;}
</style>
<body>
<div id="fakeBody">
    <!-- popup with a textarea inside -->
</div>
</body>

http://jsfiddle.net/cB3jZ/34/

回答2:

Using the jQuery mousewheel plugin:

jQuery(function($) {
    $('textarea')
        .bind('mousewheel', function(event, delta) {      
            if (this.scrollHeight && this.scrollHeight <= $(this).height() + $(this).scrollTop() && delta < 0){ 
               event.preventDefault()
            } else if($(this).scrollTop()===0 &&  delta > 0){
               event.preventDefault()
            }
        });
});

I have to warn you that it doesn't work in IE7 or older (but it doesn't throw errors, so its cool)

http://jsfiddle.net/cB3jZ/36/

来源：https://stackoverflow.com/questions/8827911/prevent-body-from-scrolling-on-mouswheel-but-not-the-texarea

标签

javascript