2

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! :=)

Community
  • 1
  • 1
BjarkeCK
  • 5,694
  • 5
  • 41
  • 59

2 Answers2

1

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/

Ivan Castellanos
  • 8,041
  • 1
  • 47
  • 42
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/

BjarkeCK
  • 5,694
  • 5
  • 41
  • 59