So I've hidden my scrollbar on Chrome with this piece of code:
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
And I found that the best way to hide it in Firefox is to set margin-right: -16px on the parent div. And in Firefox, that looks great. However, the issue is now in Chrome because it moves the entire content inside the parent div to right. If I try to fix it by adding margin-right: 16px to the container inside the parent div, then it messes things up in Firefox.
I'm sure you've encountered this before, but is there anything I can do to fix this? Any known solutions?
Thanks!
If you just want to visually hide the scrollbar and still allow user to scroll with mouse or keyboard, you can try the following css:
html {
overflow: -moz-scrollbars-none;
}
You can just give padding only for chrome
::-webkit-scrollbar {
width: 0px;
background: transparent;
-webkit-padding-end: 16px;
}
Or just set -webkit-padding-end: 16px; on the parent div .
And you can use the same idea on Firefox also , Just setup this
#-moz-document url-prefix() {
parent div {
margin-right: -16px;
}
}
So the margin get only Firefox and you don't anything to change .
#-moz-scrollbars-none If you go to https://developer.mozilla.org/en-US/docs/Web/CSS/overflow and look at the Mozilla Extensions section, it says that "-moz-scrollbars-none" is "an obsolete API and is no longer guaranteed to work." Better to go with an approach that is more stable.
Related
I'd like for my divs to not have that white area (where the scroll bar thumb appears). I'm not sure how to recreate this because it appears randomly on chrome and safari.
this is the div
.column-content{
height:60vh;
padding: 10px 3px 0 3px;
overflow:scroll;
touch-action: none;
#media screen and (min-height:1100px){
height: 70vh;
}
}
I need it scrollable but I also don't want that ugly white bar to show up... I've tried setting the webkit scroll track on my index.html file but it doesn't do anything.
maybe you are searching for the webkit-scrollbar ?
.column-content::-webkit-scrollbar {
display: none;
}
but as it is webkit, it's not compatible with all browsers.
aslo you set overflow:scroll, do you need scrolling on the two axis ? if not, you can consider setting it to auto.
Throughout my site at http://www.chrissansom.net there's a basic layout problem that occurs in Safari/Windows only, not even Safari/Mac - and it's fine in Chrome, Firefox and Opera on both platforms as well as in IE (current versions). It may well be something fundamental I'm doing wrong, but if so all the other browsers are very forgiving!
Inside the <body>, below a header div, there's <div id="contentbox"> with no style attributes at all. Inside that there's <div id="leftmenu"> which is floated left, followed (in the code) by <div id="rightmenu"> which is floated right, followed in turn by <div id="maincontent">, which appears between the two menus. It's styled as follows:
div#maincontent {
margin-left: 200px; /* space for leftmenu */
margin-right: 200px; /* space for rightmenu */
padding: 20px;
overflow: hidden;
/* border: 1px solid green; */
}
(The border is only there for testing.)
In all those other browsers including, I stress, Safari/Mac and Chrome/both (which shares the WebKit code with Safari, no?) it behaves perfectly, but in Safari/Windows div#maincontent acquires an extra right margin of about 400px. The size of this margin remains constant when I resize the window (until the whole thing gets too narrow).
I've found that if I remove the overflow property the extra margin is gone and it looks right, but this interferes with other elements on various pages, which are pushed down below the left menu, so I'm fairly sure I need it.
Any ideas what might be going on here? Am I barking up the wrong tree entirely?
In your case, you can easily solve the problem deleting the margins and setting the position to relative:
div#maincontent {
position:relative;
padding: 20px;
overflow: hidden;
}
I have a menu div on the left of my page (choptlogic.com), and in firefox and chrome it scrolls a bit, which I don't want it to do. In Safari, its perfect doesn't scroll at all. I've looked to see if any elements have excess padding that might be causing something, but the header class has an autoflow-y set to auto, so I'm a bit lost as to what might be causing this.
any help greatly appreciated!
thanks!
If you've got an element that is scrolling unnecessarily you can try to hide the overflow using CSS:
div {
overflow: hidden;
}
At line 8995 add in your rule overflow:hidden
.header-inverse #page, .header-inverse .header, .header-inverse .header__inner-wrap
{
background-color: #09769f;
overflow: hidden;
}
I'm having trouble figuring out why border-radius is gone from my #screen element when using chrome but not firefox or ie9?
I have all the different prefixes for each browser plus the standard border-radius:
www.cenquizqui.com
The upper content box that holds the pictures, called #screen
a copy paste of screen's css:
#screen {background: none repeat scroll 0 0 #EEEEEE;
display: block;
height: 300px;
position: relative;
width: 960px;
overflow:hidden;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;}
Is it because chrome does not handle the 'trimming' of the images properly? I thought it was only a problem when you had the actual tags inside the rounded corner container, not when the img is called as background-image through css.
Regards
G.Campos
Here's a workaround that will fix the current chrome bug:
.element-that-holds-pictures {
perspective: 1px; /* any non-zero value will work */
}
This won't affect the display at all (unlike the opacity:0.99 workaround - which is great workaround, too, by the way).
Webkit cannot handle border-radius cropping for children and grand-children+. It's just that bad. If you want border cropping, it has to be directly on the div the image is placed on without going any deeper down the hierarchy.
There is a much simpler solution.
Just add overflow:hidden to the container that has the border-radius and holds the child elements. This prevents the children 'flowing' over the container.. Thus fixing the problem and showing the border-radius
Try the following css to the child elements of the element with border-radius set:
opacity:0.99;
It solves the problem and doesn't change the opacity much.
This worked perfectly for me.
It looks like you need to apply the border radius to the li element:
#slides li {
display: block;
float: left;
height: 300px;
width: 960px;
position: relative;
border-radius: 10px;
}
It very much does have a border radius:
(I just added a border with Chrome's dev toolbar.)
The border radius doesn't restrict its contents to within the resulting area—the space outside the corners are still occupiable by the element's contents.
My recommendation would be to overlay an image that had the corners cut out like that (and then use a map or whatever you feel comfortable with to still enable the left/right arrows).
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.