Is it possible to disable scroll for the page, and only enable for a specific div inside the page?
Add a comment
|
4 Answers
to disable it use:
css
.disableScroll{
overflow-y:hidden;
overflow-x:hidden;
}
just add <body class="disableScroll"> to the disable
inline style <body style="overflow:hidden">
for div use, leave scrolling enabled <div style="overflow:auto;">
Keep in mind that you can use overflow-y for vertical scroll and overflow-x for horizontal scroll properties
2 Comments
kumarharsh
why not just
overflow:hidden instead of overflow-x and y ?
Tatarin
@Harsh to give more flexibility, in case he wants to disable vertical vs horizontal
It's ok a css only solution?
If so, just add overflow: hidden to body and overflow: auto to the scrollable div.
body {
overflow: hidden;
}
#scroller {
overflow: auto;
height: 100px;
}
5 Comments
Caspert
Absolute, css would be great. I have tried your code, it's working, but the scrollbar is hidden after the content. Also some items are not completely visible in the div #scroller.
patrick
what do you mean with the scrollbar is hidden after the content?
Caspert
The browser scrollbar is after the content, so I can't use it anymore.. @patrick
patrick
can you pleas give me a screenshot?
Vineesh TP
'overflow: auto;' did the secret.
for whole page:
body {
height: 100%;
width: 100%;
}
for div for example:
div.scroll {
width:180px;
height:170px;
overflow:auto;
}
in html:
<div class='scroll'></div>
2 Comments
Broxzier
Make sure the BODY and HTML tags have no padding and margin, otherwise
width: 100%; and height: 100% would push the edges out of bounds and create scroll bars anyway.Caspert
Hi @ArtsiomMitrokhin I have tried your codes. It's working, but when I reach the top or bottom you will see that you are able to scrolling. Only at bottom and top when reach the bottom of the content area with the class of scroll.
HTML:
<div class="scrollDisable"></div>
CSS:
.scrollDisable{
overflow-y:hidden;
overflow-x:hidden;
}
For whole page :
body {
height: 100%;
width: 100%;
}
Hope this will be helpful.
1 Comment
Eduard
Enable for specific div, disable for page.