I have a fixed size, scrollable parent div containing two children: The first contains the content, and should determine the size of the scrollable area. The second is small overlay that is moved around dynamically, and should not affect the size of the scrollable area. That is, if the overlay overhangs the bottom edge of the content, and the user scrolls all the way down (assuming the content is larger than the parent div), scrolling should stop once they hit the bottom of the content, even if that means only part of the overlay is visible.
Is this possible to achieve?
E.g., with this HTML:
<div id="parent">
<div id="content">
<img src="640x423_image.jpg">
</div>
<div id="overlay"></div>
</div>
and this CSS:
#parent {
position: relative;
height: 400px;
width: 400px;
overflow: auto;
border: 1px solid red;
}
#overlay {
position: absolute;
height: 20px;
width: 20px;
background-color: lightblue;
top: 413px;
left: 15px;
}
(JSFiddle), the browser lets the user scroll past the bottom of the content until the entire overlay (the blue square) is visible, while I would like it to stop once the bottom of the image is visible, leaving the bottom 50% of the overlay still hidden.
For my use case, I am able to make adjustments to the HTML if necessary.
Put square box and img inside same container (#content in your case), and set overflow: hidden; on it.
#parent {
position: relative;
height: 400px;
width: 400px;
overflow: auto;
border: 1px solid red;
}
#content {
overflow: hidden;
position: relative;
}
#overlay {
position: absolute;
height: 20px;
width: 20px;
background-color: lightblue;
top: 413px;
left: 15px;
}
<div id="parent">
<div id="content">
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAFBQUFBVUFpkZFp9h3iHfbmqm5uquf/I18jXyP////////////////////////////////////////////////8BUFBQUFVQWmRkWn2HeId9uaqbm6q5/8jXyNfI///////////////////////////////////////////////////CABEIAacCgAMBIgACEQEDEQH/xAAYAAADAQEAAAAAAAAAAAAAAAAAAQIDBP/aAAgBAQAAAADnG4vowbzG0y3fNV4o16crpU2QkqdZuiWm+eL6JBMZDuJSw0DSiOd2QLTUmZllzchaxH0isptmOmGxSigQN80b6IBA41JM4z2ktXjkO04vSs1FICiL1wg03mqljdYXn0BDqUBc809NyyUMTJRk7RU6c8UrlBoOFQ5LUUZj6kiqAFA9QiqSBVHOutDQIjRCh4bKNAfOm6kqW3Fzcgo6DBGnVlcU3SM0rsSZSQzPF9kAIJLZOeRaWooyWsJ0yGTRtlRC1jMN2a522qrm0y6B5sYItYZ67xQIuHSMpw2I0pnPBrMMdJDTpOsNXgF6jb0G87wudWoZVZhb5J6xUMVZXUqIz3WHSkcobZXAOWFVGjmN8cx9VYWXaQ4J1pKWUkNvjrrhsps59KlHLsTn0xMYl3FPPSHFgJ1n0rlDTdQ9FQ6zx0Ww87TqUqefPr0Z0FO559GSc3ZnnlsljJrNCm7zSGqRXThgPXowudoubrLGq3UjToi2ckb6puabWNjnF65zO6z5x6xoKnlNDeW0xtvwo001lDm1dYwb2ZaSmxbOOJ9cUVJVRnak5d3MFmWZdjBqG87jQhamAb7Z6Z6rOzTKZvcWVIoVWZc3RZaAsyTM4jUeOtnLBprDHJDCo6IyvbkRfU8qNIh3eMTvSloBl0ck9k2CHRjSFhpZXJva409N8khCc3BrC3yyDfpxqNE5VxWL6Es2MB2Z43vNskqjDZZzz9RU4b1HG3rpiO1l0ZQF3hrXMF9F43GjJZGnPvamW0M0Fzxu3QKilG8ZZxvOmUdUYYOt3gDDTDXK3mW8kb651OgpoNIy6BZUDaqxch0TTbmgmtcjk30gyNjkh67LAajRDjacreYq3rPSNhRDe3PrZOdotLUM+bXSbYnYY63i+PvlTz3tPIPWzEQmri7mNscx7a5axVtN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">
<div id="overlay"></div>
</div>
</div>
Related
I have tried a lot of things and searched online but I cannot figure out the solution to this problem.
I have a div container which has a max-height, min-height and also overflow: auto. When the inner content is larger than the max-height, a scrollbar appears as expected. But, inside the content there is a dropdown, which when clicked, the menu expands, and instead of being displayed outside the parent container, it is like changing the inner content height.
The only solution I found online and made sense to me, is to wrap the container to div with relative positioning and make the dropdown absolute, but there is a big drawback now, the dropdown stays fixed on scroll, as it is absolute positioned relative to the wrapper and not the content. Is there any common way to fix this or any other solution ?
I didn't post any code because I do not want the answer to rely on my code.
I just want a minimal example if possible with these properties:
Container has a max-height
If content is larger than the container's max-height then the container should display a scrollbar.
The content has a dropdown which should scroll with every other element of the content.
The menu options of the dropdown element are escaping the container / are displayed outside the boundaries of the container.
To illustrate on my comments on the question, here's an MCVE:
.scroll-container {
border: 3px dashed #eee;
height: 400px;
padding: 10px;
overflow: auto;
width: 400px;
}
.content {
background-color: #f0f0f0;
height: 600px;
position: relative;
}
.dropdown {
background-color: orange;
position: absolute;
height: 300px;
width: 300px;
left: 300px;
}
<div class="scroll-container">
<div class="content">
<div class="dropdown"></div>
</div>
</div>
As you can see, with absolute positioning based on the relative position of div.content the orange div.dropdown creates a horizontal overflow, which is what you don't want. To fix this scenario, you need to remove position: relative from div.content and use transform: translateX(300px); instead of left: 300px;:
.scroll-container {
border: 3px dashed #eee;
height: 400px;
padding: 10px;
overflow: auto;
width: 400px;
}
.content {
background-color: #f0f0f0;
height: 600px;
}
.dropdown {
background-color: orange;
position: absolute;
height: 300px;
width: 300px;
transform: translateX(300px);
}
<div class="scroll-container">
<div class="content">
<div class="dropdown"></div>
</div>
</div>
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 would appreciate some wisdom here: I have 2 divs side by side each with a width of 50% of its parent div (body set at 200%) - to act like seperate horizontal pages. I would like each div to remain in full view when reducing and expanding the browser window. Currently by expanding the window size when the blue div in viewable the red div gets dragged into view as the scrollbar moves towards the centre of the browser.
body {
position: relative;
width: 200%;
height: 100%;
}
.block1 {
position: absolute;
width: 50%;
height: 100%;
background-color: #B00;
min-height: 800px;
left: 0px;
}
.block2 {
position: absolute;
width: 50%;
height: 100%;
background-color: #00A;
min-height: 800px;
left: 50%;
}
<body>
<div class="block1">
</div>
<div class="block2">
</div>
</body>
why not making only one div to be displayed and you add a button or something after clicking it will add some styling effect to hide the visible div and show the hidden one?
I need to make scrollable element with absolute positioned element inside and some big element for scrolling.
.container{
width: 200px;
height: 200px;
position: relative;
overflow: scroll;
border: 1px solid red;
}
.content{
height: 300px;
background: green;
}
.wtf{
top: 0px;
position: absolute;
height: 10px;
width: 100%;
background: red;
}
<div class="container">
<div class="content">
</div>
<div class="wtf"></div>
</div>
http://codepen.io/anon/pen/pvKwvZ
In this example I need to keep red element inside of green square after scrolling to bottom.
Your .container is set to position: relative. That's why the .wtf-Element moves along with the .container-Element! The .container becomes the reference object for the .wtf-Element because of the position: relative.
To have the .wtf-Element fixed, your could remove the .container position: relative (or replace it by the default position: static), or ...
another approach would be to set the .wtf position: fixed. Again, this would position the .wtf-Element relative to the "outer html", not relative to the .container.
Here is a fiddle as to what I am trying to accomplish: http://jsfiddle.net/60h84j7u/
I want the copy to hide below the top-nav div. I can accomplish this if the background is set to something other than transparent but in this case, the background for top-nav needs to be transparent.
HTML
<div class="wrapper">
<div class="top-nav">This needs to be at top</div>
<div class="copy"><p>This needs to hide below the top-nav as the user scrolls thru the page.</p></div>
</div>
CSS
.wrapper {
width: 500px;
height: 200px;
/*border: 1px solid purple;*/
}
.top-nav {
position: fixed;
top: 0;
border: 1px solid red;
background: transparent;
}
.copy {
position: relative;
top: 40px;
border: 1px solid green;
overflow: hidden;
}
I believe this to be impossible if you want the scrollbar to be on the edge of the browser, unless you change your design decision to make the top-nav transparent and do something else, such as adding a background colour or background image that shows the same thing.
If you add 2 fixed containers* around the scrollable part of your page, set their height to something < 100% and position them under your top-nav, you can set the outer container to hide overflow, and set the inner container to scroll on the y-axis. This does not really yield great results.
<div class="wrapper">
<div class="top-nav">This needs to be at top</div>
<div id="outercontainer">
<div id="innercontainer">
<div class="copy"><p>This needs to hide below the top-nav as the user scrolls thru the page.</p></div>
</div>
</div>
</div>
with css:
.outercontainer {
position: fixed;
top: 40px;
height: 90%;
width: 100%;
overflow: hidden;
}
.innercontainer {
position: fixed;
height: 90%;
width: 100%;
overflow-y: scroll;
}
* tested in Internet Explorer 11. Might horribly break in anything else