javascript - 移动一次滚动条改变屏幕的位置

Question

你好，我做了两个 div，每个 div 的高度都覆盖了孔页面。这两个 div 位于彼此的下方。我希望当用户降低鼠标的滚动条时，页面直接转到第二个 div 的开头并且抬起滚动条时，页面直接转到第一个 div 的开头。请帮助我了解如何做到这一点非常感谢。

#up_page{
width:100%;
height:50%;
background-color:red;
}
#down_page{
width:100%;
height:50%;
background-color:blue;
}

<div style="width: 100%; height: 1500px;">
		<div id="up_page">	
		</div>
		<div id="down_page">	
		</div>
	</div>

Answer 1

找到另一个线程，它和你的有同样的问题。

Stackoverflow

        var winH = $(window).height();
        $('.page').height(winH);

        var c = 0;
        var pagesN = $('.page').length;
        var canScroll = true;

        $(document).bind('mousewheel', function(ev, delta) {
         ev.preventDefault();
         if(!canScroll) return;
         delta>0 ? --c : ++c ;    
         if(c===-1){
         c=0;
         }else if(c===pagesN){
          c=pagesN-1;
         }
         canScroll = false;
           var pagePos = $('.page').eq(c).position().top;       
          $('html, body').stop().animate({scrollTop: pagePos},700,     
      
         function(){
         canScroll = true;
         });
         return false; 

         });

这里是一个使用 jQuery 的例子:

工作 jsfiddle

希望这就是您要找的。