After some researches I found out that I have to set the tbody of a table
display: block;
overflow: auto;
to enable scrolling on a html table.
Is there a possibility to hide the scrollbar generic on every modern browser (Chrome, Safari, Firefox)? I tried some solutions like this one but it doesn't work on a table.
Use overflow: hidden; to hide the content outside of the container, or overflow: visible; to display it even if it's going outside of the container borders. Both remove the scrollbar.
You can remove scrollbar easily by using the following CSS class:
.overflow-hidden {
overflow: hidden;
}
If you are using Bootstrap just use overflow functionality. Find docs here
<div class="overflow-hidden">...</div>
.hideScrollbar::-webkit-scrollbar{
display: none;
}
<div class='hideScrollbar'></div>
Just add the next css code
/* width */
::-webkit-scrollbar {
width: 15px;
}
/* Track */
::-webkit-scrollbar-track {
border-radius: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: transparent;
}
We hope this help
Related
I've been searching all day to override this annoying iphone problem with scrollbars
so I've this very simple example
.scroller {
background: lightblue;
height: 1000px;
max-width: 400px;
margin: 90px auto;
padding: 40px;
}
.page {
max-height: 90vh;
overflow: scroll;
background: navajowhite;
}
<div class="container">
<div class="page">
<div class="scroller">
lorem ipsum
</div>
</div>
</div>
which just an html divs with overflow scroll this works very well on web and android chrome but for some reason on iPhone(chrome and safari) this scrollbar is not showing at all.
short story
I was missing with codepen for a while until my mind was blown when I saw the scrollbar is showing on the (html, css, js) snippets boxes on iPhone so I decided to investigate a little on this website and learn how they managed to get it to work on iPhone, I learned that it was a scrollbar actual element that simulate the movement of the actual scrollbar. I tried to make it work this way but I just gave up, that was a lot of work and it wasn't worth it.
I also tried -webkit-overflow-scrolling: touch;
also if you want to take a deep look into the original website you can find it in here
I am open to any ideas.. (simple I hope)
If supported, modifying the ::-webkit-scrollbar style rules, will display the scrollbar on most devices permanently and not hiding them, like mobile browser defaults do.
Except Firefox and Internet Explorer, every commonly used browser, supports it.
There are some properties you can modify.
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }
And a lot of pseudo-class selectors, which allow for more specific selection of the parts.
:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive
Firefox supports CSS Scrollbars Module Level 1, but not the ::-webkit-options by now.
This might be helpful too:
https://stackoverflow.com/a/6165489/10304804
https://stackoverflow.com/a/54101063/10304804
Your example with minimalistic -webkit-scrollbar-style-rules:
.scroller {
background: lightblue;
height: 1000px;
max-width: 400px;
margin: 90px auto;
padding: 40px;
}
.page {
max-height: 90vh;
overflow: scroll;
background: navajowhite;
}
/* minimal */
.page::-webkit-scrollbar {
width: .5em; /* counts only for the vertical scrollbar */
height: .5em; /* counts only for the horizontal scrollbar */
}
.page::-webkit-scrollbar-track {
background: #ccc;
}
.page::-webkit-scrollbar-thumb {
background: #888;
}
.page::-webkit-scrollbar-thumb:hover {
background: #555;
}
<div class="container">
<div class="page">
<div class="scroller">
lorem ipsum
</div>
</div>
</div>
I want to have three different kind of scrollbar whose padding & margins are different.
Below is global style for my scrollbar:
/*
Modifying the scroll bar across the whole application
*/
/* width */
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
/* Track */
::-webkit-scrollbar-track {
border-radius: 10px;
width: 5px;
height: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #999999 !important;
border-radius: 10px;
}
::-webkit-scrollbar-track {
background: #d1d1d1 !important;
border: 1px solid #ebebeb !important;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
Now I want to have scroll bars with different padding & margin using classname or id. I don't want scrollbar padding and margin to effect padding & margin of content present in scrollbar. How can I write css in this manner which will put different padding for each scrollbar.
You can select that element the same way you selecting elements with css.
Select the container div and add your rules like this
<div class="container">
<div class="innerdiv"></div>
</div>
.container {
height: 300px;
width: 300px;
overflow-y: scroll;
}
.container .innerdiv {
height: 600px;
background:blue;
}
.container::-webkit-scrollbar {
width: 3px;
}
.container::-webkit-scrollbar-thumb {
background: black;
}
.container::-webkit-scrollbar-track {
background: red;
}
here is a working example -> https://jsfiddle.net/2fzpoycv/
Look Here is an Example
and its also here
read this URL may b this solve your query https://css-tricks.com/almanac/properties/s/scroll-padding/
Asked 19 hours ago in CSS by Marcelo Miranda (20 points).
I'm trying to build an image gallery and I want the slide buttons to be on the extreme edges of the page.
the problem is that the right button gets overlayed by the page's scrollbar.
Is there any way to prevent that? I've tried to use this but it makes no difference at all.
html {
overflow-y: scroll;
}
Have you tried making the scrollbar smaller?
.long-content {
height: 120vh;
font-size: 128px;
}
/* width */
::-webkit-scrollbar {
width: 3px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
<div class="long-content">Really Long Content</div>
So I have this strange problem, I have two div on one line (display:inline-block) and the first div appears on hover in a sliding effect. For this animation I need to set overflow:hidden, but it seems to break the my page.
I made a demo on JSFiddle
Have you ever face this problem ?
Thank you
NOTE: IE8+ compatible hints or solutions would be a huge plus
Code
HTML
<div class="container">
<div class="hello NoOverflow">Hello</div><div class="textWrapper">mytext</div>
</div>
<br>
<div class="container">
<div class="hello">Hello</div><div class="textWrapper">mytext</div>
</div>
CSS
.container {
background: #000;
color: #FFF;
}
.hello {
display: inline-block;
width: 40px;
background: #F00;
}
.textWrapper {
display: inline-block;
background: #090;
}
.NoOverflow {
overflow: hidden;
}
EDIT
For those who want the hover animation : JSFiddle Updated
You will see my problem by hovering the 2nd container (the JQuery "animate" call add a "overflow: hidden" property)
You need to specify vertical-align: top for your inline-block child elements.
When you specify overflow: hidden, you are triggering a new block formatting context, and its bottom edge will align with the baseline of the following inline element.
See demo: http://jsfiddle.net/audetwebdesign/7SZkN/
The relevant CSS to modify is:
.NoOverflow {
overflow: hidden;
vertical-align: top;
}
There is pretty much CSS2 so it should work fine in IE8+ (any browser that supports inline blocks).
Have you tried to float them left.
.container {
background: #000;
color: #FFF;
}
.hello {
/*display: inline-block;*/
float:left;
width: 40px;
background: #F00;
}
.textWrapper {
/*display: inline-block;*/
float:left;
background: #090;
}
.NoOverflow {
overflow: hidden;
}
I have this CSS:
.div {
background-color: red;
position: relative;
height: 414px;
overflow: auto;
width: 902px;
margin: 0px auto;
}
I tried with overflow-y: hidden;, scrollbar disappear but scroll isn't working. Hope you understand what I want...
Also, should I use auto or scroll? With auto I see horizontal bar too.
Here is JSFiddle: http://jsfiddle.net/sp95S/
Thanks!
Create an inner div: http://jsfiddle.net/sp95S/1/
.div {
background-color: red;
position: relative;
height: 214px;
overflow: hidden;
width: 452px;
margin: 0px auto;
}
#inner{
width: 100%;
overflow: auto;
height: 100%;
padding-right: 15px;
}
It seems like you want to have the page still scroll without the scrollbar showing.
This has been answered here a couple of times already:
hide scrollbar while still able to scroll with mouse/keyboard
Hiding the scrollbar on an HTML page
Basically you can use javascript (or jquery, though you don't necessarily need it). On webkit browsers, there is a function to hide the scrollbars:
::-webkit-scrollbar {
display: none;
}
but it won't work for firefox or internet explorer or opera.
If you want to hide the scrollbar, but keep the functionality, you can use:
/* 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 */
}
If you want to hide the scroll bar, but maintain scroll you can look into a plugin called slimscroll. The scroll bar is there but it can be configure to be rather un-noticable.
http://rocha.la/jQuery-slimScroll