How to disable scroll on a particular element with jquery

Question

I want to know how i can disable scroll on (Window), but allow scrolling on text area. I tried this code but it totally disable everything:

$('html, body').css({
    overflow: 'hidden',
    height: '100%'
});

Answer 1

A setup like this might work for you?

<div class="container">
    <h1>heading</h1>
    <div class="scrollable">
        Text that will scroll. Text that will scroll. Text that will scroll. Text that will scroll. Text that will scroll. Text that will scroll. Text that will scroll. Text that will scroll. Text that will scroll.
    </div>
</div>

<style>
.container {height: 110px; width:100px; overflow:hidden;}
.scrollable {overflow:auto;width:100%;height:30px}
</style>

here is a codepen https://codepen.io/idlethumbs/pen/WZmEgQ

Answer 2

Try this:

$('html, body').css({
    overflow: 'hidden',
    height: '100%'
});

And in the text area add:

style="overflow:scroll;"

Answer 3

I write this for mobile web page...

Prepare a function to prevent scroll event

var touchScroll=function(event){event.preventDefault();};

Binding to some element, when you touch this element, make document not to scroll.

$('#your_element').click(function()
{$(document).bind('touchmove', touchScroll)});
document.ontouchmove=function(e){e.preventDefault();} //Add this for take effect in iOS Safari, confirmed on iOS 12.x

Unbind

$('#your_element').click(function()
{$(document).unbind('touchmove', touchScroll)});
document.ontouchmove=function(e){return true;} //Restore event in iOS Safari

Hope this helps~