Jump to content
Search Community

HTML overflow: hidden Preventing JavaScript Scrolling in Parallax Application

krishie test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

Hi krishie  :)

 

pls remove  overflow: hidden; from html tag CSS and just add to body 

 

http://phrogz.net/css/htmlvsbody/bodyoverflowing.png

Hi Diaco,

 

Thanks for the reply. I did as you suggested but doing that removes the parallax effect from the page which I want to have. I did that earlier, but it just removes the parallax effect. I guess it's the html tag CSS height property, which is constraining the scroll.

 

Do you have any other suggestion or reference to any post where parallax scrolling is implemented ONLY IN GSAP (NO JQUERY OR ANY OTHER LIBRARY). I tried to search a lot, but I am not getting a pure GSAP implementation.

Link to comment
Share on other sites

Hi again :)

 

i've checked that in FF and everything works as expected , i think you just need to check CSS prefixes/setting , pls check and edit that with an online editor like Codepen : 

See the Pen PwQRwB by anon (@anon) on CodePen

 

and there's many type of parallax effect , but for first step , i think you can check this out  , if there was jquery in this example or others you can turn the codes to native JS and GSAP codes :

 

See the Pen aEkwL?editors=001 by bassta (@bassta) on CodePen

 

you can use something like ScrollMagic too :

 

http://janpaepke.github.io/ScrollMagic/

  • Like 1
Link to comment
Share on other sites

Whats happening is that you have overflow:hidden set on the <html> tag .. and then overflow-x:hidden set on the <body> tag. Having both CSS properties on both is causing the JS conflict.

 

See the Pen ogEVXw by jonathan (@jonathan) on CodePen

 

Instead of removing overflow  completely off of the <html> tag.. just leave overflow:hidden;  on the <html> tag and remove overflow-x:hidden that is set on the <body> tag.

 

Change it to this:

html {
    height: 100%;
    overflow: auto; /* leave this here */
}

body{
    /* overflow-x:hidden */ /* comment out this overflow property */
}

:

Its always best practice to leave the overflow:hidden  on the <html> tag rather then the <body> tag

 

MDN overflow: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

 

Happy Tweening! :)

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

I had a similar problem. I was using this auto-reveal sticky header navigation plugin in combination with this pure CSS3 parallax scroll plugin.

 

The:

window.addEventListener('scroll', function(){
    //do something
});

was not firing the function on scroll because of the css:

html {
  overflow: hidden;
}

but body's overflow-y property had the value of auto and was thus scrollable. So I just amended the event listener to listen to the body instead: 

document.body.addEventListener('scroll', function(){
    //do something
});
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...