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
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>
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'm trying to mimic the behavior of overflow-y:hidden to overflow-x, but it doesn't behave the same way. overflow-x:hidden doesn't allow to scroll (by dragging the mouse).
See: http://jsfiddle.net/Gxm2z/
#container {
width: 300px
}
#modules {
height: 50px;
padding: 5px;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.module {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background: #ddd;
}
How can I achieve the same result without a scroll bar? I'm ok with a javascript/jQuery plugin.
The plan is to use arrows, and maybe a custom scrollbar
this is my solution CSS based - simple and nice on all devices, no need for additional JS.
add fixed height and overflow hidden to parent element (in your case #container)
enlarge height of #modules - this create enough place hidden under parent element for scrollbar (because of smaller #container height, this place is invisible)
using -webkit-overflow-scrolling:touch; is good choice, make nice behavior on iPad and iPhone
#container {
width: 300px;
height: 60px;
overflow: hidden;
}
#modules {
height: 90px; /* 40px - more place for scrollbar, is hidden under parent box */
padding: 5px;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
live demo: http://jsfiddle.net/s6wcudua/
#modules {
height: 50px;
padding: 5px;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
display: none;
}
}
This only work in webkit based browsers.
You could try using the ::-webkit-scrollbar pseudo element, like shown here.
http://iscrolljs.com/
Best Javascript custom scrollbar available, in my opinion. It will work great in Mobile, IE9+ and modern browsers. Plenty of options and callbacks. And yes, you can disable the visible scrollbar, but still retain horizontal scrolling.
I'd like the scrollbar within my "article" DIV to be always visible. I tried the code below but without success (scrollbar only shows up when I start scrolling down). I'm using safari latest version. Thanks
.article {
float: right;
text-align:justify;
width: 400px;
height: 450px;
padding: 60px 82px 49px 82px;
position: relative;
z-index: 15;
margin-top: 90px;
background: #fff;
/* max-width: 25%; */
overflow:scroll;
overflow-y: scroll;
}
Try using
overflow-y: scroll !important;
It's used to cover IE errors, but might give it a shot. Have you tried other browsers?
I've got a list with certain height, and need to make it scroll to show the rest vertically.
So I added overflow-y: hidden; to the list.
But the submenu can't be visible, and a horizontal scrollbar showed.
Is there any solution?
code here
Simply increase the width of the .wrapper
.wrapper {
margin: 20px;
background: gray;
color: white;
width: 400px;
height: 100px;
/* I need overflow-y auto,but I also need to display the submenu*/
overflow-y: auto;
overflow-x: visible;
}