スクロール時の垂直フルハイトdiv間のアニメーション化されたスイッチ

Question

1ページに3つのdivがあり、それぞれの高さは100vhです。だから私はそれらの間で自動的に切り替えるしたい、ユーザーがスクロール（上または下）時にアクティブになります。私はscrollTop（）関数で条件を書いています。例えば

：

if($("#first").scrollTop() > 10){ /*go to next div automatically*/ } 

それは最初のdivのために完璧に動作しますが、最初の条件は常に真ので、再び不可能トップにスクロールします。私には分かりません。私を助けてください。

Answer 1

これは、あなたがやろうとしていることに役立つ小さなコードスニペットです。基本的に、そのような機能の異なる実装が存在する可能性があります。私がコードに書いたコメントを読んでみて、スニペットで遊んで、ロジックを理解してより良くしてみてください。あなたが何か問題があれば教えてください。

$(document).ready(function() { 
 
    
 
    /* define some helper variables */ 
 
    var 
 
    /* body jQuery wrapper */ 
 
    body = $('html, body'), 
 
    
 
    /* window jQuery wrapper */ 
 
    win = $(window), 
 
    
 
    /* divs jQuery wrapper */ 
 
    divs = $('.view'), 
 
    
 
    /* divs length, which we will use to determine if we are on the last/first div */ 
 
    divsLen = divs.length - 1, 
 
    
 
    /* Last scroll position which will help us to determine which is the scroll direction */ 
 
    lastScroll = 0, 
 
    
 
    /* Currently showing div's index */ 
 
    divIndex = 0, 
 
    
 
    /* Flag to determine if scrolling animation is active */ 
 
    scrolling = false; 
 

 
    /* Do the magic */ 
 
    win.on('scroll', _handleScroll); 
 

 
    function _handleScroll(e) { 
 
    
 
    /* Do nothing if currently running animation is not finished */ 
 
    if (scrolling) { 
 
     return false; 
 
    } 
 

 
    scrolling = true; 
 

 
    /* Determine scroll direction and the div to which we will scroll */ 
 
    if (win.scrollTop() > lastScroll) { 
 
     /* scrolling down */ 
 
     if (divIndex < divsLen) { 
 
     /* increment divIndex so we scroll to next div */ 
 
     divIndex++; 
 
     } else { 
 
     /* return if we are on the last element to prevent flicker animation */ 
 
     scrolling = false; 
 
     return false; 
 
     } 
 
    } else { 
 
     /* scrolling up */ 
 
     if (divIndex > 0) { 
 
     /* decrement divIndex so we scroll to previous div */ 
 
     divIndex--; 
 
     } else { 
 
     /* return if we are on the first element to prevent flicker animation */ 
 
     scrolling = false; 
 
     return false; 
 
     } 
 
    } 
 
    
 
    /* Process the animation */ 
 
    body.stop().animate({ 
 
     scrollTop: divs.eq(divIndex).offset().top 
 
    }, 500, function() { 
 
    
 
     /* Use a small timeout before setting scrolling = false, otherwise scroll event is triggered immediately and code is not working fine */ 
 
     setTimeout(function() { 
 
     
 
     /* reset the scrolling flag */ 
 
     scrolling = false; 
 
     
 
     /* save last scroll position */ 
 
     lastScroll = win.scrollTop(); 
 
     
 
     }, 50); 
 
    }); 
 
    } 
 

 
});

*{margin:0; padding:0;} 
 
.view {height:100vh; display: flex; align-items: center; justify-content: center;} 
 
.view span {color: white; font-size: 25px; font-family: arial; font-weight: bold;} 
 
#first {background-color: blue;} 
 
#second {background-color: black;} 
 
#third {background-color: green;} 
 
#fourth {background-color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="first" class="view"> 
 
    <span>First</span> 
 
</div> 
 

 
<div id="second" class="view"> 
 
    <span>Second</span> 
 
</div> 
 

 
<div id="third" class="view"> 
 
    <span>Third</span> 
 
</div> 
 

 
<div id="fourth" class="view"> 
 
    <span>Fourth</span> 
 
</div>