I want the mouse to be able to scroll the underlying content even if the mouse is inside the blue area.
is there any way to solve
.account {
width: 200px;
height: 600px;
background-color: #0c82df;
position: absolute;
top: 0;
left: 200px;
z-index: 10;
}
.account-1 {
width: 500px;
height: 800px;
overflow-y: scroll;
background-color: #00bfad;
}
body {
overflow: hidden;
padding: 0;
margin: 0;
}
<div class="account-1">
<p>时间到了分开就是浪费</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>时间到了分开就是浪费</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>时间到了分开就是浪费</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>时间到了分开就是浪费</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>时间到了分开就是浪费</p>
</div>
<div class="account">
</div>
if you wanna ignore element while scroll use
.account{pointer-events:none}
this property disable any interaction with mouse cursor
MDN Docs
if you wanna scroll .account-1 when hover on .account you must put .account block inside .account-1 block, then .account-1 not lose focus
Related
I'm currently trying to make it so that whenever I hover over the div with class hover-me, the div with class popup will change from being hidden to being shown. This works fine, however, the div with class popup is absolutely positioned outisde its parent div with class element but because the div with class elements-container has overflow-y: auto and overflow-x: hidden, I can't see it.
I'm wondering if there's any trick I can use to fix this problem without actually removing the overflow-y and overflow-x from elements-container, because that would break some other stuff.
So I have the following structure right now:
<div class="elements-container">
<div class="element">
<div class="hover-me">Hover Me</div>
<div class="popup">Hello</div>
</div>
<div class="element">
<div class="hover-me">Hover Me</div>
<div class="popup">Hello</div>
</div>
</div>
And the following CSS:
.elements-container {
overflow-y: auto;
overflow-x: hidden;
}
.hover-me {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
z-index: 99999;
}
.hover-me:hover > .popup {
display: block;
}
.popup {
position: absolute;
background: #242528FF;
border-radius: 3px;
width: 200px;
left: -200px;
top: 0;
color: white;
display: none;
}
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 have my resume in an iframe div that overlays my portfolio section when a link in my nav is clicked. I have an "X" image for user to click to close overlay, and I want to place it to the right of the resume iframe (ie: it butts up against the outer right edge of the iframe).
I can't seem to figure out how to do this - I tried using various different float, positioning and margin setups but the closest I can get is where the "x" is on the right side but its position moves with the window rescaling. I would like for it instead to "stick" to the right edge of the resume and stay there! Is there a way to do this? Here is my code:
HTML:
<header>
<nav></nav>
</header>
<div id="resume-overlay">
<div id="resume">
<iframe src="resume.html"></iframe>
<img class="button" src="img/x-button.png">
</div>
</div>
<div id="portfolio">
</div>
CSS:
header {
height: 80px;
width: 1600px;
position: fixed;
top: 0px;
z-index: 1;
background-color: white;
margin-left: 100px;
}
#resume-overlay {
display: none;
position: fixed;
z-index: 2;
top: 80px;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, .9);
}
.resume {
position: relative;
max-width: 1600px;
}
iframe {
position: absolute;
width: 100%;
height: 100%;
}
.button {
position: absolute;
z-index: 3;
right: 0;
padding-right: 10%;
}
And my jQuery if needed:
$(function() {
$('#overlay').on('click', function() {
$('#resume-overlay').fadeToggle('fast');
});
$(".button").click(function(event) {
event.preventDefault();
history.back(1);
$('#resume-overlay').fadeToggle('fast');
});
});
To illustrate, I want to move that blue X to the right edge of the white box
I'm not sure they type of error you're seeing yet, but your code here:
.button {
position: absolute;
z-index: 3;
right: 0;
padding-right: 10%;
}
Is all I think you need to address, try adding
top: 0;
right: 0;
And remove the padding, work with those values to get the button where you want it, and it shouldn't move from those setting regardless of window size.
I have some trouble with focusing elments which are in div with absolute position.
Problem is with absolute div which have large size and it is out of window bounds. When I focus this absolute div, than chrome automaticaly scrolls widow body, but I want to prevent scrolling
I know there is javascript solutions like "document.body.scrollTop = 0;", but I want to find is there css solution for it?
HTML Codde:
<div class="container">
<input type="button" value="make focus" onclick="document.getElementById('innerContainer').focus();" />
<div tabindex="0" id="innerContainer" /></div>
</div>
Css code:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow:hidden;
}
.container {
width: 100%;
height: 100%;
position: relative;
height: 200px;
overflow: hidden
}
#innerContainer{
background-color: green;
width: 100%;
height: 4000px;
position: absolute;
top: 100px;
}
#innerContainer:focus{
background-color: red;
}
Link to js fiddle - https://jsfiddle.net/3tLbqj5z/2/
I have this code:
<body>
<div>
xxx
</div>
<div id="error"
ng-show="er.msg">
<div style="color: white; background-color: purple; height: 2rem; display: flex; align-items: center;">
<div style="width: 90%; margin-right: auto; margin-left: auto;">{{ er.msg }} </div>
</div>
</div>
<div>
xxx
</div>
</body>
Is there a way that I can make a mask appear over the whole page to prevent user input while the error dialog is showing? Note this is angular so I can make a div show with ng-show="er.msg" or I can hide a div with ng-show="!er.msg".
If you look at bootstrap modal implementation, you can easily achieve that yourself.
You will mainly need 3 css classes
//To cover the whole page with transparent window, clicking this should close the modal window.
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
opacity: 0.5;
}
//Actual modal window above transparent window with higher z-index
.modal {
overflow: auto;
overflow-y: scroll;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
}
// This is to attach to body tag to remove scroll bar, to prevent double scroll bar. when dialog is closed this class should be removed.
.modal-open {
overflow: hidden;
}