What CSS is required to make the browser's vertical scrollbar remain visible when a user visits a web page (when the page hasn't enough content to trigger the scrollbar's activation)?
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
This makes the scrollbar always visible and only active when needed.
Update: If the above does not work then just using this may.
html {
overflow-y:scroll;
}
Make sure overflow is set to "scroll" not "auto." With that said, in OS X Lion, overflow set to "scroll" behaves more like auto in that scrollbars will still only show when being used. So if any the solutions above don't appear to be working that might be why.
This is what you'll need to fix it:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
You can style it accordingly if you don't like the default.
Things have changed in the last years. The answers above are not valid in all cases any more. Apple is pushing disappearing scrollbars everywhere. Safari, Chrome and even Firefox on MacOs (and iOs) only show scrollbars when actually scrolling — I don't know about current Windows/IE. However there are non-standard ways to style scroll bars on Webkit (IE dropped that a long time ago).
html {
overflow-y: scroll;
}
Is that what you want?
Unfortunately, Opera 9.64 seems to ignore that CSS declaration when applied to HTML or BODY, although it works for other block-level elements like DIV.
html {height: 101%;}
I use this cross browsers solution (note: I always use DOCTYPE declaration in 1st line, I don't know if it works in quirksmode, never tested it).
This will always show an ACTIVE vertical scroll bar in every page, vertical scrollbar will be scrollable only of few pixels.
When page contents is shorter than browser's visible area (view port) you will still see the vertical scrollbar active, and it will be scrollable only of few pixels.
In case you are obsessed with CSS validation (I'm obesessed only with HTML validation) by using this solution your CSS code would also validate for W3C because you are not using non standard CSS attributes like -moz-scrollbars-vertical
body { height:101%; } will "crop" larger pages.
Instead, I use:
body { min-height:101%; }
An alternative approach is to set the width of the html element to 100vw. On many if not most browsers, this negates the effect of scrollbars on the width.
html { width: 100vw; }
I was able to get this to work by adding it to the body tag. Was nicer for me because I don't have anything on the html element.
body {
overflow-y: scroll;
}
Setting height to 101% is my solution to the problem.
You pages will no longer 'flick' when switching between ones that exceed the viewport height and ones that do not.
body {
min-height: 101vh;
}
works the best for me
I do this:
html {
margin-left: calc(100vw - 100%);
margin-right: 0;
}
Then I don't have to look at the ugly greyed out scrollbar when it's not needed.
html { height:initial!important; }
You may not need the !important - depends on what CSS is in place.
Related
I have a div with lines to separate different sections, with a scrollbar on the x axis. I have a feature so that when the user hovers over the div, the scrollbar thumb shows. However, the scrollbar track leaves a white line across the bottom of the div. I tried background: none; and setting the background to a transparent image. Is there any way to fix this?
code sand box: https://codesandbox.io/s/festive-hermann-xejx0?file=/src/App.js
div::-webkit-scrollbar{ background: 0}
div:hover::-webkit-scrollbar{ background: #aaa; height: 25px }
div:hover::-webkit-scrollbar-thumb{ background: #fff; border-radius: 10px}
Unfortunately, css is inconsistent and "0" cannot be replaced with "none".
It is -webkit- It has only partial support, for chrome and Opera works, for IF and FF (which I can't test right now) you may add without any prefix
div::scrollbar{ background: 0}
After all, it will look different on different devices - as always with limited support. You can do your best for supported browsers, but one always comes out with a white bar (which isn't ugliest thing in the world).
I'm afraid there's nothing else to do with css. I don't use js so I won't start to reinvent the syntax, especially since I'm not sure if the scrollbar track is reachable by js.
If you are very determined there are always some CSS tricks like - add a curtain with position: relative; bottom: 10px or maybe a very funky box-shadow, but I think it's not a good practice, but rather a headache ...
Maybe - this dark filter should be darker from the bottom?
It doesn't work because a div cannot have both
overflow-y: visible;
overflow-x: scroll;
overflow-y gets changed to auto. Therefore the vertical lines cannot overflow outside of the div vertically.
Its also not recommendable to use ::-webkit-scrollbar as it has poor compatibility.
As you are using react, you should instead look at using a Progress bar on scroll component.
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/
Is there a way to prevent scrollbar from pushing content, or the entire page to the left with pure css?
I mean no hacks or anything.
I tried two javascript solutions:
1) Set body to overflow hidden, store the body.offsetWidth in a variable, then overflow visible and then subtract that offsetWidth with the current body.offsetWidth and apply the difference to the right margin.
2) Calculate the offsetWidth and apply it on the wrapper div on every resize.
What didnt work:
1) Position absolute.
2) Floating everything to the left was a bad idea.
3) Leaving the scrollbar visible (Looks bad).
4) Overflow-y hidden makes things user unfriendly.
There are a lot of ways to go around this issue though normally you won't mind a little push to the left:
Give overflow-y: scroll to body and make sure always there is a scrollbar.
Make use of the fact that viewport width includes the scrollbar while percentages do not account for it:
a. Giving width: 100vw to body element, or
b. Giving margin-left: calc(100vw - 100%) to the html element so that scrollbar or not, you have a fixed area to work on.
There is even a deprecated overflow: overlay property that draws over the page instead of shifting it to the left.
Just give your body a width of 100vw like this:
body{
width: 100vw;
}
Even though all the answers above are correct, I stumbled upon this issue and I had to come up with another solution.
Since my content width takes up the whole page and it has some properties to justify in the center, it was being pushed to the left and these options didn't prevent it from happening.
What fixed the problem for me was to add a padding of the size of the scroll when the scroll is added on hover.
I tested on Chrome and Edge. It's not a perfect fix but it is enough for what I need right now.
.scrollable {
width: 100%;
height: 91vh;
overflow: hidden;
padding: 0px !important;
}
.scrollable:hover {
width: 100%;
height: 91vh;
overflow-y: auto;
padding-left: 16.8px !important;
}
Unfortunately there is no other way to prevent your problem.
Just use
body {
overflow:hidden;
}
As an alternative, I recommend you to use a Framework for custom scroll bars. Or disable the scrollbar as shown in the above snippet and emulate it with an absolute positioned and some JS.
Of course you will have to consider calculating the height of the page and the offset of the scrollbar thumb.
I hope that helps.
To disable the horizontal scrollbar, you can use overflow-x, so it won't affect your vertical scroll:
body {
overflow-x: hidden;
}
Just set overflow-x to hidden on the element that has the scrollbar (usually this would be the body or the immediate children of it).
I had the same problem on my nextjs app which already had overflow-x set to hidden on the body. The below solution worked for me
#__next{
overflow-x: hidden;
}
I'm trying to put an iframe into a webpage, but no matter what I try to put in either the iframe properties or the custom CSS section of the website builder (or how many times I try to add !important to anything from width to right-margin), I can't get the iframe to extend rightward further than the page's preset width.
Here's an example of the page and iframe that I'm working with: (Edit: no longer available)
I need that script/iframe to be wide enough to show the search area. It seems pointless to copy and paste code and attributes I've tried setting, because nothing I do seems to have any effect, but just for showing how much I have no idea what I'm doing, here's my iframe code:
<iframe id="idxFrame" style="padding:0; margin:0; padding-top: 0px; overflow-x:auto;
width:1000px!important; border:0px solid transparent; background-color:transparent;
max-width:none!important; right-margin:-200px!important" frameborder="0"
scrolling="on" src="http://www.themls.com/IDXNET/Default.aspx?wid=8MSsp7Pf9eI55yjkDuB%2blX5awn7LnnVXh5PNYhq2ImAEQL"
width="1200px" height="900px">
</iframe>
The "Website Builder" that I'm forced to use to make these kinds of pages is infuriating, but it does have a "Custom CSS" area where I can input additional CSS information. Is there something I could generically use to set iframes to their own widths?
The reason it is being cut off is because there are some parent containers in the page structure that have the attribute overflow: hidden; to ensure content that is too wide doesn't break the layout.
I don't know how your system works but you could try adding the following code to your Custom CSS area:
.LayoutContainer {
overflow: visible !important;
}
.LayoutContainer div div {
overflow: visible !important;
}
Be aware that it will mess with your layout and spawn a horizontal scroll-bar on smaller screens.
Update:
The above CSS would affect your entire website. If you really want to go through with it, use the following CSS instead to make sure only this page is affected. The system generates a unique ID number for every page and we're taking advantage of that.
body#page_33219e82-0110-40bb-a172-3d05dc78f406 .LayoutContainer {
overflow: visible !important;
}
body#page_33219e82-0110-40bb-a172-3d05dc78f406 .LayoutContainer div div {
overflow: visible !important;
}
I believe your problem is that your are using right-margin when you should be using margin-right
Here is what I modified to get it to work and here is a screenshot: http://screencast.com/t/R2VeIAnNJVd
.LayoutContainer { overflow: visible; }
.LayoutContainer div div { overflow: visible !important; }
As stated above and as seen in the screenshot, you can see that the iframe extends out past your content wrapper.
I have a Silverlight video player that I want to display in a "100% browser width/height" mode (i.e. not fullscreen, but filling up the entire browser display area).
Regular player: http://play.nimbushd.com/lfu53b5
Fullscreen version: http://play.nimbushd.com/lfu53b5/fullscreen
I have tried nearly every node in the DOM and set width/height to 100%, with margin: 0px, padding: 0px. Seems to work great in Firefox. Why, then, does IE display a vertical scrollbar with a little whitespace at the bottom?
Edit: Since this issue is fixed, the short explanation: A 100% height/width Silverlight control within an ASP.NET <form> tag spills over just a bit in IE because of the form tag.
This behavior is caused by inline elements within the <form> - inline elements always render a line-height worth of pixels. Any of the following CSS rules will fix it:
form { font-size: 0; }
or
form * { display: block; }
Alternatively, you could try to get rid of all inline descendants of <form> (this includes text nodes) - but I'm not sure it would actually work (not tested). Plus it would render your markup hard to maintain (you'd need to strip all newlines and such... could be done during deployment, but I think this is taking it too far).
You need this this styling in you html:
<style type="text/css">
html, body {
height: 100%;
overflow: hidden;
}
body {margin: 0px}
</style>
Note that this applies a style to both html and body to enforce the height of html element to the viewport height and therefore also the body.