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.
Related
Codepen link: [removed for privacy]
(Ignore the search button, I am mainly concerned with results displayed within it's parent element of #results_container).
On the actual app, results will be generated based on a search term,
I have the overflow set to "scroll", but as you can see, the bottom result still overflows. What gives?
#results_container {
height: 430px;
overflow: scroll;
margin-top: 5px;
}
The unwanted "bottom result still overflows" seems to be due to the height: 100%; CSS definition for the #wrapper div.
If you remove "height: 100%; from #wrapper, I think you'll see the results you were looking for.
Also, notice that the #wrapper div expands and collapses as the browser's display is expanded and collapsed. Once the height: 100%; is removed from #wrapper, the #wrapper height does not change.
I made a fork from your codepen.
#sidebar {
border: 1px solid black;
width: 40%;
margin-top: 22px;
height: 93%;
overflow-y: hidden;
}
#results_container {
height: 430px;
overflow: auto;
margin-top: 5px;
}
Here the full example: codepen fork
I have a box with content-based width (position: absolute). But "overflow-y: auto" inserts a scrollbar that doesn't make container wider unlike the "overflow-y: scroll". I need auto overflow and auto width including scrollbar. Is there a solution?
.container {
position: absolute;
max-height: 100px;
overflow-y: auto;
}
http://jsfiddle.net/mw552cxf/
try to add overflow: hidden; to each item :
.item {
border: 1px solid blue;
overflow: hidden;
}
Edit : ok so the solution who sweets your need wold be this , use word-wrap:
.item {
border: 1px solid blue;
word-wrap: break-word;
}
Live Demo
Live Demo 2nd solution
How about adjusting the width of .container in the CSS?
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'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;
}