I'm trying to make the scrollbar of a div (not the entire body) always visible, it works everywhere except on Safari & Chrome on iOS.
It looks like ::-webkit-scrollbar doesn't work on iOS.
The CSS that I've tried, that works everywhere but on iOS:
::-webkit-scrollbar {
width: 20px;
background: red;
}
Do you know any workaround to make it work? Do you know why iOS doesn't support that?
Thanks!
Try:
html,
html > * {
-moz-overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
body::-webkit-scrollbar {
width: 20px;
background: red;
}
Hope this works.
I have a react app and I want to remove the scrollbar if the user on a windows machine, regardless of browser being used. I tried to implement a function to get the user's OS (which works well) and then conditionally render some css using styled components but it does not seem to work (wondering if it is just an issue with my styled component?). Here is a snippet from my app component:
// getOS will pass 'win64' as a string to the OuterContainer if the user is browsing from windows
<OuterContainer os={getOS()}>
<ConnectedRouter history={history}>
<Fragment>
<Header />
<Routes />
<Footer />
</Fragment>
</ConnectedRouter>
</OuterContainer>
export const OuterContainer = styled.div`
position: relative;
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
${({ os }) => os !== 'mac' &&
css`
&::-webkit-scrollbar {
display: none;
}
`
}
`;
In order to remove the scrollbar you can set a css property called overflow with value hidden.
Like this:
overflow: hidden;
Check the documentation about this property: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
To hide the scrollbars, but still be able to keep scrolling, you can use the following code:
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
Webkit browsers, such as Chrome, Safari and Opera, supports the non-standard ::-webkit-scrollbar pseudo element, which allows us to modify the look of the browser's scrollbar. IE and Edge supports the -ms-overflow-style: property, and Firefox supports the scrollbar-width property, which allows us to hide the scrollbar, but keep functionality.
Make sure which browser you are testing it, and if you keep getting error, try to set a fixed height value.
If you want to keep the scrolling functionality and just hide the scrollbar use:
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
width: 0px;
height: 0px;
}
I've set up my own custom scrollbar with CSS, and I'd like to know know how to only apply these settings to my vertical crossbar.
I've looked up other posts to fix this, but haven't been successful in implementing their solutions in my project.
Any fix that either removes my horizontal scrollbar completely or resets its settings to default would be greatly appreciated.
Here's my code:
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
background-color: rgb(26, 23, 23);
}
::-webkit-scrollbar-thumb {
background-color: hsl(270, 2.9%, 48.7%);
border-radius: 20px;
border: 6px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: hsl(270, 2.9%, 78.7%);
}
edit: The problem seems to have been related to other pre-built styles overriding overflow-x. overflow-x: hidden !important; solved the issue.
The questioner have faced a problem that a WebKit engine won't allow him to remove customized horizontal scrollbar.
It seems that the implementation of such a removal vary from one browser to another and there's no universal way to hide scrollbars.
Using overflow: hidden will disable the scroll and that’s not what we want.
So we’ll need another way to hide the scrollbar.
Unfortunately, there is no universal CSS property that does something
like this
div {
scrollbar-visibility: hidden; /* <--- I wish we had this one !! */
}
We’ll need to implement different CSS properties for each browser.
For Firefox, we can set the scroll-bar width to none.
scrollbar-width: none; /* Firefox */
For IE, we’ll need to use -ms prefix property to define scrollbar style
-ms-overflow-style: none; /* IE 10+ */
For Chrome and Safari. We’ll have to use CSS scrollbar selector.
Then apply display: none to hide it.
::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
Or you can set it’s width and height to 0.
::-webkit-scrollbar {
width: 0;
height: 0;
}
https://redstapler.co/css-hidden-scrollbar-while-scrollable-element/
Nevertheless, the following solution took effect in questioner's situation:
overflow-x: hidden !important;
I'm using tumblr. And I use the following code to change the cursor for the main body and hover on links:
body, a { cursor:url("http://i.imgur.com/2qleX.jpg"), auto}
a:hover { cursor:url("http://i.imgur.com/IepP2.jpg"), auto}
But it doesn't seem to affect the scrollbar I have added to one of the containers, which is:
overflow-y: auto;
overflow-x: hidden;
The cursor simply changes back to the default browser cursor when I hover/click the scrollbar. How do I customize the cursor for the scrollbar???
This code will customize the scrollbar
Here I'm adding a cursor image when we hover the scrollbar
This example will only work in webkit browsers like Chrome, Safari and Opera but not in Firefox or Edge/IE.
This is a non-standard way.
body::-webkit-scrollbar-thumb {
cursor:url("http://i.imgur.com/2qleX.jpg"), auto;
}
p {
/* force scrollbar */
height: 200vh;
}
<p></p>
and also you can customize the Scrollbar completely,
Use this
body::-webkit-scrollbar {
/*it will edit the scrollbar area*/
}
body::-webkit-scrollbar-track {
/*it will edit the scrollbar path*/
}
body::-webkit-scrollbar-thumb {
/*it will edit the scrollbar thumb which we use to scroll*/
}
This question was asked before but the solution is not applicable in my case. I want to make sure certain background images are printed because they are integral to the page. (They are not images directly in the page because there are several of them being used as CSS sprites.)
Another solution on that same question suggests using list-style-image, which only works if you have a different image for every icon, no CSS sprites possible.
Aside from creating a separate page with the icons inline, is there another solution?
With Chrome and Safari you can add the CSS style -webkit-print-color-adjust: exact; to the element to force print the background color and/or image
Browsers, by default, have their option to print background-colors and images turned off. You can add some lines in CSS to bypass this.
Just add:
* {
-webkit-print-color-adjust: exact !important; /* Chrome, Safari 6 – 15.3, Edge */
color-adjust: exact !important; /* Firefox 48 – 96 */
print-color-adjust: exact !important; /* Firefox 97+, Safari 15.4+ */
}
I found a way to print the background image with CSS. It's a bit dependent on how your background is laid out, but it seems to work for my application.
Essentially, you add the #media print to the end of your stylesheet and change the body background slightly.
Example, if your current CSS looks like this:
body {
background:url(images/mybg.png) no-repeat;
}
At the end of your stylesheet, you add:
#media print {
body {
content:url(images/mybg.png);
}
}
This adds the image to the body as a "foreground" image, thus making it printable.
You may need to add some additional CSS to make the z-index proper. But again, its up to how your page is laid out.
This worked for me when I couldn't get a header image to show up in print view.
You have very little control over a browser's printing methods. At most you can SUGGEST, but if the browser's print settings have "don't print background images", there's nothing you can do without rewriting your page to turn the background images into floating "foreground" images that happen to be behind other content.
The below code works well for me (at least for Chrome).
I also added some margin and page orientation controls.(portrait, landscape)
<style type="text/css" media="print">
#media print {
body {-webkit-print-color-adjust: exact;}
}
#page {
size:A4 landscape;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin: 0;
-webkit-print-color-adjust: exact;
}
</style>
Make sure to use the !important attribute. This dramatically increases the likelihood your styles are retained when printed.
#example1 {
background:url(image.png) no-repeat !important;
}
#example2 {
background-color: #123456 !important;
}
Like #ckpepper02 said, the body content:url option works well. I found however that if you modify it slightly you can just use it to add a header image of sorts using the :before pseudo element as follows.
#media print {
body:before { content: url(img/printlogo.png);}
}
That will slip the image at the top of the page, and from my limited testing, it works in Chrome and the IE9
-hanz
Use psuedo-elements. While many browsers will ignore background images, psuedo-elements with their content set to an image are technically NOT background images. You can then position the background image roughly where the image should have gone (though it's not as easy or precise as the original image).
One drawback is that for this to work in Chrome, you need to specify this behavior outside of your print media query, and then make it visible in the print media query block. So, something like this...
.image:before{
visibility:hidden;
position:absolute;
content: url("your/image/path");
}
#media print {
.image{
position:relative;
}
.image:before{
visibility:visible;
top:etc...
}
}
The drawback is that the image will often be downloaded on normal page loads, adding unnecessary bulk. You can avoid that by just using the same image/path you'd already used for the original, visible image.
it is working in google chrome when you add !important attribute to background image
make sure you add attribute first and try again, you can do it like that
.inputbg {
background: url('inputbg.png') !important;
}
Browsers, by default, have their option to print background-colors and images turned off. You can add some lines in CSS to bypass this. Just add:
* {
-webkit-print-color-adjust: exact !important; /* Chrome, Safari */
color-adjust: exact !important; /*Firefox*/
}
Note: It's not working on the entire body but you could speciy it for a inner element or a container div element.
You can use borders for fixed colors.
borderTop: solid 15px black;
and for gradient background you can use:
box-sizing: border-box;
border-style: solid;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-image: linear-gradient(to right, red, blue) 100%;
border-image-slice: 1;
border-width: 18px;
https://gist.github.com/danomanion/6175687 proposes an elegant solution, using a custom bullet in place of a background image. In this example, the aim is to apply a background image to an a element with class logo. (You should substitute these for the identifier of the element you wish to style.)
a.logo {
display: list-item;
list-style-image: url("../images/desired-background.png");
list-style-position: inside;
}
By including this within a
#media print {
}
block, I'm able to replace a white-on-transparent logo on the screen, rendered as a background-image, with a black-on-transparent logo for print.
You can do some tricks like that:
<style>
#page {
size: 21cm 29.7cm;
size: landscape
/*margin: 30mm 45mm 30mm 45mm;*/
}
.whater{
opacity: 0.05;
height: 100%;
width: 100%;
position: absolute;
z-index: 9999;
}
</style>
In body tag:
<img src="YOUR IMAGE URL" class="whater"/>