Hide scrollbar but still scrollable in CSS
i try ::-webkit-scrollbar { display: none; } this is working only Google Chrome but i want all browser
so please help me?
I tried this on Firefox, Chrome, and Opera using CSS only. All work fine with it.
* {
/* hide scrollbar for firefox */
scrollbar-width: none;
}
/* hide scroll bar for chrome and opera */
::-webkit-scrollbar {
display: none;
width: 0px;
}
*::-webkit-scrollbar { width: 0px; }
Related
This hides the scrollbar on Safari, but not on Chrome, why?
.inner-scrolling::-webkit-scrollbar,
.inner-scrolling::-chrome-scrollbar {
display: none;
}
Anyway, I did set up inner scrolling like this:
.inner-scrolling {
overflow: scroll;
height: calc(100vh - 64px);
}
.inner-scrolling::-webkit-scrollbar{
width: 0;
}
By applying width 0 to scrollbar, will hide scrollbar.
and for moz we can add scrollbar-width: none;
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 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;
My CSS code below is working fine in Chrome, but isn't working in Firefox. I think it might just be a syntactical difference but I can't figure out what is going on. Are there any mistakes in my CSS code below?
#framed_source {
background-color: white;
display: block;
height: 97%;
width: 100%;
padding: 0px;
}
#grey_cover {
position: fixed;
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
top: 0px;
left: 0px;
background-color: #3F3F3F;
/* Transparency is applied through the transparent class */
}
#popup_window {
background: #D0E9F3;
visibility: visible;
border: 1px solid #666;
padding-top:20px;
padding-bottom:20px;
padding-right:20px;
padding-left:20px;
}
.with_frame {
position: absolute;
width: 600px;
}
#popup_window_content {
overflow: auto;
color: #1F313E;
font-family: Calibri;
max-height: 200px;
}
.transparent {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%;
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}
Basically I have a popup window that is displaying on top of an iframe. In Chrome it does this correctly, in FF it displays the popup beneath the iframe. Any ideas? I think it has to do with absolute / relative positioning.
Picture of Firefox -- Incorrect CSS
Picture of Chrome -- Correct CSS
I also created a JSFiddle for this CSS with the corresponding HTML. I am trying to get the blue box appearing below the frame to appear centered in front of the frame.
So, in the end this is what was wrong.
Having <iframe> above the popup in the html structure somehow messed up with the positioning of the popup.
Since html and body were just hanging out there, they didnt stretch all the way to the bottom and restricted iframe from going further as its height was set with percentage.. ( This is something i do remember fixing at some point.. but it was already past midnight when i was checking into it, so who knows where that disappeared :D )
http://fiddle.jshell.net/CH6ny/6/
I don't exactly know why, but when I upgraded to Firefox 5 the issue resolved itself. Thank you everyone for all your time anyway!
To get something to appear on top of another, you will need to set the z-index values and I think also set the position.
For the element that you want to be on top, set the z-index value like this:
#idOfTopElement {
z-index: 1;
}
#idOfNextElement {
z-index: 2;
}
You might need to add position: relative; or position: absolute; to one or both of those depending on what position you are using, but I can't remember for sure.
If you are not completely against a javascript/jQuery solution, here is an option that might work. I chose to do the top and left adjustments onload, but it would make more sense to do it when you call the creation of the popup_window:
http://jsfiddle.net/CH6ny/4/
It worked in Chrome, FF, IE, and IE quirks mode.