I know there are tons of duplicates of this question, but none of these worked so far.
I have a div with unknown width which uses overflow-y: scroll, but I want to hide the scrollbar and keep it still scrollable. Its centered in the middle of the screen, how do I do that?
.content-middle {
margin: 0 auto;
text-align: center;
max-height: 81vh;
overflow-y: scroll;
}
<div class="content-middle">
<p>My content is here</p>
</div>
Basically what you want to do is put the scrollable element inside another element and position it absolute to the right. (with negative value)
Then just focus on the content of the scrollable element.
body {
overflow: hidden;
}
.content-middle {
margin: 0 auto;
text-align: center;
max-height: 81vh;
overflow-y: scroll;
position: absolute;
width: 100%;
right: -17px;
}
<div class="content-middle">
<p>My content is here</p>
</div>
#parent{
height: 100%;
width: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
}
This works look at this, you can scroll, but no scroll bar visible :)
all you would have to do is add a div outside of the one you already have.
http://jsfiddle.net/5GCsJ/2125/
div { overflow: visible | hidden | scroll | auto | inherit }
I am not sure if you can hide it, AND keep it scroll-able. I think this will work though.
Related
I'm trying to understand why the div rendered by the below markup cannot be scrolled vertically with the scroll wheel. It can be scrolled by dragging the scrollbar, or even by using the scroll wheel while hovered over the scrollbar.
If I remove either the overscroll-behavior: none or the overflow-x: hidden, the scrolling works as expected.
Why is this the case? Is there part of the CSS spec I can look at to better understand this interaction?
* {
overscroll-behavior: none;
}
.container {
width: 300px;
height: 100px;
overflow: auto;
}
.content {
height: 2000px;
background: red;
overflow-x: hidden;
}
<div class="container">
<section class="content"></section>
</div>
https://codepen.io/dyancat/pen/eYyyaNr
I think the issue is, that you are tying to scroll the container with focus on the content which is not scrollable. This is not possible with overscroll-behavior: none.
Please see the modified snippet, where you are able to scroll the container (green), but not the content (red), since the content is not the element which is scrollable.
* {
overscroll-behavior: none;
}
.container {
width: 300px;
height: 100px;
background: green;
overflow: auto;
}
.content {
height: 2000px;
width: 200px;
background: red;
overflow-x: hidden;
overflow-y: scroll;
}
<div class="container">
<section class="content"></section>
</div>
I have a problem with vertical scrolling on mobile devices, the page scrolls horizontally and the body height is set to 100vh, however i still can scroll down on mobile devices and it just messes up my content and shows some weird "loading" div
body{
overflow-x: scroll;
overflow-y: hidden;
width: 170vw;
max-height: 100vh;
}
How it looks after scrolling down:
how it should look:
Try setting height: 100vh instead of max-height and add position: relative like this:
body {
overflow-y: hidden;
height: 100vh;
position: relative;
}
/** CSS BELOW IS JUST FOR SHOW **/
div {
background: grey;
width: 200vw;
height: 200vh
}
<div></div>
Also, there is no need for the overflow-x. It will be automatic.
Okay, i've found the solution! adding !important fixed the issue
body{
overflow-x: scroll !important;
overflow-y: hidden !important;
width: 170vw;
max-height: 100vh;
}
body{
position: fixed;
top: 0;
bottom: 0;
}
I think this will fix it too....
I want horizontal overflow and when the screen width is not that wide the DIV starts scrolling right - left, but I want it to look not that ugly I have it right now (scrollbars in the bottom of the div).
.wrapper {
position: relative;
overflow-x: scroll;
overflow-y: hidden;
}
.content {
margin: 0 auto;
width: 1198px;
}
HTML
<div class=wrapper>
<div class=content">
My content here..
</div>
</div>
And the other question - is there setting for CSS what allows "swipe" for the div instead of "drag and move".. ?
For a pure CSS solution with browser support you could use the combination of ::-webkit-scrollbar and some padding like this:
.wrapper {
width: 100%;
height: 400px;
position: relative;
overflow: hidden;
}
.content {
width: 100%;
height: 100%;
overflow: auto;
padding-right: 17px; /* This hides the right scrollbar */
padding-bottom: 17px; /* This hides the bottom scrollbar */
}
.content::-webkit-scrollbar {
display: none;
}
<div class="wrapper">
<div class="content">
<img src="https://via.placeholder.com/1500x700" />
</div>
</div>
Better to play around with in JSFiddle: https://jsfiddle.net/thepio/pavb2hfy/
My container is not touching my footer for the majority of cases and I'm not sure what's going on.
So here is my CSS code:
html {
min-height: 100%;
position: relative;
}
body {
margin: 0;
width: 100%;
height: 100%;
}
section {
height: 100%;
}
#container {
overflow: auto;
width: 80%;
margin: 0 auto;
background: red;
height: 100%;
}
.footer {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
Here's my HTML:
<body>
<div id="container">
<section>
<p>Content goes here</p>
</section>
</div>
<div class="footer">Content</div>
</body>
So I have all of the heights set for parent elements,but there's still a big gap between the container and the footer. In cases where the content takes up the whole page, the footer and container ends up touching, but the content for some reason gets lost in the footer. How can I solve this issue?
Height based on percentage are tricky. vh is much better for such purposes.
Here is the solution: JSfiddle
#container {
overflow: hidden;
width: 80%;
margin: 0 auto;
background: red;
height: 100vh;
}
Make one adjustment to your CSS:
Add height: 100% to the html element.
html {
height: 100%; /* NEW */
min-height: 100%;
position: relative;
}
This will clear the way for all child elements to recognize their percentage heights, and the container will expand. Your min-height: 100% will still work because min-height overrides height.
DEMO: http://jsfiddle.net/au6tcodc/
(You'll notice a vertical scrollbar on the container in the demo. This is caused by the overflow: auto declaration in #container. If you want to remove the scrollbar switch to overflow: hidden (see all overflow values).
First of all, take a look at this: http://jsfiddle.net/Udvgm/
HTML:
<div id="container">
<div id="tooWide">
<p>This is just way too wide! We should clip it.</p>
</div>
<div id="relativeParent">
<div id="absoluteChild">
<p>text</p>
</div>
</div>
</div>
<div id="container2">
<p>This is some text which should be overlapped.</p>
</div>
CSS:
#container {
background: grey;
width: 450px;
}
#relativeParent{
height: 40px;
width: 400px;
position: relative;
background: green;
}
#absoluteChild{
position: absolute;
width: 100px;
height: 60px;
top: 0px;
left: 10px;
z-index: 2;
background: blue;
}
#tooWide {
background: red;
width: 600px;
}
I am wondering if it is possible for the blue box (#absoluteChild) to overflow outside the grey box (#container), but the overflowing parts of the red box (#tooWide) to be hidden.
Before you suggest it, using overflow: hidden; overflow-y: visible; (or overflow-x: hidden; overflow: visible;) causes the browser to throw in some unwanted scrollbars.
Unfortunately, it's not possible in your circumstances.
Before you suggest it, using overflow: hidden; overflow-y: visible;
(or overflow-x: hidden; overflow: visible;) causes the browser to
throw in some unwanted scrollbars.
From the spec:
The computed values of overflow-x and overflow-y are the same as
their specified values, except that some combinations with visible
are not possible: if one is specified as visible and the other is
scroll or auto, then visible is set to auto.
A helpful page with examples and a better explanation: http://www.brunildo.org/test/Overflowxy2.html
When you have a block with overflow: hidden and a block with position: absolute inside of it, until block with overflow and all parents of absolute positioned block have position: static, the absolute positioned block won't be hidden.
I don't know that you want to do with your code, but if you want to position some block from the block with overflow, you can move positioning context outside of the block with overflow, so absolute positioned block would be visible and could be positioned around.
Here is a fiddle: http://jsfiddle.net/kizu/Udvgm/3/