Oveflowing fixed position popup, scrolls body beneath - javascript

Basicly I have popup, that is width:100%; height:100%; and has vertical scroll.
My body has vertical scroll too.
So when I scroll the content of the popup, its scrolls until it can, then continues to scroll the body bellow.

Assign height: 100%; and overflow: hidden to body while the pop-up is shown

Related

Scroll content is not fully visible to the user when user zooms to 175%

I have hidden the <body> scroll and given height with scroll for div, but the scroll content is not fully visible to the user when user zooms to 175%
body {
overflow: hidden;
}
div {
height: 50rem;
overflow-y: auto
}
How do I make the scroll content visible?
use vh height like height:50vh

Bottom scroll appears as browser re-sized to mobile resolution

Here is the link to my page: http://smuggler-cow-23486.netlify.com/dashboard
When I click on Toggle menu button at the Top right corner at mobile size window, it shows bottom scroll.
use overflow: hidden; to remove the scroll for horizontal
.dashboard {
overflow-x: hidden;
}

trying to stop horizontal scrolling

I have created a div and set its initial position
<div class="guide" >
<style>
.guide{
height:150px;
width:200px;
position:absolute;
right:-170px;
top: 10%;
}
</style>
What i want when i click on the div it should comeout from right side.
The problem is window is providing hrizontal scroll, so if a person scrolls to right the div is compltely visible.
I want to stop horizontal scroll so that if the user click on div then only its visible.
Now if any body explain that why its going after -ve pixels, becouse sometime it doesn't go beyond -ve px, sometime it goes, why?
Add overflow-x: hidden; to the Parent element.
Horizontal Scrollbar :
overflow-x: hidden;
Vertical Scrollbar :
overflow-y: hidden;
both: overflow: hidden;
Hide vertical scrollbar of a parent div by using
overflow-x: hidden;

Issue with position:fixed and hash tags (details in body)

I have a position:fixed; navigation bar. Whenever I go to mypage.html#myid, the navigation bar overlaps some of the content of myid. How can I move the entire page down a bit so that the navigation bar isn't covering the content?
P.S. I tried body{padding-top:50px;}
You can't use margin-top on the myid div? Your main content should be inside a div and this div should be inside the body then myid div can push down from the body to allow enough space for the fixed nav bar.
Some code would help...
There is a bit hacky solution needed.
#myID:before {
display: block;
content: " ";
margin-top: -285px; /* navigation height */
height: 285px; /* navigation height */
visibility: hidden;
}
The logic is to add hidden element before the #myID content so browser will give it a hidden space. Giving minus valie as margin-top will prevent it to give phsyical space.
Please have a look at here for detail: http://css-tricks.com/hash-tag-links-padding/

Force vertical scroll bar on animation

I have a div that animated from height: 0 to height: 80% (80% of the body) and sometimes the content in this appearing div will be bigger than the div, requiring a scroll bar.
Problem is the scroll bar isn't apparant when the animation is running, and it only appears when it needs to after the animation. (kinda a good thing really)
But I'm being picky because I'm adding the final touches to my site and when the scroll bar randomly appears, it shifts the content left and it just looks funny.
So I want the scroll bar to be there all the time regardless. Is this possible?
Your animation library must be setting overflow: hidden on the outer element, which is why the scrollbar disappears.
Try wrapping the content in one more div:
<!-- the outer element; pass this one to the animation lib -->
<div>
<!-- the scroll bar will appear on this element -->
<div style="overflow: scroll; height: 100%">
<!-- content here -->
</div>
</div>
Try it here: http://jsfiddle.net/e3BkK/
To always display a vertical scroll bar, you can use
#yourDivId {
overflow-y: scroll;
}
If your contained content has a smaller height than #yourDivId, then the vertical scroll bar appears disabled.
If it has a bigger height, then the vertical scroll bar becomes enabled.
Add overflow: scroll to the body element through CSS: http://jsfiddle.net/GMcdf/1/.
body {
overflow: scroll;
}

Categories