오버플로 숨김 및 스크롤

Question

내 웹 사이트의 홈페이지에 비정상적인 스크롤 기능을 만들려고하는데 최선의 방법을 잘 모릅니다.

배경 화면이있는 상단 (위치 : 절대, 높이 : 100 %)의 전체 화면 패널 (패널 1)을 갖습니다. 사용자가이 섹션에있을 때 오버플로를 숨기고 싶습니다. 사용자가 마우스 휠 또는 화살표 키를 사용하여 스크롤하려고하면 페이지가 아래로 슬라이드됩니다 (또는이 경우 패널이 절대 위치로 위로 이동합니다). CSS3를 사용하여 큐빅 베 지어 효과를 사용하고 싶습니다. 그러면 패널 2이 표시됩니다. 여기에서 오버플로가 표시되어야하며 사용자가 정상적으로 스크롤 할 수 있어야합니다. 사용자가 위로 스크롤하여 패널 2의 상단에 도달하면 오버플로가 숨겨진 상태로 돌아가고 상단 패널이 다시 아래로 슬라이드되기를 원합니다.

죄송합니다. 이해하기 어렵다면, 내가 생각할 수있는 가장 명확한 방법으로 설명하려고 시도했습니다! 나는 waypoint.js로 놀아 보려고 노력했지만,이 작업을 수행하는 것이 필요한지 확신합니다. 그 그림은 나의 요점을 명확하게하는 데 도움이 될 수 있습니다.

데모 그림

는 사실은 내가 찾고 있어요 정확한 효과가 웹 사이트를 발견했습니다,하지만 난 그들이 그것을 만든 방법을 잘 모릅니다. http://mariadelaguardia.com/

Answer 1

DOMMouseScroll으로 스크롤을 내릴 수 있습니다. 첫 번째와 두 번째 요소는 절대치가 z-index이어야합니다. 두 번째 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를 넣어. 모든 브라우저에서 작업하십시오.