I've this html setup...
body
.top
.content
top is fixed fullscreen popup with some other content in it. However, while scrolling reaches to an end in the .top>ul the background item starts to scroll. Which is very nauseating and makes site all slowish on tablets.
On tablets, even when i add overflow hidden to body using jquery it doesn't prevents it for some reason from scrolling the background even sometimes when it's not reached end.
I want no scrolling of background page when popup is on top of the page. It's suppose to be a new slide.
What can i do preferable structure wise, then css, and lastly js.
Demo http://jsfiddle.net/techsin/0bv9g31k/
* {padding: 0; margin: 0;}
.top {
position: fixed;
background-color: rgba(0,0,0,.3);
height: 100%;
width: 100%;
overflow: auto;
}
ul {
text-align: center;
background-color: rgba(23,44,134,.8);
color: #fff;
box-sizing: border-box;
overflow: auto;
height: 300px;
width: 50%;
margin: auto;
position: absolute;
top: 0; bottom: 0;
left:0;
right:0;
overflow: hidden;
}
.cont {
width: 400px;
margin: auto;
}
These functions freeze and unfreeze the body element, while allowing children to scroll if they have the appropriate overflow property:
function freeze() {
var top= window.scrollY;
document.body.style.overflow= 'hidden';
window.onscroll= function() {
window.scroll(0, top);
}
}
function unfreeze() {
document.body.style.overflow= '';
window.onscroll= null;
}
Working Fiddle
I believe you'll find a solution here, particularly the answer by Troy Alford: Prevent scrolling of parent element?
I suspect your question will be flagged as a duplicate.
I would have added this as a comment on your question but I don't have enough reputation points yet. I also don't feel good about trying to pass off any of the answers on that question as my own, so I'll simply answer with that link and hope it helps you.
Related
Ok, this is an unusual question, but I've been playing around with it for hours and haven't had any progress - hoping the SO community can help! 🤓
Here's the webpage in question: https://pifornerds.io/
We're using this code to dynamically set the background (the digits of pi that you see in grey) height based on the foreground content length:
<script>
// Dynamically set base height based on container contents
var containerHeight = document.getElementById("container").offsetHeight;
var baseHeight = document.getElementById("base").offsetHeight;
if (baseHeight > containerHeight) {
document.getElementById("base").style.height = containerHeight + "px";
}
</script>
CSS snippet:
.layered {
display: grid;
justify-items: left;
background-color: #222222;
max-width: 1000px;
margin: auto;
height: auto;
min-height: 100px;
overflow: hidden;
}
.layered > * {
grid-column-start: 1;
grid-row-start: 1;
}
.base {
font-family: "DejaVuSansMonoBold", courier;
color: white;
opacity: 0.1;
max-width: 100%;
height: 100%;
word-break: break-all;
margin-top: -3px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
position: static;
z-index: 1;
overflow: hidden;
}
.container {
display: block;
height: max-content;
overflow: hidden;
}
We wanted to do this so there wouldn't be a bunch of pi digits in the footer area. We think it looks "cleaner" this way.
However, the menu at the top uses anchor links to jump to content lower on the page, for example:
Roadmap
jumps to:
<a id="roadmap"></a>
Now here's the problem ...
After you click a menu anchor link, and then try to scroll back up the page to the top, you can't 🧐 ... because somehow the previous Javascript height update won't allow that.
This is as far up as I can scroll up now, after clicking "Roadmap":
Any ideas? Thanks in advance! 😀
EDIT: Here's a Fiddle: https://jsfiddle.net/imkane/kof83msy/4/
Of course it works properly there 😖
You need to remove the overflow: hidden; from .layered div.
It will probably be better to add overflow: hidden; to .base div, which is the one you set the height on.
My current website is this https://resillience.in
It is completely responsive below 1440px and works fine
But it looks wierd when viewed at 2560px as shown below
Don't want to change the things also in % to make it responsive at 2560px
How to fix the view at 1440px and have a work around like shown below
If viewed at higher, it adds padding from both sides.
Also adding max-width:1440px in the main html css file, I cannot achieve the desired result
The following code also might not solve
#root {
max-width: 1400px;
margin: 0 auto;
}
Because some of the images are having its css property as
position: fixed;
right: 0;
In general,you can apply this CSS to your #root element:
#root {
max-width: 1400px;
margin: 0 auto;
}
This will limit the overall width at 1400px and center it horizontally when the window is wider than 1400px.
I don't know if there are any details in other pages of your website which would cause a problem in conjunction with those settings (I don't see any at first sight), but this would be an easy, general procedure to get what you are asking for.
add justify-content: flex-end; to right side menu and I had changed some CSS to look beautiful. Please go through this.
.jss6 {
justify-content: flex-end;
}
.jss7, .jss18 {
margin: 0 10px; /* to add space between a tag and dropdown */
}
.active {
border: none;
}
.active::before {
position: absolute;
height: 6px;
width: 100%;
background: #3672c0;
content: '';
left: 0;
bottom: -3px;
}
try do the following:
#root {
width: 100%;
}
#media (min-width: 1440px) {
#root {
width: 1440px;
margin: 0 auto; // for centering
}
}
setting the width to fixed-size might solve the issue, from my quick review, why? cuz u probably used width: 100% inside the root div, so setting the root div to fixed-size always be related to that 100% = 1440px; :) let me know
I have a problem with scrolling over fixed element, it doesn't work on my site. But I saw that there is no such problem in some scrolling examples like this one. After a while I found a little difference - on my site the scrolling of the page is not on the html tag but on the of app's root tag.
Here you can find an example of the situation that I have - you can't scroll over the red block http://jsbin.com/rutogosesa/edit?html,css,output, and here an example where you can scroll over the red block http://jsbin.com/munixamuqo/edit?html,css,output.
My quesion is: how to allow scrolling in first example. I know that I can subscribe on onwheel event and move scrollbar mannually, but it looks weird as all browsers have smooth scrolling my implementation will broke its behaviour, especially for mac users. Maybe there are some other possible solutions?
Let's boil your trouble down to this: if the mouse is over #inner, you can't use the usual methods (spacebar, arrow keys, trackpad, wheel) to scroll #outer up and down.
If you need to keep everything you have, get around this by adding pointer-events: none to the inner element. (Note that this means you won't be able to interact with it at all - so any links in the inner element won't be clickable. Given the examples you gave in your question, that won't be a problem.)
html,
body {
height: 100%;
margin: 0;
}
html {
overflow: hidden;
}
#inner {
position: fixed;
background: red;
width: 200px;
height: 200px;
pointer-events: none; /* this is your fix. note it doesn't work in IE < 9 */
}
#outer {
overflow-y: auto; /* I changed this from "scroll". that may have been an inappropriate change, but it seems like it's probably desirable - you don't want the scrollbar to show even if the window is tall enough that you can't scroll */
background: blue;
height: 100%;
}
#push {
height: 2000px;
}
<div id="outer">
<p>top of #outer</p>
<div id="inner">
#inner
</div>
<div id="push" />
</div>
If you can get away with changing your html's styles, you can work around this by dropping the html {height: 100%; overflow: hidden}. This solution doesn't use pointer-events: none so you'll still be able to interact with the inner element!
html {
margin: 0; /* dropped html {height: 100%; overflow: hidden} */
}
body {
height: 100%;
margin: 0;
}
#inner {
position: fixed;
background: red;
width: 200px;
height: 200px;
}
#outer {
overflow-y: auto; /* I changed this from "scroll". that may have been an inappropriate change, but it seems like it's probably desirable - you don't want the scrollbar to show even if the window is tall enough that you can't scroll */
background: blue;
height: 100%;
}
#push {
height: 2000px;
}
<div id="outer">
<p>top of #outer</p>
<div id="inner">
#inner
</div>
<div id="push"></div>
</div>
I need to have an absolute div that is a child of only body fill the entire document area (window + any scroll area)
-- width: 100% only fills the viewable screen
I prefer a CSS only solution but pure javascript is ok. I tried without success setting:
opaque.style.minHeight = Math.max(document.body.offsetHeight, document.body.scrollHeight);
I made a jsFiddle of the code below. If you scroll down the output, you will see that the opaque div stops at whatever height the output window was when it was rendered.
In case you are wondering... it is to make an opaque overlay of all content in the div behind it (think slideshow). My only other solution is to disable scrolling, but this is problematic.
Thanks for any help.
<div class="page-container"></div>
<div id="opaque"></div>
body {
width:100%;
}
.page-container {
position: relative;
max-width:978px;
width: 100%;
min-height:2500px;
margin:0 auto -50px auto;
border:solid #999;
border-width:2px;
background: lightblue;
}
#opaque {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
background: grey;
filter: alpha(opacity=70);
opacity: 0.7;
}
Can use
#opaque {
position: fixed;
top: 0;
left: 0;
right:0;
bottom:0;
}
remove width:100% from body due to creates horizontal scrollbar
Depending on use case it is often common to add class to body when using such an overlay that sets body overflow to hidden
DEMO
You can put a position: relative on your body so that the body will be used as a reference point by the child element in terms of height (as opposed to the document object).
Using javascript to set one elements height equal to anothers
var o = document.getElementById('opaque');
var p = document.querySelector('.page-container');
o.style.height = window.getComputedStyle(p).getPropertyValue("height");
FIDDLE
I'd like a page with a sticky footer, and I'd like the content above it to be scroll-able, while maintaining the stickiness of the footer. But I don't want to hard-code the height of the content area, but instead would like its height to be all the available height except for the height of the footer.
In the long run I would even like for the height of the scroll-able content area to be re-sizable if the window is re-sized, but I'm getting ahead of myself. I'm presuming I'm going to need a combination of CSS and Javascript to acheive this, that CSS alone cannot acheive it?
I've researched of course and have found the CSS overflow property, but my CSS in general is not very good :( Below is some CSS/HTML I've cobbled together based on ryanfait.com's sticky footer tutorial, if somebody can give me some advice using this as a starting point. Bear in mind, I will need straight Javascript, not jQuery, as this will be used in a custom browser (http://tkhtml.tcl.tk/hv3.html). My Javascript unlike my CSS though is pretty good, so an answer combining specific CSS suggestions with general Javascript suggestions (which I will then flesh out), would be ideal.
<html>
<head>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
</style>
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
EDIT: What I've attempted based on first two answers:
I've made the following modifications to the CSS based on parts of the two answers received so far:
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
overflow-y: scroll;
}
.footer {
bottom: 0;
height: 4em;
position: fixed;
}
</style>
What this gives me in Chrome are two scrollbars, one very faint, but the more prominent one still allowing content that overflows (maybe I'm using the term incorrectly?) outside of the wrapper area, and over the top (or under the bottom) of the footer, plus outside the entire body. Thanks for help making progress but I still need quite a bit of help. Here's a link to a screenshot of what I'm seeing; I used http://www.ipsum-generator.com/ to generate all the content.
http://dl.dropbox.com/u/44728447/dynamic_wrapper_sticky_footer.JPG
html, body {
height:100%;
overflow:hidden;
}
.wrapper {
overflow-y:scroll;
height: 90%;
}
.footer {
position:static;
bottom: 0;
height: 10%;
}
Demo: http://jsfiddle.net/vfSM3/
On the footer div use position fixed and bottom 0 like:
.footer {
bottom: 0;
height: 4em;
position: fixed;
}
If you want to use fixed height on the footer, you could do the following
.wrapper{
overflow-y:scroll;
height:calc(100% - 20px);
}
.footer {
position:static;
bottom: 0;
height: 20px;
}
Note that you need to use the spaces here "100% - 20px" in order for it to work.