html - 当你用鼠标滚动时，scrollsnap 正在跳跃一个 div

Question

我为网页上的不同部分设置了滚动快照。

它在大屏幕（1200 像素和 + 宽度）或触摸板上运行良好。但是在较小的屏幕（1200 像素和 - 宽度）上，当您使用鼠标上的滚轮时，它会从第 1 节“跳”到第 3 节或从第 3 节跳到第 5 节。无论如何要解决这个问题？

html,body{ margin:0; padding:0; background-color: #232323; }
            
            .text_id {
                color: #fff;
                font-size:calc(12px + 1.8vw);
                font-family: 'Montserrat', sans-serif;
                font-weight: 600;
                text-align: center;
            }
            
        .centering_container, .centering_container2, .centering_container3, .centering_container4, .centering_container5 {
              z-index: -1;
              height:100%;
              width:100%;
              overflow:hidden; 
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              position: relative;
            }
            
            #wrapper{
              position: relative;
              height: 100vh;
              overflow: hidden;
              z-index: 3;
            }
            #featured {
              position: absolute;
              z-index: 2;
              width: calc(100vh * (1920 / 1080));    /*  video width / height  */
              height: calc(100vw * (1080 / 1920));   /*  video height / width  */
              min-width: 100%;
              min-height: 100%;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
            #wrapper2{
              position: relative;
              height: 100vh;
              overflow: hidden;
              z-index: 2;
            }
            #featured2{
              position: absolute;
              z-index: 3;
              width: calc(100vh * (1620 / 1080));    /*  video width / height  */
              height: calc(100vw * (1080 / 1620));   /*  video height / width  */
              min-width: 100%;
              min-height: 100%;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
            #wrapper3 {
              position: relative;
              height: 100vh;
              overflow: hidden;
              z-index: 2;
            }
            #featured3 {
              position: absolute;
              z-index: 2;
              width: calc(100vh * (1920 / 1080));    /*  video width / height  */
              height: calc(100vw * (1080 / 1920));   /*  video height / width  */
              min-width: 100%;
              min-height: 100%;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
            #wrapper4 {
              position: relative;
              height: 100vh;
              overflow: hidden;
              z-index: 4;
            }
            #featured4 {
              position: absolute;
              z-index: 2;
              width: calc(100vh * (1920 / 1080));    /*  video width / height  */
              height: calc(100vw * (1080 / 1920));   /*  video height / width  */
              min-width: 100%;
              min-height: 100%;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
            
            #wrapper5 {
              position: relative;
              height: 100vh;
              overflow: hidden;
              z-index: 2;
            }
            #featured5 {
              position: absolute;
              z-index: 2;
              width: calc(100vh * (960 / 506));    /*  video width / height  */
              height: calc(100vw * (506 / 960));   /*  video height / width  */
              min-width: 100%;
              min-height: 100%;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
            
            video {
              z-index: -2;
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
            }
            
            
            
            /******** smooth scroll  scrollsnap********/
            
            .scroll-container {
              width: 100%;
              height: 100vh;
              overflow: auto;
              -webkit-scroll-snap-type: y mandatory;
              -ms-scroll-snap-type: y mandatory;
              scroll-snap-type: y mandatory;
            }
            
            .receveur {
              scroll-snap-align: start;
              scroll-behavior: smooth;
            }

 <div class="scroll-container">
        
<!-- ****************************** FIRST section ********************************* -->

        <div class="receveur receveur-1"></div>
        <div id="wrapper">
            <div id="featured">
                <video autoplay="true" muted="true" loop>
                  <source src="style/vid/3_third.mp4" type="video/mp4" />
                </video>
                <div class="centering_container">
                    <div class="text_id">
                        <h1 style="line-height:120%;">Section 1</h1>
                    </div>
                </div>
            </div>
        </div>
            



<!-- ****************************** SECOND section ********************************* -->
        <div class="receveur receveur-2" id="arrowscroll"></div>
        <div id="wrapper2">
            <div id="featured2">
                <video autoplay="true" muted="true" loop>
                  <source src="style/vid/1_first.mp4" type="video/mp4" />
                </video>
                <div class="centering_container2">
                    <div class="text_id">
                        <h1 style="line-height:120%;">SECTION<br>2<span class="tim">™&lt;/span></h1>
                    </div>
                </div>
            </div>
        </div>


<!-- ***************************** THIRD section  ********************************************* -->


        <div class="receveur receveur-3"></div>
        <div id="wrapper3">
            <div id="featured3">
                <video autoplay="true" muted="true" loop>
                  <source src="style/vid/2_second.mp4" type="video/mp4" />
                </video>
                <div class="centering_container3">
                    <div class="text_id">
                        <h1 style="line-height:120%;">Section <br>3</h1>
                    </div>
                </div>
            </div>
        </div>




<!-- ***************************** FOURTH section  ********************************************* -->


        <div class="receveur receveur-4"></div>
        <div id="wrapper4">
            <div id="featured4">
                <video autoplay="true" muted="true" loop>
                  <source src="style/vid/5_fifth.mp4" type="video/mp4" />
                </video>
                <div class="centering_container4">
                    <div class="text_id">
                        <h1>Section 4</h1>
                    </div>
               </div>
          </div>
  </div>



<!-- ***************************** FIFTH section  ********************************************* -->


      <div class="receveur receveur-5"></div>
        <div id="wrapper5">
            <div id="featured5">
                <video autoplay="true" muted="true" loop>
                  <source src="style/vid/4_fourth.mp4" type="video/mp4" />
                </video>
                <div class="centering_container5">
            <div class="text_id">
              <h1>Section 5</h1>
            </div>
                </div>
                </div>
            </div>
        </div>
</div>