オーバーフローが隠されてスクロールする

Question

私のウェブサイトのホームページに珍しいスクロール機能を作成しようとしていますが、これに対処する最善の方法がわかりません。

バックグラウンドフィーチャーを使用して、上部（位置：絶対、高さ：100％）にフルスクリーンパネル（パネル1）を表示します。ユーザーがこのセクションにいるとき、オーバーフローを隠しておきたい。ユーザーがマウスホイールまたは矢印キーを使用してスクロールしようとすると、ページをスライドさせます（この場合、パネルは絶対的な位置にスライドします）。私はCSS3を使って立方体ベジェ効果を使いたいと思っています。これにより、パネル2が明らかになる。ここからオーバーフローが見えるようにし、ユーザーが通常通りスクロールできるようにする必要があります。ユーザーがスクロールしてパネル2の上部に当たったら、オーバーフローを非表示に戻し、上部パネルを後方にスライドさせたい。

謝罪これが理解しにくい場合は、私が考えることができる最も明瞭な方法で説明しようとしました！私はwaypoint.jsで遊んでみましたが、これがこの作業をするために必要なのかどうかは確かです。イラストは私のポイントをより明確にするのに役立つかもしれません。

デモイラスト

私は実際に私が探している正確な効果を持っているウェブサイトを見つけたが、私は、彼らはそれを作成した方法を知ってはいけません。 http://mariadelaguardia.com/

Answer 1

DOMMouseScrollでスクロールするかどうかを検出できます。 1番目と2番目の要素の絶対値はz-indexでなければなりません。 2番目のdivはoverflow:hiddenにする必要があります。アニメーションが終了した後、あなたは、第二の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>

私はwheelでDOMMouseScrollを交換した

UPDATEを置きます。すべてのブラウザで作業します。