Overflow hidden and scrolling

Question

i'm looking to create an unusual scroll feature on the homepage of my website but i'm not sure of the best way to tackle it.

I will have a full screen panel (panel 1) at the top (position:absolute, height:100%) with a background feature. When the user is on this section, I want the overflow to be hidden. When the user tries to scroll (with mousewheel or arrow key), I want the page to slide down (or in this case, the panel to slide up as its positioned absolute). I'd like to use a cubic-bezier effect using CSS3. This will reveal panel 2. From here on, the overflow should be visible and should allow the user to scroll as normal. Once the user scrolls up and hits the top of panel 2, I want the overflow to return to hidden and for the top panel to slide back down.

Apologies if this is difficult to understand, i've tried to explain it in the clearest way I can think of! I've tried playing around with waypoint.js, but i'm sure if this is necessary to make this work. The illustration might help to make my point clearer.

Demo illustration

I've actually found a website that has the exact effect that i'm looking for, but I dont know how they've created it. http://mariadelaguardia.com/

I forgot to mention that the site is fully responsive! – Baz Oct 26 '16 at 10:14 — Baz, Oct 26 '16 at 10:14

P. Frank · Answer 1 · 2017-03-15T14:06:28.437

You can detect if scroll down with DOMMouseScroll. You first and second element must be in absolute with z-index. The second div must be in overflow:hidden. After the animation is finished you put the second div overflow:auto

var isScrolled = 0;
$('body').bind('wheel', function(e){
    if(e.originalEvent.deltaY > 0) {
      if(isScrolled == 0){
        isScrolled = 1;
        $("#header").animate({
          top:- $("#header").height()
        },1000,function(){
          $("#content").css({overflow:"auto"})
          isScrolled = 0;
        });
      }
    }
    if(e.originalEvent.deltaY < 1) {
      if(isScrolled == 0){
        isScrolled = 1;
        $("#header").animate({
          top: 0
        },1000,function(){
          $("#content").css({overflow:"hidden"})
          isScrolled = 0;
        });
      }
    }
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header" style="z-index:1;background:red;position:absolute;width:100%;height:100%;left:0;top:0">
</div>

<div id="content" style="overflow:hidden;z-index:0;background:blue;position:absolute;width:100%;height:100%;left:0;top:0">
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p>
   <p>test</p> 
   <p>test</p>
   <p>test</p>
   <p>test</p>
</div>

UPDATE

I have replaced DOMMouseScroll by wheel. Work on all browser.

Thanks for your answer, it's kind of what i'm looking for. However, when I try to replicate this, it doesn't work...? — Baz, Oct 26 '16 at 11:53
Please let's me see your code. because i dont know what not working for you — P. Frank, Oct 26 '16 at 11:54
It is recommended not to use `DomMouseScroll` for production sites since it is non-standard feature and does not work in all browsers. https://developer.mozilla.org/en-US/docs/Web/Events/DOMMouseScroll — tejasbubane, Mar 15 '17 at 12:31

Overflow hidden and scrolling

1 Answers1