I make the scrollbar on a page always visible with:
html {
overflow-y: scroll;
}
On the other hand, I also want the scrollbar height increase automatically when opening a modal dialog that is longer than the page. However, the scrollbar height does not increase automatically. If I set overflow-y: auto; this makes the scrollbar hidden for the initial state that I do not like. Any idea to fix it?
Bootstrap's modal does an excellent job of this by hiding body overflow and using a fixed overlay.
body.modal-open{overflow:hidden}
/* this is the overlay */
.modal{position:fixed;top:0;bottom:0;left:0;right:0;}
.modal .modal-dialog{/* taller than window */}
Related
I have a div that may overflow as content is added or removed.
However the UI designer does not want a visible, but inactive scrollbar (as with overflow: scroll), and they don't want the content layout to change when one is added and remove (as with overflow: auto).
Is there a means to get this behavior, and considering the different scrollbars on different platforms and browsers.
https://jsfiddle.net/qy9a2r00/1/
No browser support this property yet (2021), but scrollbar-gutter is a suggested solution for this.
Update: 2022 - all modern browsers except Safari support the property.
The only way to do this is to make the width of the items in the container fixed. And you'll have to be conservative with the width of the scrollbar.
.container {
width: 200px;
height: 200px;
overflow: auto;
overflow-x: hidden;
border: 1px solid black;
}
.item {
width: 200px;
...
https://jsfiddle.net/fr1jnmn6/1/
overflow-y:overlay would be a partial solution to this as in, it solves the problem of not wanting the content layout to change when a scrollbar is added or removed. Extra padding or margin can be added so that scrollbar doesn't obfuscate the div behind
Here's the jsfiddle for the same https://jsfiddle.net/kitwradr/2qcsj6hw/
One cannot know how thick the scrollbar is, using only HTML & CSS and thus do not know the width of the (blue) placeholder.
You might solve such a task using scripting. Force a scrollbar in a hidden container and measure the inner and outer width. The difference being the scrollbar-width. Set this width (e.g. as CSS) to the placeholder element. And in the tricky part hide this element whenever a scrollbar is shown.
The usual solution to this problem is the one you do not want.
You can setup overflow: scroll to reserve space for scrollbar and add a class that makes scrollbar hidden
body {
overflow-y: scroll;
}
Hide the scrollbar by adding class to div (or to body) that will make your scrollbar transparent
.scroll-hidden::-webkit-scrollbar
{
background-color: transparent;
}
.scroll-hidden::-webkit-scrollbar-track
{
background-color: transparent;
}
To check if you have content overflow you can use this lines:
const { body } = document
const overflow = body.scrollHeight > body.clientHeight
If there are no overflow issue we will hide scrollbar and with reserve space
body.classList.add('scroll-hidden')
If content overflow we will show scrollbar
body.classList.remove('scroll-hidden')
Try the solution here https://jsfiddle.net/ycharniauski/y0pwftmq/
It's a bit hacky solution. Hope in future css will have some property to reserve space
You need to have a parent div with a fixed width (the final total width) and a child div with a width 16px smaller.
Then the scrollbar will have 16px free in the parent div.
The width should always be a number (can't be relative value). In the child div, you need to use a number as well. You can't do calc(100%-16px).
<div className="user-list">
<div className="user-list__content">
{content}
</div>
</div>
.user-list {
width: 500px; /* total width */
height: 1000x;
overflow-y: auto;
}
.user-list__content {
width: 484px; /* must be 16px smaller */
height: 100%;
}
This is an ancient question, but in case anyone comes looking.
Detect the scrollbar and show/hide your blue section based on the scrollbar being visible. If scrollbar is visible, HIDE your blue sections (apply a style). If not visible, show your blue padding section.
When the scrollbar becomes visible your padding hides, so the red and green sections will not change size or position.
This article below discusses detecting the scrollbar. You will want to set up a div somewhere to detect the current scrollbar width ahead of time in order to set your blue boxes to the same width.
How can I check if a scrollbar is visible?
Maybe append a div at the bottom will soft your problem ?
https://jsfiddle.net/moongod101/k7w574mw/1/
I have a bootstrap modal which has height more than the browser screen height. The requirement is that there should not be any vertical scroll bar for the modal exclusively. There can be one for the page. Another one is that the modal should move along with the background.
Now to achieve this and going through lot of similar questions I made the below changes to the modal class:
.modal{
position: from 'fixed' to 'absolute';
overflow-y: from 'auto' to 'hidden'
}
Although this solves my problems as no scroll bar is coming and the modal moves along with the background, the problem is that in smaller screens or screens having lesser resolution the content is getting lost/hidden. Adjusting the width is not a solution as I can never be sure what the resolution will be.
Thanks in advance.
May be your solution is below. just put these css to your stylesheet.
.modal-open{
overflow-y: scroll;
}
.modal-open .modal{
overflow-y: initial;
}
.modal{
position: absolute;
bottom:initial
}
View this live demo on jsfiddle
I am using bootstrap 3 in my project. I have a modal lightbox in my page there is some content in it. I just put height: 300px and overflow-y: scroll in it. But it is showing scrollbar background all the time even when the content height is below 300px. How can i fix this???
You need to use overflow-y: auto; instead of overflow-y:scroll;
(when auto is use it showing the scrollbar only when it need and not all the time)
I'm trying to make the main body of my site to have a fixed height (I think!).
Anyway, the site body is just white, with a border of size 1. Basically, the size of the body is determined by what's in it so, for example, it will resize automatically as more things are added.
What I want is vertical scroll bars so the body doesn't extend forever (is that right?). Should I have a fixed body size?
If you want vertical scroll bars you can use this in your CSS;
body {
height: 900px;
overflow-y: scroll;
overflow-x: hidden; /* hides the horizontal scroll bar */
}
What are you trying to accomplish? You sound unsure if you even want the scroll bars; is there a reason you want to show the scroll bars instead of just having the browser handle the scrolling when the content gets larger than the window?
Yes. You need a fixed height
body{
height: your-height;
overflow:auto;
}
will generate scroll bars only when you overflow the area without growing it vertically.
So, in your body create a layer:
<div id="mainbar">
</div>
And using CSS you can set the height:
div#mainbar {
min-height:100px;
overflow:auto;
}
The min-height guarantees the initial height that you need. Once it goes over that, it you will automatically have scrollbars. If you would rather the page itself scroll and the body lengthen, just take out the overflow line from the CSS.
If you want the vertical scroll bars to an inner div on your site (like so you can have a footer visible at all times), simple specify the height of the div:
#inner { max-height: 300px;
}
I think the default for the overflow is to scroll, but if your content is cutting cut off with no scrollbars, you could also set
overflow: auto;
I have a 4000px width image slap on the header of my site. for now, the way I hide the horizontal browser scrollbar is with this:
html
{
overflow-x: hidden;
}
Unfortunately that will make the horizontal scrollbar never appear. I would the browser scrollbar to appear when the main content of my site is hidden from view.
What is the technique/style for this?
Thanks
Put the image into a div with width: 100%, a defined height and overflow: hidden.
By the way, overflow-x is not supported by Internet Explorer 6, so it's not perfectly safe to use yet.