I'm using this CSS code in order to customize my scroll bar style:
::-webkit-scrollbar {
width: 8px;
} /* this targets the default scrollbar (compulsory) */
::-webkit-scrollbar-track {
background-color: black;
} /* the new scrollbar will have a flat appearance with the set background color */
::-webkit-scrollbar-thumb {
background-color: #59e5f6;
border-radius: 10px;
} /* this will style the thumb, ignoring the track */
::-webkit-scrollbar-button {
background-color: black;
} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
::-webkit-scrollbar-corner {
background-color: black;
} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
body {
scrollbar-face-color: black;
}
It works great on Chrome, but not other browsers.
Do you have any idea how to fix that?
It's not supported in IE, Edge and Firefox by default.
Here is screenshot from documentation
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
Note: You can use javascript libraries like
perfect-scrollbar
Related
I have a grid who needs to be scrollable horizontally and vertically.
I want to hide (not disable scrolling function) vertical scrollbar only.
Tested solution 1
/* Hide scrollbar for Chrome, Safari and Opera */
.k-grid-content::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.k-grid-content {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
This solution hide all scrollbars
Tested solution 2
overflow-y: hidden
This solution prevents from scrolling
How can I hide vertical scrollbar only without losing the ability to scroll ?
Is it even possible ?
Customizing scrollbars is a cross-browser compatibility problem as Firefox limits you a lot.
For WebKit browsers you can set the width and height on scrollbars!
::-webkit-scrollbar
{
width: 0;
height: 8px;
}
This hides the vertical scrollbar but keeps the horizontal. It also removes default scrollbar style, so it needs to be corrected.
::-webkit-scrollbar
{
width: 0;
height: 1.2rem;
}
::-webkit-scrollbar-track
{
background: white;
}
::-webkit-scrollbar-thumb
{
background: hsl(0, 0%, 60%);
}
body
{
width: 1500px;
height: 1000px;
background: url('https://random.imagecdn.app/1920/1080');
}
Interactive Code
It's possible. Since we don't have your HTML, here's some sample HTML for the sake of the example:
<div>
<p>scroll down!</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>scroll up!</p>
</div>
This is the CSS that would allow you too accomplish the vertical scrolling without a scrollbar(Although I don't know how well this works for accessibility):
/* hide scrollbar but allow scrolling */
div {
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
overflow-y: scroll;
}
div::-webkit-scrollbar {
display: none; /* for Chrome, Safari, and Opera */
}
/* other styling */
div {
border: solid 5px black;
border-radius: 5px;
height: 300px;
padding: 10px;
width: 200px;
}
* {
background-color: #EAF0F6;
color: #2D3E50;
font-family: 'Avenir';
font-size: 26px;
font-weight: bold;
}
I figured out how to hide the scrollbar globally in an Angular app, but I ran into a scenario in my actual project where I need to hide the default scrollbar in a singular Angular component but have the default scrollbar visible in other components. ::host seems to not solve this problem. If anyone knows how to solve this problem, I would greatly appreciate the feedback! Also, if possible, I would love a CSS solution as I feel there shouldn't be any crazy solutions & or hacks to solve this. I made a quick stackblitz below...
https://stackblitz.com/edit/angular-ivy-syr7do?file=src/styles.css
Use this
*::-webkit-scrollbar {
width: 0px !important;
background-color: white !important;
}
*::-webkit-scrollbar-thumb {
width: 0px !important;
background-color: whitesmoke !important;
border-radius: 0px !important;
}
*::-webkit-scrollbar:horizontal {
width: 0px !important;
background-color: white !important;
}
*::-webkit-scrollbar-thumb:horizontal {
width: 0px !important;
background-color: whitesmoke !important;
border-radius: 0px;
}
Replace * with a specific class/id if you want.
Dont forgot to add overflow:auto
Try this:
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for Internet explorer and Edge */
.example {
-ms-overflow-style: none;
}
For hiding scrollbar in body globally put
body::-webkit-scrollbar {
display: none;
}
in your CSS file.
And using custom scrollbar in the other component, you just need to wrap in a container your content and set your custom scrollbar.
Here is the a demo.
I have a burger class and I want to use overflow property to scroll. But when I use it this is how it looks:
I want to have that scrolling effect, but at the same time, I don't want those scroll bars to appear sidewise:
Here is my css class:
.Burger
{
width: 100%;
margin: auto;
height: 250px;
text-align: center;
overflow: scroll;
font-weight: bold;
font-size: 1.2rem;
}
Does anyone know what else can I add in these properties to hide that side scrolling bars. I want the affect to be present but not the bars, like this:
To hide your scrollbars but keep scrolling
Add this to your code
/* Hide scrollbar for Chrome, Safari and Opera */
.Burger::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.Burger {
overflow-y: scroll; /* Add the ability to scroll */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
also see this W3Schools
and the Browser compatibility for ::-webkit-scrollbar
.burger{
overflow: scroll; /* Add the ability to scroll */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* Hide scrollbar */
.burger::-webkit-scrollbar {
display: none;
}
Try This I Guess this helps if it's what you're looking for
Also see at W3Schools
I have a fixed header and container div has scroll.
On click of a button I'm trying to add dynamic content on top it. Expected behavior is when dynamic content is added on top of button, button should be pushed down to make space for new element. This works fine in Firefox. But in Chrome button stays at the same place and browser scrolls upward.
Here is the codesandbox
https://codesandbox.io/s/nifty-allen-gtklp
Scroll down and click on the toggle button. Observe the behavior in Chrome and Firefox.
Anybody knows why the behavior is different?
in mozilla, you should use:
body{
overflow-y : scroll;
scrollbar-color: blue;
scrollbar-width: thin;
}
in chrome use:
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
I'd like to recreate this horizontal rule:
I have the double lines, but I'm not sure how to go about getting some kind of a character or image in the center. I'm thinking I might be able to use :before and :after, but I don't know how to utilize them in this case. For the sake of answering the question, let's just try and get the center character to be a character. I'll figure out the image/icon later.
Ideas? Here's my code for the lines:
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #444;
border-bottom:1px solid #444;
margin:25px 0px;
}
Here's a screenshot of what I was able to produce. See it in action at jsfiddle.net.
And here is the CSS:
body {
background: #454545;
}
hr {
font-family: Arial, sans-serif; /* choose the font you like */
text-align: center; /* horizontal centering */
line-height: 1px; /* vertical centering */
height: 1px; /* gap between the lines */
font-size: 1em; /* choose font size you like */
border-width: 1px 0; /* top and bottom borders */
border-style: solid;
border-color: #676767;
margin: 20px 10px; /* 20px space above/below, 10px left/right */
overflow: visible;
/* ensure 1px gap between borders */
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
-o-box-sizing: content-box;
box-sizing: content-box;
}
hr:after {
content: "ยง"; /* section sign */
color: #999;
display: inline; /* for vertical centering and background knockout */
background-color: #454545; /* same as background color */
padding: 0 0.5em; /* size of background color knockout */
}
/* opera doesn't render correctly. hide section sign */
x:-o-prefocus, hr:after {
content: "";
}
The section sign
To add the section sign, you can use generated content with either :before or :after. The remaining tricky parts are horizontal centering, vertical centering, and knocking out the borders.
Horizontal centering
Horizontal centering is as simple as adding text-align: center to the hr and making sure the generated content is display: inline.
Vertical centering
Vertical centering requires a little knowledge of inline rendering. The vertical space consumed by a line of text is determined by line-height. Even if the line-height is much smaller than the size of the rendered character, the character is still displayed full size, but the space it takes up is dictated by the line-height. Using line-height: 1px achieves the vertical centering.
Knocking out the borders
Finally, the only way I know of to knock out the borders behind the section sign is to cover them up with another color. In this case, we use the same background color as is on the rest of the document so it seems to blend in. Set an appropriate background-color and then use left and right padding to control how much space is to either side of the section sign.
1px gap between the borders
You'll also notice that I'm setting box-sizing: content-box. This is to ensure that the gap between the borders is 1px. (An alternative but equivalent set up would be box-sizing: border-box; height: 3px;.)
Opera rendering bug
#cimmanon pointed out some Opera rendering bugs, so I decided to degrade gracefully and not show the section sign. I think showing just the lines still looks very tidy and professional. If you really want to get this working in Opera, you could use different markup like <div class="hr"></div> (and of course update the CSS to match).
Here is what I believe to be the most responsive, lightweight and modern version for when the symbol isn't a font.
Snippet
hr.hr--logo {
border-top: solid #000 1px;
margin: 50px 0;
}
hr.hr--logo:after {
content: url( 'logogram.svg' );
/* Controls the position of the logo */
left: 50%;
position: absolute;
transform: translateY(-50%) translateX(-50%);
/* Controls the whitespace around the symbol */
padding: 20px;
background: #fff;
}
<hr class="hr--logo">
Since you have some css already might aswell give it a background image and a height:
hr {
... your css ...
background:url(path to your image) no-repeat center;
height:15px;
}
It's goofy, but you could try to do two half-width HRs with non-breaking space, and the image between them.
<hr><img><hr>
where there's no spacing or line breaks between the tags.