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>
Related
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>
I've created a website with a flexbox-based structure. My goal was to have the entire viewable page filled by divs, but to avoid letting any divs push below the lower limit of the browser window. One of my divs should scroll when the text overflows, but in Firefox it instead affects the entire page.
Here is my HTML:
<div class="header_bar">header</div>
<div class="page_grid">
<div class="pg_nav">nav</div>
<div class="pg_main">This is the div that should scroll</div>
<div class="pg_sidebar pg_sidebar2">sidebar</div>
</div>
And here is my CSS:
html, body
{
padding: 0;
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
}
.header_bar
{
flex: 0 0 auto;
}
.page_grid
{
flex: 1;
display: flex;
}
.pg_nav
{
width: 25%;
}
.pg_main
{
width: 50%;
overflow-y: auto;
}
.pg_sidebar
{
width: 25%;
}
Everything works completely fine in Chrome and Safari, but there are problems when I load the website in Firefox. I created a pen of the site here. Does anyone have any advice on how to make this show up the same across all three browsers?
Thanks so much!
As stated above by magenetwd, this is a known firefox bug, when I added min-width:0;min-height:0; to .page_grid, the problem solved.
.page_grid
{
flex: 1;
display: flex;
color: #FFFFFF;
/* Firefox bug fix styles */
min-width:0;
min-height:0;
/* End of Firefox bug fix styles */
}
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
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
I am currently having trouble adding a border & border-radius onto my layout. I've tried a bunch of different things, but can't get it to work. Please help me. I will provide the HTML & CSS source code below.
HTML:
<div class="colmask fullpage">
<div class="col1">
<!-- Column 1 start -->
...content goes here...
<!-- Column 1 end -->
</div>
</div>
CSS:
/* column container */
.colmask {
position: relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear: both;
float: left;
width: 100%; /* width of whole page */
overflow: hidden; /* This chops off any overhanging divs */
}
/* 1 column full page settings */
.fullpage {
background: #fff;
}
.fullpage .col1 {
margin: 0 1em;
}
I hope this is what your after, instead of using
border: 1px;
try
box-shadow: 0 0 2px 0 #000000;
jsfiddle.net/XYwc4/1