I have a link button that links to a section of my page. When it's clicked or when that section of the page is scrolled to, I'd like to add a class fadeInUpAnimation to the img element below below. The image should have an opacity of 0 when it begins--I guess I can just set the opacity to 0 before the animation class is added.
<img src="img/circle-portrait-small.png" class="portrait">
This is the animation:
#keyframes fadeInUp {
from {
/* x, y axis */
transform: translate(0, 80px);
opacity: 0;
}
to {
transform: translate(0, 0);
opacity: 1
}
}
.fadeInUpAnimation {
animation-duration: 1.5s;
animation-name: fadeInUp;
}
I prefer a jQuery method since I already have a jQuery file, but it's not necessary.
Any suggestions?
This would be a good use case for the JavaScript IntersectionObserver API. Although it's a relatively new technology, it has 84% adoption and is more efficient than checking every element's position in a scroll handler.
I'd also recommend replacing your animations with transitions, since transitions are tailored specifically to this kind of one-time intro animation. By removing a class that hides the element rather than adding one that shows it, we can ensure that the animation only occurs once, i.e., when the element is first scrolled into view. This will also prevent your elements from snapping back to a -80px translate if you scroll them out, without any extra work on our part.
Long story short-- if you want performance, IntersectionObservers are the way to go. If you care about 100% browser support, this may not be an option for you. The 84% support is mainly due to people using old versions of major browsers. Once people and companies update, this will become the standard.
Note: I think the Stack Snippet is messing with this a little bit, but if you click the "Full Page" link after running it, it displays as normal. If you shrink your viewport after doing this, you can see they come in one-at-a-time exactly as intended.
const intersect_opt = {
root: null,
rootMargin: '80px',
threshold: 1.0
};
const intersect_observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(entry => {
if (entry.intersectionRatio === 1) {
entry.target.classList.remove("hidden");
}
});
}, intersect_opt);
document.querySelectorAll(".box").forEach(e => {
intersect_observer.observe(e);
});
.box {
width: 100px;
height: 100px;
background: forestgreen;
transition: opacity 1.5s linear, transform 1.5s linear;
}
.hidden {
opacity: 0;
transform: translate(0, 80px);
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra nulla at libero efficitur, non tristique felis mollis. Curabitur mollis ipsum in porttitor facilisis. Mauris vulputate magna non sapien ornare pharetra. Vestibulum ac vestibulum massa, ac dignissim justo. Nulla eu purus erat. Curabitur iaculis porttitor ex. Nulla elementum elit sit amet odio faucibus lacinia. Sed a fringilla lectus. Pellentesque accumsan ipsum id lectus molestie consectetur. Sed leo orci, vehicula nec dolor vitae, malesuada hendrerit ex. Morbi elementum ante eu sapien vestibulum, ac imperdiet velit sagittis. Nulla imperdiet ultrices interdum. Nulla interdum dui eu nisl fringilla, non facilisis ipsum maximus. Mauris aliquam ullamcorper justo sit amet eleifend.</p>
<div class="box hidden"></div>
<p>Phasellus eu ipsum eget erat laoreet tincidunt ac sit amet justo. Donec malesuada consectetur porta. Maecenas pretium urna eu malesuada posuere. Duis in sem tincidunt, tempor urna nec, vulputate eros. Curabitur ex enim, bibendum sit amet sem nec, viverra semper mauris. Aenean euismod consectetur condimentum. Fusce sit amet ante nulla. Curabitur auctor libero blandit semper rhoncus.</p>
<div class="box hidden"></div>
<p>Suspendisse cursus ullamcorper magna et pellentesque. Donec nec risus vehicula ex suscipit ultrices. Mauris et tincidunt turpis, dignissim iaculis metus. Sed condimentum orci non lectus fermentum facilisis. Pellentesque vel dignissim elit. Nullam cursus lobortis ante et tristique. Integer consectetur justo ipsum, et iaculis ligula volutpat eu. In non nisi eu ex rhoncus tincidunt.</p>
<div class="box hidden"></div>
<p>Sed sagittis tincidunt tellus, ut blandit diam molestie vel. Praesent cursus dolor nisl, et laoreet nisl mattis vitae. Vivamus porta vel lorem in consectetur. Nulla rutrum, odio viverra sodales cursus, sem velit ultrices mi, a ultrices ex tellus id ligula. Aenean venenatis dui lectus, id venenatis velit malesuada ac. Nunc ultricies fringilla sem in eleifend. Praesent dapibus eu risus et consequat. Duis felis felis, iaculis nec malesuada id, sagittis id augue. Fusce a hendrerit nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius commodo sem sit amet dignissim. Mauris venenatis sagittis quam et pellentesque. Suspendisse potenti.</p>
<div class="box hidden"></div>
<p>Donec in vehicula orci, non mollis erat. Sed luctus elementum est, sed accumsan diam porttitor vel. Nunc efficitur malesuada feugiat. Cras tempus vestibulum odio, et accumsan erat tincidunt nec. Nam vestibulum lectus suscipit diam tempor, vitae interdum elit cursus. Fusce accumsan libero vel congue efficitur. In feugiat, nibh placerat hendrerit suscipit, sapien nisi placerat augue, sed sodales nulla lacus iaculis velit. Nunc quis eros sit amet justo interdum iaculis. Proin auctor, eros ut aliquam rhoncus, dolor risus egestas sapien, eu facilisis est purus nec neque. Sed luctus tellus et mattis elementum. Etiam tempor justo ut viverra fermentum. Quisque pretium quam nibh, ut dictum est aliquam vitae. In hac habitasse platea dictumst. Quisque sit amet massa accumsan, ultricies libero quis, laoreet lectus. Donec gravida interdum mi in euismod. Duis aliquam lorem velit, sed maximus purus mattis eu.</p>
You can bind a function to the document's scroll event, so that it will check if your element is visible every time the user scrolls:
$(document).on('scroll', function(){
...
});
Then, since we'll have to run some calculations, assign the window height value to a variable:
var wHeight = window.innerHeight;
var yScroll = window.scrollY || window.pageYOffset;
And take your element's Y position:
var elementPosition = $('.portrait').offset().top;
Now, put it all together:
$(document).on('scroll', function(){
var wHeight = window.innerHeight;
var yScroll = window.scrollY || window.pageYOffset;
var elementPosition = $('.portrait').offset().top;
if(wHeight + yScroll > elementPosition + $('.portrait').height()) {
$('.portrait').addClass('fadeInUpAnimation ');
}
});
.blank {
display: block;
height: 1600px;
}
.portrait {
display: block;
width: 200px;
height: 200px;
background-color: rgba(150,0,0,1);
opacity: 0;
transform: translate(120px, 0);
transition: all 0.5s cubic-bezier(.2,.7,.2,1.1);
}
.fadeInUpAnimation {
opacity: 1;
transform: translate(0, 0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="blank">
Scroll down!
</div>
<div class="portrait">
</div>
<div class="blank">
</div>
Related
The issue:
I want the visitors to always see my site in portrait mode
I have gone through many links and have a working solution when mobile is turned to the landscape mode with -90 degrees
The issue I am facing is when mobile is turned +90 degrees. I cannot scroll the content at all when it's rotated +90 degrees. How do I make it so that the content is still scrollable even when it's rotated +90 degrees?
To see the issue:
Run the code snippet below (in full page) on any mobile turned to landscape mode (or on Developer Tools with mobile mode on while on landscape orientation)
You will see the issue I get with rotating by +90 degrees
To see the working version (-90 degrees), change the rotator-right class to rotator in my JS code below
The code I have:
(function() {
function myFunction() {
var wSH = window.screen.height;
var wI = window.innerHeight;
var dBC = document.body.clientHeight;
var wO = window.orientation;
document.getElementById("wSH").textContent = wSH;
document.getElementById("wI").textContent = wI;
document.getElementById("wO").textContent = wO;
document.getElementById("dBC").textContent = dBC;
var bodyDocument = document.body;
var iosDevice = /iPad|iPhone|iPod/.test(navigator.userAgent) &&
!window.MSStream;
if (window.matchMedia('(orientation: landscape)').matches &&
(
(window.screen.height < 425) /* for android */ ||
(iosDevice && window.innerHeight < 425) /* for iOS */
)
) {
bodyDocument.classList.add('rotator-right');
} else {
bodyDocument.classList.remove('rotator-right');
}
document.getElementsByTagName('body')[0].style.display = 'none';
setTimeout(function() {
document.getElementsByTagName('body')[0].style.display = 'block';
}, 200);
setTimeout(function() {
//console.log('inside rotator-right, with document.body.scrollHeight :', document.body.scrollHeight);
}, 100);
}
window.addEventListener("resize", myFunction);
myFunction();
})();
#media screen and (orientation:landscape) {
.rotator {
transform: scale(0.95) rotate(270deg);
transform-origin: top right;
position: relative;
top: 0px;
left: -100vh;
height: 100vw;
width: 100vh;
overflow-y: hidden;
}
.rotator-right {
transform: scale(0.93) rotate(90deg);
transform-origin: top right;
position: relative;
width: 100vh;
top: 50vw;
left: 42vw;
overflow-y: hidden;
}
}
<body id='body'>
<div class='container'>
<p>Click the button to display this frame's height and width.</p>
<p id="demo"></p>
<p>window.scroll.height :
<span id="wSH"></span>
</p>
<p>window.innerHeight :
<span id="wI"></span>
</p>
<p>document.body.clientHeight :
<span id="dBC"></span>
</p>
<p>window.orientation :
<span id="wO"></span>
</p>
<button>Try it</button>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac magna nec nisi accumsan blandit. Quisque feugiat commodo sapien quis pharetra. Sed elit justo, volutpat ac eleifend eu, aliquet in orci. Proin fermentum purus nec ante molestie sodales.
Cras malesuada nunc purus, id iaculis magna suscipit nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam pulvinar eu lectus eu sollicitudin. Integer mauris sem, posuere vel est a, eleifend pulvinar
lectus. Duis sapien velit, tristique imperdiet purus nec, scelerisque porta massa. Proin commodo faucibus purus, in volutpat lectus maximus sed. Suspendisse potenti.
</p>
<p>
Curabitur maximus elementum nibh, at rhoncus dolor auctor in. Donec ultrices enim ac est sollicitudin euismod. Mauris tempor eget dolor sit amet consequat. Suspendisse volutpat efficitur eros, vitae imperdiet tellus. Vestibulum aliquam nunc eget ante
porta gravida. Aliquam cursus fermentum accumsan. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur condimentum tempus mollis. Suspendisse luctus posuere sapien, ut pharetra lacus eleifend ut.
</p>
<p>
Morbi eu finibus quam. Morbi pharetra mollis diam id hendrerit. Etiam rhoncus, dolor quis hendrerit consectetur, est urna efficitur erat, in vestibulum nunc erat eget sapien. Curabitur ut massa semper, feugiat quam eu, rhoncus tortor. Ut quis convallis
diam, et euismod sem. Cras volutpat libero id nulla varius, at egestas elit consectetur. Nulla posuere neque risus, eu mollis dolor vehicula ut. Donec a ipsum eu justo malesuada lacinia in porta nibh. Aenean risus erat, molestie elementum eros vitae,
tempor porta lacus. Fusce et bibendum est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas vel est ac justo vehicula commodo eget eget magna. Etiam vitae aliquet eros, rutrum porta ligula. Nulla at
fringilla lacus, sed commodo justo. Aenean imperdiet maximus tortor sed volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Curabitur finibus dictum condimentum. Nulla scelerisque dui elit, sit amet lobortis tellus mollis ut. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ac ex sapien. Maecenas ac pellentesque nisi, id mattis
ligula. Sed lacinia feugiat ultricies. Sed ultrices facilisis efficitur. Vestibulum quis libero nec quam convallis mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacus neque, sodales sit amet facilisis eu, viverra vel nulla.
Nullam nec dapibus metus. Aenean pulvinar molestie dolor. In hac habitasse platea dictumst.
</p>
<p>
Nunc commodo magna id nisl ultricies porta. Nulla eget purus et mi malesuada hendrerit. Aenean euismod mauris placerat est dapibus, venenatis posuere lacus fermentum. Cras purus lorem, tristique non semper sit amet, pulvinar a ligula. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse ultricies ultrices posuere. Nulla eu pellentesque ante. Curabitur consequat odio eget purus vestibulum, nec vestibulum lacus mollis. Etiam cursus, ipsum vehicula
auctor rhoncus, diam massa fermentum nibh, ac tincidunt neque arcu et risus.</p>
<hr />
<p>--------- This is the last line ---------</p>
</div>
</body>
What went wrong?
I figured out what was wrong. When you're rotating to the left by 90 degrees (-90 degrees) with a transform-origin: top right, the box extends the containing html to the right, thus causing it to be scrollable to the right.
However, when you're rotating to the right by 90 degrees (+90 degrees) with a transform-origin: top left, the box extends the containing html to the left and this does not cause it to be scrollable to the left. There has been a discussion about this particular scenario here at SO. Do try reading it.
Workaround
Knowing that, we can instead manipulate the transform-origin to bottom left so that the box rotates in such a way that it extends the containing html to the right and causes the scrollbar to appear. However, doing this, we need to adjust it so that the position is correct. To do that, we can use another transform function, which is translate. I changed your .rotator and .rotator-right classes to utilize translateX and translateY before rotating so that the position after rotation is correct.
(I recommend playing with transform function. Try making one item that applies rotate before translate and one item that applies translate before rotate. The results are different! You'll learn something new.)
I advise trying to adjust transform and overflow-y values to see what I mean by the box extending the containing html to the right and left on both .rotator and .rotator-right class.
Here's a working solution. I added configured your CSS part on .rotator-right and .rotator. You're not using left or top anymore to adjust the position, you're giving that control to transform function wholly. Try running it on full-screen and enable mobile mode on your browser.
function myFunction() {
var wSH = window.screen.height
var wI = window.innerHeight
var dBC = document.body.clientHeight
var wO = window.screen.orientation.type
document.getElementById("wSH").textContent = wSH
document.getElementById("wI").textContent = wI
document.getElementById("wO").textContent = wO
document.getElementById("dBC").textContent = dBC
var bodyDocument = document.body;
var iosDevice = /iPad|iPhone|iPod/.test(navigator.userAgent) &&
!window.MSStream;
if (window.matchMedia('(orientation: landscape)').matches &&
(
(window.screen.height < 425) /* for android */ ||
(iosDevice && window.innerHeight < 425) /* for iOS */
)
) {
bodyDocument.classList.add('rotator-right')
} else {
bodyDocument.classList.remove('rotator-right')
}
document.getElementsByTagName('body')[0].style.display = 'none';
setTimeout(function() {
document.getElementsByTagName('body')[0].style.display = 'block';
if (bodyDocument.classList.contains('rotator-right')) window.scrollTo(bodyDocument.getBoundingClientRect().width, 0)
}, 200);
}
window.addEventListener("resize", myFunction);
myFunction();
* {
box-sizing: border-box;
}
body,
html {
margin: 0;
}
p {
margin: 0;
padding: 16px 0;
}
#media screen and (orientation:landscape) {
.rotator {
transform-origin: top right;
width: 100vh;
/* Try playing with these properties to see the transformation */
/* Use scale at the very end of transform if needed */
transform: translateX(-100%) rotate(-90deg);
transition: all .5s ease;
overflow-y: hidden;
}
.rotator-right {
transform-origin: bottom left;
width: 100vh;
/* Try playing with these properties to see the transformation */
/* Use scale at the very end of transform if needed */
transform: translateY(-100%) rotate(90deg) scale(0.85);
transition: all .5s ease;
overflow-y: hidden;
}
}
<body id='body'>
<div class='container'>
<p>Click the button to display this frame's height and width.</p>
<p id="demo"></p>
<p>window.scroll.height :
<span id="wSH"></span>
</p>
<p>window.innerHeight :
<span id="wI"></span>
</p>
<p>document.body.clientHeight :
<span id="dBC"></span>
</p>
<p>window.orientation :
<span id="wO"></span>
</p>
<button>Try it</button>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac magna nec nisi accumsan blandit. Quisque feugiat commodo sapien quis pharetra. Sed elit justo, volutpat ac eleifend eu, aliquet in orci. Proin fermentum purus nec ante molestie sodales.
Cras malesuada nunc purus, id iaculis magna suscipit nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam pulvinar eu lectus eu sollicitudin. Integer mauris sem, posuere vel est a, eleifend pulvinar
lectus. Duis sapien velit, tristique imperdiet purus nec, scelerisque porta massa. Proin commodo faucibus purus, in volutpat lectus maximus sed. Suspendisse potenti.
</p>
<p>
Curabitur maximus elementum nibh, at rhoncus dolor auctor in. Donec ultrices enim ac est sollicitudin euismod. Mauris tempor eget dolor sit amet consequat. Suspendisse volutpat efficitur eros, vitae imperdiet tellus. Vestibulum aliquam nunc eget ante
porta gravida. Aliquam cursus fermentum accumsan. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur condimentum tempus mollis. Suspendisse luctus posuere sapien, ut pharetra lacus eleifend ut.
</p>
<p>
Morbi eu finibus quam. Morbi pharetra mollis diam id hendrerit. Etiam rhoncus, dolor quis hendrerit consectetur, est urna efficitur erat, in vestibulum nunc erat eget sapien. Curabitur ut massa semper, feugiat quam eu, rhoncus tortor. Ut quis convallis
diam, et euismod sem. Cras volutpat libero id nulla varius, at egestas elit consectetur. Nulla posuere neque risus, eu mollis dolor vehicula ut. Donec a ipsum eu justo malesuada lacinia in porta nibh. Aenean risus erat, molestie elementum eros vitae,
tempor porta lacus. Fusce et bibendum est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas vel est ac justo vehicula commodo eget eget magna. Etiam vitae aliquet eros, rutrum porta ligula. Nulla at
fringilla lacus, sed commodo justo. Aenean imperdiet maximus tortor sed volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Curabitur finibus dictum condimentum. Nulla scelerisque dui elit, sit amet lobortis tellus mollis ut. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque ac ex sapien. Maecenas ac pellentesque nisi, id mattis
ligula. Sed lacinia feugiat ultricies. Sed ultrices facilisis efficitur. Vestibulum quis libero nec quam convallis mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacus neque, sodales sit amet facilisis eu, viverra vel nulla.
Nullam nec dapibus metus. Aenean pulvinar molestie dolor. In hac habitasse platea dictumst.
</p>
<p>
Nunc commodo magna id nisl ultricies porta. Nulla eget purus et mi malesuada hendrerit. Aenean euismod mauris placerat est dapibus, venenatis posuere lacus fermentum. Cras purus lorem, tristique non semper sit amet, pulvinar a ligula. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse ultricies ultrices posuere. Nulla eu pellentesque ante. Curabitur consequat odio eget purus vestibulum, nec vestibulum lacus mollis. Etiam cursus, ipsum vehicula
auctor rhoncus, diam massa fermentum nibh, ac tincidunt neque arcu et risus.</p>
<hr />
<p>--------- This is the last line ---------</p>
</div>
</body>
One unrelated concern of mine: you used this code to detect if a device is iOS: /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;. I can't seem to find a proper documentation on that so it may be inaccurate code. Furthermore, from MDN about user agent sniffing:
It's worth re-iterating: it's very rarely a good idea to use user agent sniffing. You can almost always find a better, more broadly compatible way to solve your problem!
Also, it seems like Safari (iOS) also supports window.screen.height.
When the user selects the link for the modal, the body overflow is hidden, but the scrolling for the modal is hidden as well even when I have the modal as being overflow: auto. I would like for the modal to be able to scroll without what is behind the overlay to scroll as well.
HTML
<a>View Proposal Details</a>
<div class='popup'>
<div class="popup-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis quis mauris tristique rutrum. Suspendisse nisi turpis, pharetra porta porta eu, interdum ac eros. Praesent nisl nunc, laoreet ut consectetur sed, interdum ac ligula. Aliquam sit amet efficitur velit. Donec malesuada nec est ac feugiat. Nam gravida ornare volutpat. Vivamus ipsum mi, laoreet sed mattis id, rutrum sit amet massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Nullam congue auctor ligula at venenatis. Integer varius tortor quis lacus luctus, vel dignissim leo tincidunt. Aliquam eleifend cursus vulputate. Sed vitae dolor at elit porta tristique. In quam arcu, posuere ac lorem nec, finibus imperdiet nibh. Etiam eu tincidunt metus, nec tristique eros. Nullam tempor lorem sed sapien scelerisque, nec rutrum risus tempor. Sed blandit ipsum accumsan ipsum porta consectetur. Curabitur imperdiet justo non purus euismod blandit. Ut cursus dolor mauris, vitae sagittis nisl sagittis at. Sed in feugiat nisi. Pellentesque egestas mi a mi dictum, vel posuere risus malesuada. Etiam tincidunt volutpat neque, vel lobortis orci tristique in. In hac habitasse platea dictumst. Nullam sed rutrum orci.
Proin pellentesque arcu ut justo ullamcorper dignissim. Sed eget enim sed nibh convallis maximus ac ac odio. In tortor risus, luctus sit amet enim non, luctus faucibus leo. Nulla nec mauris vitae mauris tincidunt mollis nec sit amet velit. Proin gravida neque eu eros blandit vulputate. Fusce tristique interdum scelerisque.
Donec vel laoreet nunc, in tristique risus. Phasellus ultrices orci mi, eget imperdiet libero ultrices quis. Phasellus iaculis, ante et dictum mollis, est ipsum feugiat turpis, condimentum sagittis ligula diam a erat. Donec porta, magna sit amet pellentesque pharetra, erat turpis semper lorem, ac varius metus arcu et felis. Vestibulum facilisis ac lorem ut blandit.
</div>
</div>
CSS
.popup { position:fixed;z-index:8;left:31%;width:625px;padding:0;top:70px;background:#fff;overflow:auto;display:none;box-shadow:5px 5px 10px 0 rgba(0,0,0,0.25)}
JQuery
function opendialog(container) {
$(container).fadeIn(); //open
if( $(container).height() < $(window).height() ) { //centralize vertically
$(container).css({
'top':'50%',
'margin-top':'-'+$(container).height()/2+'px'
});
} else {
$(container).css('position','absolute');
}
$('.overlay').fadeIn();
}
$('.cancel').click(function(){ //close clicking on overlay, close button and cancel button
$('body').css('overflow', 'auto');
closedialog();
})
$('a').click(function(){
$('body').css('overflow', 'hidden');
opendialog('.popup');
})
If you want the body to scroll, just remove the line
$('body').css('overflow', 'hidden');
If you want the modal itself to move down the screen, you'll want to add an outer div that takes up the entire page and apply overflow: scroll to that.
<div id="popup-outer">
<div id="popup">[...]</div>
</div>
One good way to do this is to set fixed values for top, bottom, left, and right, removing the value for width. Then you can be assured your modal is always centered and optimally sized for the screen, and, of course, you won't shove your scrollbar off-screen right.
.popup {
display: none;
position: fixed;
z-index: 8;
top: 70px;
bottom: 20px;
left: 20px;
right: 20px;
padding: 0;
background: #fff;
overflow: auto;
box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.25)
}
You can also keep the width fixed and set margin-left and margin-right to auto provided that all container elements have some sort of width set, so that that the browser can actually calculate the margins.
Simple fiddle here.
I made my divs scroll over each other, without them scrolling upwards out of the screen, from example (here jsfiddle ).
(function($){
/* Store the original positions */
var d1 = $('.one');
var d1orgtop = d1.position().top;
var d2 = $('.two');
var d2orgtop = d2.position().top;
var d3 = $('.three');
var d3orgtop = d3.position().top;
var d4 = $('.four');
var d4orgtop = d4.position().top;
/* respond to the scroll event */
$(window).scroll(function(){
/* get the current scroll position */
var st = $(window).scrollTop();
/* change classes based on section positions */
if (st >= d1orgtop) {
d1.addClass('latched');
} else {
d1.removeClass('latched');
}
if (st >= d2orgtop) {
d2.addClass('latched');
} else {
d2.removeClass('latched');
}
if (st >= d3orgtop) {
d3.addClass('latched');
} else {
d3.removeClass('latched');
}
if (st >= d4orgtop) {
d4.addClass('latched');
} else {
d4.removeClass('latched');
}
});
})(window.jQuery);
.container {
background: black;
position: relative;
}
.spacer {
width: 0;
height: 600px;
float: left;
clear: both;
}
.one { background:red; width: 100%; height: 600px; position: relative; float: left; }
.two { background: blue; width: 100%; height: 600px; position: relative; float: left; }
.three { background: green; width: 100%; height: 600px; position: relative; float: left; }
.four { background: yellow; width: 100%; height: 600px; position: relative; float: left; }
.latched { position: fixed; top: 0; left: 8px; right: 8px; width: auto; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 1. Items that are not in fixed position * latched * scroll normally -->
<!-- 2. Items that go above the scroll position are given .latched -->
<!-- 3. If they scroll down again, they lose .latched -->
<!-- 4. div.spacer included to pad out space when content sections become latched -->
<div class="spacer"></div>
<div class="one">
<h2>ONE</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec lacus risus, eu sagittis felis. Praesent in feugiat elit. Pellentesque sem turpis, ornare et porttitor quis, placerat sit amet lacus. Fusce in purus sit amet sapien vestibulum volutpat ac at velit. Donec vel libero risus. Aliquam aliquet arcu vel justo molestie euismod. Suspendisse lorem massa, venenatis non congue a, commodo et nunc. Phasellus rhoncus, arcu a tristique adipiscing, mi dolor ullamcorper lacus, vel adipiscing ipsum mi ut augue. Pellentesque rhoncus dapibus tellus. Proin nec ante vel quam posuere mollis non vitae sem. Praesent hendrerit urna ac nisl consequat placerat. Ut placerat sollicitudin cursus. Curabitur orci magna, rhoncus et tempor non, volutpat nec erat. Sed ultrices ornare volutpat.</p>
<p>Nunc imperdiet felis a purus feugiat vel euismod urna tristique. Maecenas sit amet felis tincidunt nulla tincidunt convallis nec eu purus. Donec auctor mauris non nisi rutrum euismod. Donec vehicula ipsum sit amet enim viverra sit amet commodo nulla mollis. Maecenas iaculis tincidunt quam et adipiscing. Vivamus eleifend nulla lobortis augue ultrices porta. Ut ut turpis dui, in vehicula nunc. In hac habitasse platea dictumst. Aliquam erat volutpat.</p>
</div>
<div class="spacer"></div>
<div class="two">
<h2>TWO</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec lacus risus, eu sagittis felis. Praesent in feugiat elit. Pellentesque sem turpis, ornare et porttitor quis, placerat sit amet lacus. Fusce in purus sit amet sapien vestibulum volutpat ac at velit. Donec vel libero risus. Aliquam aliquet arcu vel justo molestie euismod. Suspendisse lorem massa, venenatis non congue a, commodo et nunc. Phasellus rhoncus, arcu a tristique adipiscing, mi dolor ullamcorper lacus, vel adipiscing ipsum mi ut augue. Pellentesque rhoncus dapibus tellus. Proin nec ante vel quam posuere mollis non vitae sem. Praesent hendrerit urna ac nisl consequat placerat. Ut placerat sollicitudin cursus. Curabitur orci magna, rhoncus et tempor non, volutpat nec erat. Sed ultrices ornare volutpat.</p>
<p>Nunc imperdiet felis a purus feugiat vel euismod urna tristique. Maecenas sit amet felis tincidunt nulla tincidunt convallis nec eu purus. Donec auctor mauris non nisi rutrum euismod. Donec vehicula ipsum sit amet enim viverra sit amet commodo nulla mollis. Maecenas iaculis tincidunt quam et adipiscing. Vivamus eleifend nulla lobortis augue ultrices porta. Ut ut turpis dui, in vehicula nunc. In hac habitasse platea dictumst. Aliquam erat volutpat.</p>
</div>
<div class="spacer"></div>
<div class="three">
<h2>THREE</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec lacus risus, eu sagittis felis. Praesent in feugiat elit. Pellentesque sem turpis, ornare et porttitor quis, placerat sit amet lacus. Fusce in purus sit amet sapien vestibulum volutpat ac at velit. Donec vel libero risus. Aliquam aliquet arcu vel justo molestie euismod. Suspendisse lorem massa, venenatis non congue a, commodo et nunc. Phasellus rhoncus, arcu a tristique adipiscing, mi dolor ullamcorper lacus, vel adipiscing ipsum mi ut augue. Pellentesque rhoncus dapibus tellus. Proin nec ante vel quam posuere mollis non vitae sem. Praesent hendrerit urna ac nisl consequat placerat. Ut placerat sollicitudin cursus. Curabitur orci magna, rhoncus et tempor non, volutpat nec erat. Sed ultrices ornare volutpat.</p>
<p>Nunc imperdiet felis a purus feugiat vel euismod urna tristique. Maecenas sit amet felis tincidunt nulla tincidunt convallis nec eu purus. Donec auctor mauris non nisi rutrum euismod. Donec vehicula ipsum sit amet enim viverra sit amet commodo nulla mollis. Maecenas iaculis tincidunt quam et adipiscing. Vivamus eleifend nulla lobortis augue ultrices porta. Ut ut turpis dui, in vehicula nunc. In hac habitasse platea dictumst. Aliquam erat volutpat.</p>
</div>
<div class="spacer"></div>
<div class="four">
<h2>FOUR</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec lacus risus, eu sagittis felis. Praesent in feugiat elit. Pellentesque sem turpis, ornare et porttitor quis, placerat sit amet lacus. Fusce in purus sit amet sapien vestibulum volutpat ac at velit. Donec vel libero risus. Aliquam aliquet arcu vel justo molestie euismod. Suspendisse lorem massa, venenatis non congue a, commodo et nunc. Phasellus rhoncus, arcu a tristique adipiscing, mi dolor ullamcorper lacus, vel adipiscing ipsum mi ut augue. Pellentesque rhoncus dapibus tellus. Proin nec ante vel quam posuere mollis non vitae sem. Praesent hendrerit urna ac nisl consequat placerat. Ut placerat sollicitudin cursus. Curabitur orci magna, rhoncus et tempor non, volutpat nec erat. Sed ultrices ornare volutpat.</p>
<p>Nunc imperdiet felis a purus feugiat vel euismod urna tristique. Maecenas sit amet felis tincidunt nulla tincidunt convallis nec eu purus. Donec auctor mauris non nisi rutrum euismod. Donec vehicula ipsum sit amet enim viverra sit amet commodo nulla mollis. Maecenas iaculis tincidunt quam et adipiscing. Vivamus eleifend nulla lobortis augue ultrices porta. Ut ut turpis dui, in vehicula nunc. In hac habitasse platea dictumst. Aliquam erat volutpat.</p>
</div>
<div style="clear: both"></div>
<div style="height: 1000px"></div>
Now i want to scroll from div to div with only one scroll (scrolling from section to section)- see example here jsfiddle. while still maintianing the animated effect of one div scrolling over the other div
You'll have to modify your setup a bit. I put your divs into an array and then modified your code so that it kept track of target div for the scroll event. You'll also need to ignore the scroll events generated when you scroll to your element as well. The code from this answer helped in that regard.
Here's your updated code (which also maintains the div-fixing effect):
(function($) {
var prevScroll = 0; //stores last successful scroll
var scrollIdx = 0; //current index in your div array
//array that contains the div object and original offset from the top to handle the animation
var divs = [{
div: $('.one'),
top: $('.one').position().top
}, {
div: $('.two'),
top: $('.two').position().top
}, {
div: $('.three'),
top: $('.three').position().top
}, {
div: $('.four'),
top: $('.four').position().top
}];
var scrollDestination = -1; //stores the target div's offset
// handles div fixing as the scroll transitions from one div to the next
function setLatch(st) {
divs.forEach(function(divObj) {
if (st >= divObj.top) {
divObj.div.addClass('latched');
} else {
divObj.div.removeClass('latched');
}
})
}
/* respond to the scroll event */
$(window).scroll(function(e) {
/* get the current scroll position */
var st = $(window).scrollTop();
var scrollDir = 0;
//reset the latch as the scroll occurs
setLatch(st);
// check the state of the scroll event
if (scrollDestination == -1) { //we're done scrolling
//noop
} else if (st != scrollDestination) { //we're still scrolling, ignore
return;
} else if (st == scrollDestination) { //we're done, but ignore this final scroll event
scrollDestination = -1;
prevScroll = st;
return;
}
//determine the direction of the scroll;
if (st > prevScroll) {
scrollDir = 1;
} else {
scrollDir = -1;
}
if (scrollIdx + scrollDir == divs.length || scrollIdx + scrollDir < 0) {
//do nothing bu update the prevScroll so we can accurately
//capture the direction the next time around
prevScroll = st;
return;
}
scrollIdx += scrollDir;
//record the destination of the next div
scrollDestination = divs[scrollIdx].top;
$('html, body').animate({
scrollTop: divs[scrollIdx].top
}, {
duration: 1000
});
});
})(window.jQuery);
.container {
background: black;
position: relative;
}
.spacer {
width: 0;
height: 600px;
float: left;
clear: both;
}
.one {
background: red;
width: 100%;
height: 600px;
position: relative;
float: left;
}
.two {
background: blue;
width: 100%;
height: 600px;
position: relative;
float: left;
}
.three {
background: green;
width: 100%;
height: 600px;
position: relative;
float: left;
}
.four {
background: yellow;
width: 100%;
height: 600px;
position: relative;
float: left;
}
.latched {
position: fixed;
top: 0;
left: 8px;
right: 8px;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 1. Items that are not in fixed position * latched * scroll normally -->
<!-- 2. Items that go above the scroll position are given .latched -->
<!-- 3. If they scroll down again, they lose .latched -->
<!-- 4. div.spacer included to pad out space when content sections become latched -->
<div class="spacer"></div>
<div class="one">
<h2>ONE</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec lacus risus, eu sagittis felis. Praesent in feugiat elit. Pellentesque sem turpis, ornare et porttitor quis, placerat sit amet lacus. Fusce in purus sit amet sapien vestibulum volutpat
ac at velit. Donec vel libero risus. Aliquam aliquet arcu vel justo molestie euismod. Suspendisse lorem massa, venenatis non congue a, commodo et nunc. Phasellus rhoncus, arcu a tristique adipiscing, mi dolor ullamcorper lacus, vel adipiscing ipsum
mi ut augue. Pellentesque rhoncus dapibus tellus. Proin nec ante vel quam posuere mollis non vitae sem. Praesent hendrerit urna ac nisl consequat placerat. Ut placerat sollicitudin cursus. Curabitur orci magna, rhoncus et tempor non, volutpat nec
erat. Sed ultrices ornare volutpat.</p>
<p>Nunc imperdiet felis a purus feugiat vel euismod urna tristique. Maecenas sit amet felis tincidunt nulla tincidunt convallis nec eu purus. Donec auctor mauris non nisi rutrum euismod. Donec vehicula ipsum sit amet enim viverra sit amet commodo nulla
mollis. Maecenas iaculis tincidunt quam et adipiscing. Vivamus eleifend nulla lobortis augue ultrices porta. Ut ut turpis dui, in vehicula nunc. In hac habitasse platea dictumst. Aliquam erat volutpat.</p>
</div>
<div class="spacer"></div>
<div class="two">
<h2>TWO</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec lacus risus, eu sagittis felis. Praesent in feugiat elit. Pellentesque sem turpis, ornare et porttitor quis, placerat sit amet lacus. Fusce in purus sit amet sapien vestibulum volutpat
ac at velit. Donec vel libero risus. Aliquam aliquet arcu vel justo molestie euismod. Suspendisse lorem massa, venenatis non congue a, commodo et nunc. Phasellus rhoncus, arcu a tristique adipiscing, mi dolor ullamcorper lacus, vel adipiscing ipsum
mi ut augue. Pellentesque rhoncus dapibus tellus. Proin nec ante vel quam posuere mollis non vitae sem. Praesent hendrerit urna ac nisl consequat placerat. Ut placerat sollicitudin cursus. Curabitur orci magna, rhoncus et tempor non, volutpat nec
erat. Sed ultrices ornare volutpat.</p>
<p>Nunc imperdiet felis a purus feugiat vel euismod urna tristique. Maecenas sit amet felis tincidunt nulla tincidunt convallis nec eu purus. Donec auctor mauris non nisi rutrum euismod. Donec vehicula ipsum sit amet enim viverra sit amet commodo nulla
mollis. Maecenas iaculis tincidunt quam et adipiscing. Vivamus eleifend nulla lobortis augue ultrices porta. Ut ut turpis dui, in vehicula nunc. In hac habitasse platea dictumst. Aliquam erat volutpat.</p>
</div>
<div class="spacer"></div>
<div class="three">
<h2>THREE</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec lacus risus, eu sagittis felis. Praesent in feugiat elit. Pellentesque sem turpis, ornare et porttitor quis, placerat sit amet lacus. Fusce in purus sit amet sapien vestibulum volutpat
ac at velit. Donec vel libero risus. Aliquam aliquet arcu vel justo molestie euismod. Suspendisse lorem massa, venenatis non congue a, commodo et nunc. Phasellus rhoncus, arcu a tristique adipiscing, mi dolor ullamcorper lacus, vel adipiscing ipsum
mi ut augue. Pellentesque rhoncus dapibus tellus. Proin nec ante vel quam posuere mollis non vitae sem. Praesent hendrerit urna ac nisl consequat placerat. Ut placerat sollicitudin cursus. Curabitur orci magna, rhoncus et tempor non, volutpat nec
erat. Sed ultrices ornare volutpat.</p>
<p>Nunc imperdiet felis a purus feugiat vel euismod urna tristique. Maecenas sit amet felis tincidunt nulla tincidunt convallis nec eu purus. Donec auctor mauris non nisi rutrum euismod. Donec vehicula ipsum sit amet enim viverra sit amet commodo nulla
mollis. Maecenas iaculis tincidunt quam et adipiscing. Vivamus eleifend nulla lobortis augue ultrices porta. Ut ut turpis dui, in vehicula nunc. In hac habitasse platea dictumst. Aliquam erat volutpat.</p>
</div>
<div class="spacer"></div>
<div class="four">
<h2>FOUR</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec lacus risus, eu sagittis felis. Praesent in feugiat elit. Pellentesque sem turpis, ornare et porttitor quis, placerat sit amet lacus. Fusce in purus sit amet sapien vestibulum volutpat
ac at velit. Donec vel libero risus. Aliquam aliquet arcu vel justo molestie euismod. Suspendisse lorem massa, venenatis non congue a, commodo et nunc. Phasellus rhoncus, arcu a tristique adipiscing, mi dolor ullamcorper lacus, vel adipiscing ipsum
mi ut augue. Pellentesque rhoncus dapibus tellus. Proin nec ante vel quam posuere mollis non vitae sem. Praesent hendrerit urna ac nisl consequat placerat. Ut placerat sollicitudin cursus. Curabitur orci magna, rhoncus et tempor non, volutpat nec
erat. Sed ultrices ornare volutpat.</p>
<p>Nunc imperdiet felis a purus feugiat vel euismod urna tristique. Maecenas sit amet felis tincidunt nulla tincidunt convallis nec eu purus. Donec auctor mauris non nisi rutrum euismod. Donec vehicula ipsum sit amet enim viverra sit amet commodo nulla
mollis. Maecenas iaculis tincidunt quam et adipiscing. Vivamus eleifend nulla lobortis augue ultrices porta. Ut ut turpis dui, in vehicula nunc. In hac habitasse platea dictumst. Aliquam erat volutpat.</p>
</div>
<div style="clear: both"></div>
<div style="height: 1000px"></div>
I am making a page where the page is segregated into two sections, left (70% width) and right (30%). Both the columns have dynamic content in them coming from the database.
What I want is that when the content in the right section finishes the left section should take all the width i.e 100%. 70% its own width and 30% freed by the right section. Here is the pictorial representation of what I want:
How to achieve this using only two divs? i.e left div and right div with percentages.
One might propose that I should Use three divs. One 70%, on the left, 30% on the right and 100% below both the divs but that is not what I want because of the dynamic contents of the divs. I want when the content of the right div is finished the left div should take 100% of the space then. The content on the right div can be 2 lines or 100 lines, that is purely dynamic.
Here is my current HTML structure:
<div class='main'>
<div class='left'></div>
<div class='right'></div>
</div>
Here is my CSS:
<style>
.main { width: 100%; }
.left { float: left; width: 70%; }
.right { float: left; width: 30%; }
</style>
But this is not working, with this code the content on left side stays inside 70% after content on right side is finished. Any suggestions?
Use the float first approach. Move the <div class='right'> above the left div in the mockup, actually, you won't need the left div if you want.
.right {
float: right;
width: 30%;
height: 100px;
background: yellow;
}
<div class='main'>
<div class='right'>right</div>
<div class='left'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tristique euismod pulvinar. Integer tincidunt velit sed sodales gravida. Sed rutrum sapien mi, id lacinia urna vestibulum at. Curabitur eget efficitur purus. Curabitur ultricies lobortis tincidunt. Fusce ultrices congue eros sit amet ullamcorper. Nulla id fringilla purus. Fusce at erat quis magna finibus sollicitudin. Etiam orci dui, consectetur in rhoncus vitae, pharetra sed ligula. Morbi sagittis sem eget lectus blandit ullamcorper. Donec iaculis egestas ante facilisis fermentum. Nam ultrices eu ex vitae sodales. Donec justo mauris, finibus at ex et, bibendum iaculis dui.</p>
<p>Nullam at ex commodo, lacinia purus id, tempus tellus. Aenean vitae gravida neque, et dapibus tellus. Fusce et eleifend arcu, ac vehicula elit. Morbi sagittis urna tortor, dictum commodo erat facilisis ut. Phasellus eget ornare nisl. Donec pellentesque pharetra justo, sed cursus nisi blandit nec. Sed non sagittis nunc, in finibus ex. Sed in ipsum eros. Proin mollis eleifend dui et sollicitudin. Morbi pellentesque laoreet dignissim. Donec ut nunc in elit consectetur porta. Vestibulum eu elit et lacus molestie porta eget a lorem.</p>
</div>
</div>
Example without the left div, the result is the same as above.
.right {
float: right;
width: 30%;
height: 100px;
background: yellow;
}
<div class='main'>
<div class='right'>right</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tristique euismod pulvinar. Integer tincidunt velit sed sodales gravida. Sed rutrum sapien mi, id lacinia urna vestibulum at. Curabitur eget efficitur purus. Curabitur ultricies lobortis tincidunt. Fusce ultrices congue eros sit amet ullamcorper. Nulla id fringilla purus. Fusce at erat quis magna finibus sollicitudin. Etiam orci dui, consectetur in rhoncus vitae, pharetra sed ligula. Morbi sagittis sem eget lectus blandit ullamcorper. Donec iaculis egestas ante facilisis fermentum. Nam ultrices eu ex vitae sodales. Donec justo mauris, finibus at ex et, bibendum iaculis dui.</p>
<p>Nullam at ex commodo, lacinia purus id, tempus tellus. Aenean vitae gravida neque, et dapibus tellus. Fusce et eleifend arcu, ac vehicula elit. Morbi sagittis urna tortor, dictum commodo erat facilisis ut. Phasellus eget ornare nisl. Donec pellentesque pharetra justo, sed cursus nisi blandit nec. Sed non sagittis nunc, in finibus ex. Sed in ipsum eros. Proin mollis eleifend dui et sollicitudin. Morbi pellentesque laoreet dignissim. Donec ut nunc in elit consectetur porta. Vestibulum eu elit et lacus molestie porta eget a lorem.</p>
</div>
I like to use
display: flex;
http://codepen.io/hesonline/pen/AXRGKd
Click on the header of the right section to remove it.
I am trying to set vertical scroll bar to the div2 to replace the default browser vertical scroll bar.
.div1 {
height: 200px;
}
.div2 {
overflow-y: auto;
height: 500px;
}
<div id='container' style="height:100%">
<div class='div1'>
div1 content
</div>
<div class='div2'>
div2 content
</div>
</div>
With the above style, document is left with blank space at the bottom since height of div2 is not exactly occupying the entire document height. How do I fix that?
The steps to achieve what you want are:
Set both html's and body's margin and padding to 0.
Set the header's height to the fixed height you want: in your case, 200px.
Set the .main's height to 100% of the viewport less the header height: calc(100vh - 200px).
Set the .main's overflow-y to auto.
Create a section into the .main, and set the margin you want to show your content (optional).
And then, we're done! Take a look at the example below (if you want to test it in a better way, click on the Full Page button, and then play with your window's resizing etc):
html,
body {
overflow: hidden;
padding: 0;
margin: 0;
}
header {
height: 120px;
background-color: blue;
}
div.main {
height: calc(100vh - 120px);
background-color: red;
overflow-y: auto;
}
div.main > section {
margin: 10px;
}
div.main > div > p {
text-align: justify;
}
<header>
</header>
<div class="main">
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt enim sit amet diam bibendum, ut rhoncus est molestie. Ut vulputate egestas mauris, eget ultricies tellus aliquet nec. Mauris nec neque et lorem volutpat feugiat eget sit amet
erat. Nullam luctus ultricies augue ut cursus. Mauris pulvinar velit at venenatis semper. Quisque non dolor ante. Nulla tempus id turpis et placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum justo elit, rhoncus vitae
massa non, condimentum ornare quam. Duis sit amet orci a risus mollis gravida et quis augue. Donec sed felis ante. Vestibulum rutrum non dolor quis finibus. Vestibulum ultricies leo eget mi elementum, vel vestibulum felis maximus. Donec congue lorem
vel ante mattis, eu luctus magna finibus. Donec sit amet dui quam.
</p>
<p>
In ullamcorper, nibh eget venenatis imperdiet, augue ante porttitor mauris, nec scelerisque tortor nisi eu arcu. Phasellus libero ligula, eleifend a lobortis in, cursus in tellus. Morbi volutpat, sem a dignissim venenatis, velit nulla vehicula sem, ut
fermentum augue eros sit amet nisi. Vivamus eget ex id turpis scelerisque lobortis sed sed arcu. Nulla facilisi. Curabitur hendrerit iaculis justo, at iaculis est facilisis sit amet. Donec sem tellus, posuere et metus id, consectetur vehicula sapien.
Ut eros quam, tempor vitae quam sed, efficitur faucibus sapien. Mauris varius velit orci, sit amet fermentum neque auctor ac. Nullam pretium sed urna et pellentesque.
</p>
<p>
Nunc id odio ligula. Sed ut dolor vitae sem fringilla condimentum. Sed venenatis lacus a magna egestas, nec volutpat quam ullamcorper. Maecenas volutpat eu magna nec ultrices. In egestas, risus id porta condimentum, odio urna ultricies mi, ut elementum
magna tortor quis eros. Sed a hendrerit felis. Curabitur id sem consectetur, luctus velit in, sollicitudin elit. Proin ac commodo tortor. Proin imperdiet id massa at sollicitudin. Pellentesque enim arcu, venenatis ut dictum et, ornare at tortor.
Donec et urna nec metus rhoncus auctor. Nunc id nisi nec sem condimentum vehicula a in arcu.
</p>
<p>
Proin eleifend sem massa, at auctor eros porta congue. Aliquam nec aliquet justo, at cursus ipsum. Cras justo leo, varius vel accumsan eget, sagittis sit amet lorem. Donec pulvinar ante ut efficitur eleifend. Duis tincidunt metus non nunc accumsan, vel
accumsan velit rhoncus. Nunc arcu magna, sollicitudin non urna in, pellentesque dignissim eros. Nam placerat sodales rutrum. Sed quis placerat leo. Nunc porttitor nisi nunc, in feugiat dolor accumsan nec. Aliquam gravida diam ac tempor sodales.
Ut in sapien gravida odio molestie vehicula sed vel nulla. Integer sed ipsum semper, auctor massa eget, viverra justo. Nullam mattis suscipit lorem vel mattis. Morbi non aliquet nunc. In hac habitasse platea dictumst.
</p>
<p>
Pellentesque dapibus sapien quis congue porta. Maecenas faucibus ex nisi, in varius risus imperdiet ac. Aliquam tristique egestas ligula, sed vestibulum lacus mollis vel. Nunc non ante ut quam placerat suscipit. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. In a viverra augue, a dignissim justo. Aliquam volutpat nibh ut tellus interdum suscipit. Praesent mi sem, mollis in libero vel, pretium accumsan ex. Nullam gravida diam quis semper faucibus. Nullam cursus felis dolor, sed egestas
ex lobortis et. Vivamus at maximus felis, vel posuere purus. Quisque pellentesque risus nec posuere suscipit. Aliquam eleifend tempus ante, vel vehicula nunc facilisis quis. Mauris lacinia, felis at ultrices luctus, lacus nisl molestie neque, et
varius urna velit at massa. Nulla facilisi.
</p>
</section>
</div>
I'm not absolutely sure what you're trying to do but try adding this to your css and see if it fixes it.
html, body { height: 100%; }
Try this. The border on div1 and div2 is just to show the height of the div. Feel free to remove it ;)
#container {
height: 100%;
position: absolute;
}
.div1 {
height: 200px;
position: relative;
border: 2px solid yellow;
}
.div2 {
overflow-y: auto;
position: relative;
height: 100%;
border: 2px solid red;
}
<div id='container' style="height:100%">
<div class='div1'>
div1 content
</div>
<div class='div2'>
div2 content
</div>
</div>