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%'
});
-
1Can you provide a fiddle of this?sjahan– sjahan2017-10-20 12:27:22 +00:00Commented Oct 20, 2017 at 12:27
-
Maybe, you could find this question useful : Hiding the scrollbar on a HTML page3Dos– 3Dos2017-10-20 12:29:55 +00:00Commented Oct 20, 2017 at 12:29
Add a comment
|
3 Answers
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
Comments
Try this:
$('html, body').css({
overflow: 'hidden',
height: '100%'
});
And in the text area add:
style="overflow:scroll;"
Comments
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~
