I am implementing a web page with Parallax scrolling. I have referred a code from net. Here, I am having html { overflow: hidden } which is preventing me to smooth scroll to a particular div in my HTML. I tried using GSAP, but html { overflow: hidden } is not allowing to get the desired effect. But when I remove it, scroll works perfectly but, parallax effect doesn't happen.
Following is my code for reference. Please someone help & let me understand the reason behind it.
CSS
@import url(http://fonts.googleapis.com/css?family=Nunito);
html {
height: 100%;
/* OVERFLOW HIDDEN NOT ALLOWING JAVASCRIPT SCROLL */
overflow: hidden;
}
body {
margin:0;
padding:0;
/* perspective: 1px;
transform-style: preserve-3d; */
height: 100%;
overflow-x: hidden;
font-family: Nunito;
}
h1 {
font-size: 250%;
margin: 0;
padding: 0;
}
p {
font-size: 140%;
line-height: 150%;
color: #333;
}
.slide {
position: relative;
min-height: 100vh;
box-sizing: border-box;
box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
transform-style: inherit;
}
.slide:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left:0;
right:0;
}
.title {
width: 50%;
padding: 5%;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
.slide:nth-child(2n) .title {
margin-left: 0;
margin-right: auto;
}
.slide:nth-child(2n+1) .title {
margin-left: auto;
margin-right: 0;
}
.slide, .slide:before {
background: 50% 50% / cover;
}
.header {
text-align: center;
/*font-size: 175%;*/
color: #fff;
text-shadow: 0 2px 2px #000;
}
#title {
background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-6.jpg");
background-attachment: fixed;
}
#title h1 {
padding-top: 80px;
}
#slide1:before {
background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-4.jpg");
transform: translateZ(-1px) scale(2);
z-index:-1;
}
#slide2 {
background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-3.jpg");
background-attachment: fixed;
}
#slide3:before {
background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-5.jpg");
transform: translateZ(-1px) scale(2);
z-index:-1;
}
#slide4 {
background: #222;
}
.fixed-header {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1;
text-align: center;
color: #fff;
}
HTML BODY
<body>
<div id="scroll" class="fixed-header">CLICK HERE TO SCROLL</div>
<div id="title" class="slide header">
<h1>Pure CSS Parallax</h1>
</div>
<div id="slide1" class="slide">
<div class="title">
<h1>Slide 1</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
</div>
</div>
<div id="slide2" class="slide">
<div class="title">
<h1>Slide 2</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
</div>
</div>
<div id="slide3" class="slide">
<div class="title">
<h1>Slide 3</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
</div>
</div>
<div id="slide4" class="slide header">
<h1>The End</h1>
</div>
</body>
JavaScript
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/plugins/ScrollToPlugin.min.js"></script>
<script>
(function() {
var
$ = function(selector, el) {
if (!el) {el = document;}
return el.querySelector(selector);
},
$$ = function(selector, el) {
if (!el) {el = document;}
return el.querySelectorAll(selector);
};
$('#scroll').addEventListener('click', function(e) {
// GSAP CODE
var posTop = $('#slide1').offsetTop;
TweenLite.to(window, 2, {scrollTo: posTop});
});
}());
</script>
Kindly help.