I have a site similar to fullPage.js where the page only covers the screen, no scrollbar with other words. However, the site contains links to modal windows with different kind of contents. What I wonder is if it's possible to make these modals scrollable considering that the rest of the site isn't.
If I force a vertical scrollbar I get the scrollbar on the site but, however, can't use it for some reason.
Here is the modal window:
$('#video-pop').click(function() {
$('#open-menu').fadeIn(350);
});
$('#close-menu').click(function() {
$('#open-menu').fadeOut(350);
});
#open-menu {
position: fixed;
width: 100%;
height: 100%;
z-index: 60;
background: #060606;
display: none;
}
.menu-content {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#close-menu {
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="video-pop">OPEN PAGE</div>
<div id="open-menu">
<div class="menu-content">
<div id="close-menu">CLOSE PAGE</div>
</div>
</div>
JSFiddle: https://jsfiddle.net/neaqs3bv/
Your #open-menu may have specified scrolling styles like that:
#open-menu {
/* ... your styles */
overflow: hidden;
overflow-y: scroll;
}
As you have it here, a scrollbar will never appear because open-menu just fills the remaining part of the screen and menu-content fills open-menu. In other words, there will never be any overflow that needs scrolling to.
In order to make the scrollbars appear, make the height of menu-content larger than the height of open-menu and add overflow-y: auto to open-menu. Here's an example:
#open-menu {
position:fixed;
width:100%;
height: 50%;
z-index: 60;
background: #060606;
display: none;
overflow-y: auto;
}
.menu-content {
position: relative;
height: 500px;
}
#close-menu {
color: #fff;
padding-top: 250px;
}
https://jsfiddle.net/oze4wv1v/
Related
There are multiple questions named this way, but I didn't find one that applies to my case, so here I am:
In this snippet:
#container:hover {
overflow-x: hidden;
}
#container {
position: relative;
width: 400px;
height: 40px;
background: red;
margin: 2em;
}
#child {
position: absolute;
bottom: 0;
}
<div id="container">
<div id="child">
a<br/>
b<br/>
hover<br/>
me
</div>
</div>
You can see that overflow-x, which is applied when you hover the red box, will also hide the overflow-y (at least on Chrome). This is annoying because I have a tooltip that I would like to be able to overflow above the red box, and in the meantime I have a menu that will slide from the right side and that should stay hidden.
Is this a bug? Is there a workaround?
You can't change the way overflow-x and overflow-y behave (it's the same in Firefox and other browsers), but you can change the way your HTML is organized.
Put everything that you want to hide when overflowing in a single wrapper. Put your tooltip in another wrapper.
Something like this may suit your needs:
#container {
position: relative;
width: 400px;
background: #f77;
margin: 3em 2em;
}
#child {
overflow: hidden;
position: relative;
}
#menu {
position: absolute;
left: 100%;
top: 0;
background: #dd2;
transition: .2s;
}
#child:hover #menu {
transform: translateX(-100%);
}
#tooltip {
position: absolute;
bottom: 100%;
}
<div id="container">
<div id="child">
hover<br/>
me
<div id="menu">
menu
</div>
</div>
<div id="tooltip">
a<br/>
b
</div>
</div>
Is the clipping behavior a bug?
No, the clipping is in accordance with the spec.
UAs must clip the scrollable overflow area of scroll containers on the
block-start and inline-start sides of the box (thereby behaving as if
they had no scrollable overflow on that side).
In your case, the "block-start" side is the top, and the "inline-start" side is the left. That's why you can put your tooltip below the content, and it will trigger a scrollbar.
#container:hover {
overflow-x: hidden;
}
#container {
position: relative;
width: 400px;
height: 40px;
background: red;
margin: 2em;
}
#child {
position: absolute;
/* bottom: 0; */
top: 0;
}
<div id="container">
<div id="child">
hover<br/>
me<br/>
a<br/>
b
</div>
</div>
So why is it possible to scroll to content overflowing below the box, but not possible to simply make it visible? The reason is that when any overflow property is set to hidden, the entire box becomes a scroll container.
[A scroll container] allows the user to scroll clipped parts of its
scrollable overflow area into view.
You can use overflow: clip, which does not turn the box into a scroll container. If you clip in both direction, you can also adjust the distance at which clipping occurs as well using overflow-clip-margin :
#container:hover {
overflow-x: clip;
}
#container {
position: relative;
width: 200px;
height: 40px;
background: red;
margin: 2em;
}
#child {
position: absolute;
bottom: 0;
}
<div id="container">
<div id="child">
aazkopekzapoekzapoekzapoekzapoekpozakepozakepozakeoza<br/>
b<br/>
hover<br/>
me
</div>
</div>
I've set up a lightbox using only CSS and my images are longer than the viewport. The background is scrolling but the images won't.
Live site: https://hwestdesign.com
I've tried changing the overflow to various different settings and on different selectors and nothing is working. I'm really new to this and I don't know if I'm just making a simple mistake. I've read threads that have similar problems but the solutions provided aren't working either.
This is the CSS code I currently have active:
.thumbnail {
max-width: 100%;
}
.lightbox {
display: none;
width: 300px;
height: 300px;
overflow: scroll;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
padding:10px;
text-align: center;
background: rgba(0,0,0,0.8);
}
.lightbox img{
max-width: none;
margin-top: 2%;
overflow-y: visible;
height: auto;
}
.lightbox:target {
outline: none;
display: block;
overflow: visible;
}
This is the HTML:
<div class="grid-item item1">
<img src="images/covers/hwest.jpg" class="thumbnail">
<img class="lightbox-content" src="images/hwestbranding.jpg">
</div>
When this loads the light box pops up and there is scrolling but it’s only the background underneath the light box that scrolls. The images are longer and I want to be able to scroll just the images vertically. Right now they are the right size but fixed. I’ve tried changing their position and the overflow but it does nothing
The combination of position:fixed and the overlay size is causing the issue. Setting an element to a fixed position removes it from the scroll context of the rest of the document. To resolve this you need to give the lightbox container a new scroll context by using the overflow property.
Note: you'll need to place the mouse cursor (pointer event) OVER the lightbox/modal specifically to cause the scroll. Otherwise, the "scroll" action will pass through to the document below
Here's an example:
And a link to codepen since its a bit difficult to see here.
body {
min-height:300vh;
background: url(https://images.unsplash.com/photo-1559291001-693fb9166cba) left top repeat;
}
.modal {
/* dark background overlay helps to position content */
position: fixed;
top:0; right:0; bottom:0; left:0;
background-color: rgba(0,0,0,0.6);
}
.modalInner {
/* put the white box in the right place */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* define how big it is before scrolling */
width: 80vw;
height: 80vh;
overflow-y: scroll;
/* look & feel */
background-color: #ffffff;
padding: 20px;
border: 1px solid #000;
}
<div class="modal">
<div class="modalInner">
<img src="https://images.unsplash.com/photo-1560010871-220685e68662" width="100%" />
</div>
</div>
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/
I have a three-column layout that takes up 100% width and height of the browser (with padding). This layout contains two columns which also take up 100% height and should scroll independently.
Here is a jsfiddle: http://jsfiddle.net/KdZ9A/2/. Here is how it looks in Chrome (desirable -- individual columns scroll):
and Firefox and IE (undesirable -- body is scrolling):
This works perfectly in Chrome; however, the in Firefox and IE (10), the entire page scrolls instead of individual columns scrolling. I only want the columns to overflow and scroll -- not the body. Any idea how to make this work in Firefox and IE?
I've also tried a bit different approach using absolute positioning of the columns' contents: http://jsfiddle.net/KdZ9A/3/.
Here is the HTML I am using:
<div id="container">
<div id="inner">
<div id="palette">palette</div>
<div id="list">
<div class="content"></div>
</div>
<div id="editor">
<div class="content"></div>
</div>
</div>
</div>
I'm using absolute positioning to achieve 100% height and then display of table and table-cell inside that to achieve 100% height of the columnns:
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
body {
position: relative;
}
#container {
background-color: #f1f1f1;
position: absolute;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
}
#inner {
display: table;
height: 100%;
}
#inner > div {
display: table-cell;
}
#palette {
min-width: 180px;
max-width: 180px;
width: 180px !important;
background-color: pink;
}
#list {
width: 55%;
min-width: 350px;
background-color: cyan;
}
#editor {
width: 45%;
min-width: 400px;
background-color: magenta;
}
.content {
overflow: auto;
height: 100%;
}
I was 5 minutes from giving up and HOLY CRAP...I GOT IT WORKING
http://jsfiddle.net/gFX5E/15/
This is based on the different approach I mentioned. I needed to wrap .content divs and make the wrappers position relative. I also added some headers to the columns.
HTML:
<div class="content-wrap">
<div class="content">
...
</div>
</div>
CSS:
.content-wrap {
position: relative;
height: 100%;
}
.content {
overflow: auto;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
Seems to work in Chrome, Safari, Firefox, and IE8+.
And here is a more semantic HTML5 version which also adds a header to the top: http://jsfiddle.net/gFX5E/20/. I believe this will require use of html5shiv to work in IE8.
If you are willing to settle for a fixed total width, here is how:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box; /* makes filling up easier */
}
html, body {
height: 100%;
}
#container {
position: relative;
width: 980px;
height: 100%;
margin: auto;
background: grey;
}
#palette {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 800px;
background: pink;
}
#list {
position: absolute;
left: 180px;
top: 0;
bottom: 0;
right: 450px;
background: cyan;
overflow-y: auto;
}
#editor {
position: absolute;
left: 530px;
top: 0;
bottom: 0;
right: 0;
background: magenta;
overflow-y: auto;
}
</style>
</head>
<body>
<div id="container">
<div id="palette">Palette</div>
<div id="list" class="content"></div>
<div id="editor" class="content"></div>
</div>
<script>
$(function() {
for (var i=0; i<20; i++) {
$('.content').append('<p>Lorem ipsum [truncated for SO]</p>');
}
});
</script>
</body>
</html>
Demo on this Codepen: http://codepen.io/anon/pen/aqgCm?editors=100.
This is a pretty old post, but I thought I'd comment.
If you display: flex instead of display: table in your 1st example that should fix the issue.
Also setting your scroll container height to 100vh will also do the trick.
You have to understand that the browsers apply scroll only when they understand the size( i.e. height and width) of the content is greater than the size specified for it. In your case, the height you have specified for the div is 100%. This effectively tells the browser to keep increasing the size of the div till all the content fits in completely. Hence, this creates the situation where scroll isn't needed as the browser would 'fit' the entire content within this div.
So if you want the div (or the paragraphs contained in it) to be scrollable, then you would have to specify the height and then tell the browser to provide a scroll for the content that won't fit in the specified size.
I am not sure if you want the individual 'paragraphs' to be scrollable or the entire div( which contains these paragraphs) to be scrollable. In either case, you would need to provide a fixed height for the scroll to be useful. Your paragraph tag would need to have the following CSS applied to it :
p {
height: 200px; /*Some fixed height*/
overflow-y: scroll;
}
Here's an example of this: http://jsfiddle.net/y49C3/
In case you want your div called 'content' to be scrollable (as opposed to the paragraphs), then you would have to apply the aforementioned CSS to the div instead.
.content {
overflow-y: scroll;
height: 500px;
}
You can see that here: http://jsfiddle.net/qF7Mt/1/
I have tested this in Firefox (29) and IE 10 and it works fine!!!
Hope this helps!!!
If you look at this fiddle: http://jsfiddle.net/bastien/PybrF/1/
#header {
position: fixed;
top: 0px;
left: 0px;
height: 50px;
width: 100%;
background-color: yellow;
}
#content {
top: 51px;
left: 0px;
bottom: 0px;
width: 100%;
height: 100%;
position: fixed;
overflow: auto;
background-color: orange;
}
If you resize the window then the vertical scrollbar gets visible in the content div. BUT it gets only visible (so it seems for me...) when I have exceeded the height in pixel of the header while resizing the window.
How can I get the vertical scrollbar correctly?
UPDATE
I want a header which stays fixed.
I want a content which has inside scrollbars.
something like this: http://jsfiddle.net/bastien/PybrF/7/
but the vertical scrollbars should start inside the content div and not start at the header/body.
Try this in your css:
* { margin: 0; padding: 0 }
#header, #content { width: 100%; position: absolute; }
#header {
height: 50px;
background-color: yellow;
}
#content {
top: 50px;
height: 70%;
overflow-y: auto;
background-color: orange;
}
Will produce this:
As for the height of the content to use all the space left, I would to a js function wired to the resize event to set the height of the content to the page height minus the height of the header. I honestly don't know another solution for this.
Due to your use of fixed positioning and application of overflow settings, only the #content area will scroll.
Consider this:
1) Add the orange background color to the body element and remove its margins:
body {
margin:0px;
padding:0px;
background-color: orange;
overflow-x: hidden;
overflow-y: auto;
}
2) Position the other elements relatively:
#header {
position: relative;
height: 50px;
background-color: yellow;
}
#container {
position:relative;
}
http://jsfiddle.net/PybrF/6/
EDIT:
I'm still unclear on what you're looking for, but here's another method.
This one keeps the header fixed and puts the scrollbar inside the #content area.
body {
background-color: orange;
margin:0px;
}
#header {
position: fixed;
top: 0px;
left: 0px;
height: 50px;
width: 100%;
background-color: yellow;
z-index:1; /* keep the header on top of the content */
}
#content {
position:relative;
padding-top:50px; /* height of the header */
}
http://jsfiddle.net/PybrF/8/
ok I knew it must work:
Still found some old similar code and refactored it:
have fun! :)
Sorry for telling crap.
Remove the width/height percentage settings and use the left/right/bottom etc settings. Thats enough.
Forget about the main div which was from this other project long ago.
http://jsfiddle.net/bastien/PybrF/12/