How can I disable window scrolling but leave scrollbar visible?
I usually use overflow:hidden;. But when I do that the window scrollbar disappears. I'm looking for a way to disable scrolling but keep the scrollbar visible.
Wrap your content in a div that has max-height:100% and overflow:hidden. Body tag needs the overflow:auto or overflow-y:scroll.
Related
Whenever I scroll on the sidebar (which is position fixed) it should disable the page from scrolling. It doesn't mean that the body should be overflow hidden or hide the scrollbar on the body or page itself. It should just prevent the whole body/ page from scrolling when place the cursor on the sidebar and try to scroll it. The sidebar on the other hand doesn't need to have a scrollbar or more content inside it.
I have a codepen with the layout made with html and css/sass. But I'm not sure if this problem can be solved with pure css or if javascript is needed.
I'm using full-screen modals on my site on mobile. The problem is that touching the modal will cause the body page to move even though it's overflow:hidden;
Here's what bootstrap says about that:
Support for overflow: hidden on the element is quite limited in
iOS and Android. To that end, when you scroll past the top or bottom
of a modal in either of those devices' browsers, the content
will begin to scroll.
What can I do to prevent that?
Setting the body to position:fixed causes the scroll to jump to the top in an ugly way. What's the best solution if anyone came up with one?
I had the same question myself before.
What I did is changed the body to overflow:hidden and fixed height equal to modal height and remembered document scroll position. After closing the modal, I've applied remembered scroll position back and height to auto.
It is so complicated because I needed my modals to be bigger than window and I wanted to be able to scroll the modal.
Ok, so here's what I have: http://jsfiddle.net/E2U3j/
And as it's a pretty large div, I'd like to have a fixed horizontal scroll bar on the top of the window when I'm scrolling into that div, but if I'm not completely into the div (e.g If the div is only visible a half,I mean if it doesn't fill the whole height of the window), the horizontal scroll bar should be in the top of the div... How would you solve this?
Thanks :)
Try jQuery Scrollbar with external scrollbar (available on advaced scrollbars demo page) - scrollbar can be placed in any part of your page, you can hide/show it, make it fixed, etc...
The one thing you need is to handle window scroll and check current scroll position, compare it to your container offset and if it's greater - make scrollbar fixed, if not - change position to absolute (in case when scrollbar is inside of your container).
this code should solve your problem<div id="topnav" style="position:fixed; max-height:x; overflow-y:scroll;"></div> then the contents of your top nav is scrollable within itself and is fixed on the top of your page
I need to disable ANY kind of vertical scrolling within an overflown DIV (I would still be able to scroll it horizontally).
overflow:hidden with CSS won't work since you can still scroll with the mouse wheel click / smartphone touch scroll. The only thing this does is hide the scroll bar, not disable it.
Is there any way to do this with Javascript or jQuery?
Thanks in advance.
Have you tried reducing the height of the div so there is no where to scroll.
You could put the screen height into a variable (or slightly less) and then make the div the same height therefore cutting off any content with the overflow hidden.
I am making a responsive tool with an iframe. It does not display the correct width because of the scrollbar. Here's what I want to do. I want to hide the scrollbar in the iframe(it will then show the correct width), then I would like it to somehow be scrollable from a scrollbar outside of the iframe. Is this possible???