jQueryでページスクロールを一時的に遅らせます

Question

これまで、スクロールダウンしてコンテナdivに達したときに、その中のdivの数がページに沿って水平にスクロールし始めるページを作成しました。私の問題は、すべてのdivが左端までスクロールしてから、ページが縦方向に再びスクロールを開始するまで、ページを縦方向にスクロールしないようにすることです。基本的には、ユーザーはコンテナにスクロールダウンし、divの水平スクロールがトリガーされ、ページを一度スクロールして再びスクロールダウンします。これは私がこれまで持っているものです。

コード：

$(document).ready(function() { 
 

 
    var windowWidth = $(window).width(); 
 
    $("#service1, #service2, #service3").css({ 
 
    "left": windowWidth 
 
    }); 
 

 
    $(window).scroll(function() { 
 
    $("#service1, #service2, #service3").css({ 
 
     "left": windowWidth - $(window).scrollTop() 
 
    }); 
 
    }); 
 
});

#hero { 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    height: 900px; 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
} 
 

 
#about { 
 
    background-color: rgba(0, 0, 0, 0); 
 
    height: 900px; 
 
    width: 100%; 
 
} 
 

 
#services { 
 
    background-color: rgba(0, 0, 0, 0.2); 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: 900px; 
 
    margin-bottom: 900px; 
 
    width: 100%; 
 
} 
 

 
#service1 { 
 
    background-color: white; 
 
    box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24); 
 
    ; 
 
    height: 700px; 
 
    position: absolute; 
 
    width: 1200px; 
 
} 
 

 
#service2 { 
 
    background-color: white; 
 
    box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24); 
 
    ; 
 
    height: 700px; 
 
    margin-left: 1300px; 
 
    position: absolute; 
 
    width: 1200px; 
 
} 
 

 
#service3 { 
 
    background-color: white; 
 
    box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24); 
 
    ; 
 
    height: 700px; 
 
    margin-left: 2600px; 
 
    position: absolute; 
 
    width: 1200px; 
 
}

<div id="hero"></div> 
 

 
<div id="about"></div> 
 

 
<div id="services"> 
 
    <div id="service1"></div> 
 
    <div id="service2"></div> 
 
    <div id="service3"></div> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

私が明らかにされている願っています。

Answer 1

DOMMouseScrollイベントを使用してスクロールを確認し、検出および置換イベントでこれをブロックすることができます。以下を試してください。私はスクロールが3番目のセクションに到着したときにブロック垂直スクロールし、左に定義されたサイズが到着したときに反応します。あなたはあなたが望むもので修正することができます。答えを

$(document).ready(function() { 
 

 
\t var windowWidth = $(window).width(); 
 
\t $("#service1, #service2, #service3").css({ 
 
\t \t "left": windowWidth 
 
\t }); 
 

 
\t function scrollHorizontally(e) { 
 
\t \t e = window.event || e; 
 
\t \t var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); 
 
\t \t $(document).scrollLeft($(document).scrollLeft()-(delta*40)); 
 
\t \t $("body").scrollLeft($(document).scrollLeft()-(delta*40)); 
 
\t \t e.preventDefault(); 
 
\t } 
 

 
\t $('html').on ('DOMMouseScroll', function (e) { 
 
\t \t var sens = e.originalEvent.detail; 
 
\t \t var lastDivTop = ($(window).scrollTop() - $("#services").offset().top) 
 
\t \t var lastDivLeft = ($(window).scrollLeft() - $("#services").offset().left) 
 
\t \t if (sens < 0) { //scroll Up 
 
\t \t \t if(lastDivLeft > 0 && lastDivTop < 100){ 
 
\t \t \t \t scrollHorizontally(e) 
 
     $(window).scrollTop($("#services").offset().top) 
 
\t \t \t } 
 
\t \t } else if (sens > 0) { //scroll down 
 
\t \t \t if(lastDivTop > 0 && lastDivLeft < 1500){ 
 
\t \t \t \t scrollHorizontally(e) 
 
     $(window).scrollTop($("#services").offset().top) 
 
\t \t \t } 
 
\t \t } 
 
\t }); 
 
});

#hero { 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    height: 900px; 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
} 
 

 
#about { 
 
    background-color: rgba(0, 0, 0, 0); 
 
    height: 900px; 
 
    width: 100%; 
 
} 
 

 
#services { 
 
    background-color: rgba(0, 0, 0, 0.2); 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: 900px; 
 
    margin-bottom: 900px; 
 
    width: 100%; 
 
} 
 

 
#service1 { 
 
    background-color: white; 
 
    box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24); 
 
    ; 
 
    height: 700px; 
 
    position: absolute; 
 
    width: 1200px; 
 
} 
 

 
#service2 { 
 
    background-color: white; 
 
    box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24); 
 
    ; 
 
    height: 700px; 
 
    margin-left: 1300px; 
 
    position: absolute; 
 
    width: 1200px; 
 
} 
 

 
#service3 { 
 
    background-color: white; 
 
    box-shadow: 0px 3px 34px 0px rgba(0, 0, 0, 0.24); 
 
    ; 
 
    height: 700px; 
 
    margin-left: 2600px; 
 
    position: absolute; 
 
    width: 1200px; 
 
}

<div id="hero"></div> 
 

 
<div id="about"></div> 
 

 
<div id="services"> 
 
    <div id="service1"></div> 
 
    <div id="service2"></div> 
 
    <div id="service3"></div> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>