スクロールを最も近い要素だけに強制する/ガイドする方法？

Question

これの例はStellar.jsのウェブサイトになります。唯一の問題は、すでに視差ライブラリ（ScrollMagic）を使用していて、Stellarで私のウェブサイトをやり直したくないということです。どうすればいい？ （jQueryは受け入れ可能です）

編集：セクションが全面ページであることを忘れてしまいました。

Answer 1

これにより、ユーザーはスクロールでき、停止すると次の位置にバウンスします。

scrollTo($(".start")); 
 

 

 
$(document).on('mousewheel ', function(e) { 
 

 
    //e.preventDefault(); /** optional, you might want to try it **/ 
 

 
    
 
    
 
    /** elements to bounce to: **/ 
 
    var $elements = $("div[data-scrollBolock]"); 
 
    
 
    /** get the next/previous element based on the scrolling direction: **/ 
 
    var $elementToScrollTo = $elements.eq(0); 
 
    var scrollDirection = "down"; 
 
    if (e.originalEvent.wheelDelta >= 0) { 
 
    scrollDirection = "up"; 
 
    $elements = $($elements.get().reverse()); 
 
    } 
 

 
    $elements.each(function() { 
 
    var scrollTop = $(window).scrollTop(), 
 
     elementOffset = $(this).offset().top, 
 
     distance = (elementOffset - scrollTop); 
 
    if (scrollDirection === "down") { 
 
     if (distance > 0) { 
 
     $elementToScrollTo = $(this); 
 
     return false; 
 
     } 
 
    } else { 
 
     if (distance < 0) { 
 
     $elementToScrollTo = $(this); 
 
     return false; 
 
     } 
 
    } 
 
    }); 
 

 
    
 
    /** scrollTo $elementToScrollTo but only if the user stopped scrolling **/ 
 
    clearTimeout($.data(this, 'scrollTimer')); 
 
    $.data(this, 'scrollTimer', setTimeout(function() { //user stopped scrolling 
 
    scrollTo($elementToScrollTo); 
 
    }, 80)); 
 

 
}); 
 

 

 
function scrollTo($el) { 
 
    $('html,body').animate({ 
 
    scrollTop: $($el).offset().top 
 
    }, 500); 
 
}

div { 
 
    height: 200px; 
 
    width: 50%; 
 
    border-bottom: 2px solid red; 
 
}

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

 

 
<div data-scrollBolock>1</div> 
 

 
<div class="start" data-scrollBolock>2</div> 
 

 
<div data-scrollBolock>3</div> 
 

 
<div data-scrollBolock>4</div> 
 

 
<div data-scrollBolock>5</div> 
 

 
<div data-scrollBolock>6</div>

Answer 2

まずあなたはscrollイベントハンドラを追加する必要があります。スクロールイベントでsetTimeout()を使用して、ページスクロールが完了したときにコードを実行します。

var timer; 
$(window).scroll(function(){ 
    clearInterval(timer) 
    timer = setTimeout(function(){ 
     scrollToElement(this); 
    }, 800); 
}); 

0.8秒後にページスクロールが終了すると、関数が呼び出されます。関数では、ウィンドウの高さとスクロール位置を取得する必要があります。次に、ページ内のすべてsectionを選択し、each()を使用してそれらのデータを取得します。 each()では、要素の高さと位置を取得する必要があります。最後のステップでは、条件の結果が正しい場合、ページを目的の要素にスクロールします。

function scrollToElement(_this){ 
    var winHeight = $(_this).height(); 
    var scrollTop = $(_this).scrollTop(); 
    var winHeightHalf = winHeight/2;  
    var winCenterScroll = scrollTop + winHeightHalf; 

    $("section").each(function(){ 
     var elemHeight = $(this).height(); 
     var elementTop = $(this).position().top; 
     var elemBottomPos = elementTop + elemHeight; 

     if ((winCenterScroll > elementTop && elementTop > scrollTop) || 
      (scrollTop + winHeight > elemBottomPos && elemBottomPos > winCenterScroll)) 
      $("body, html").animate({scrollTop: elementTop}, "500"); 
    }); 
} 

ここ場合は、適切な結果を参照してくださいカントので、ということjsfiddle

ノートでそれを参照してください。セクションの高さがページの高さの半分よりも同等か、ページの高さよりも小さく、大きくなければなりません。