javascript - 关于html中的 "paragraph sliding"

Question

想实现段落滑动这样的功能(不知道段落滑动怎么解释)

所以我只是把它放在网站上让你看看(可能需要一段时间才能进入)

https://grayraven.tw/

像这样一个接一个

我试过自己写，写完后没有任何反应

下面是我的代码

var mousewheel = (/Firefox/i.test(navigator.userAgent)) ?
"DOMMouseScroll" : "mousewheel";

var IDK = 1
slide.addEventListener(mousewheel,
        function (e) {
            if (e.wheelDelta > 0 || e.detail < 0) {
              IDK + 1 
              $("html,body").animate({scrollTop: $("#" + IDK ).offset().top}, 1000);
            } else {
                if(IDK=1){
                  console.log("NO")
                }else{
                  IDK - 1
                  $("html,body").animate({scrollTop: $("#" + IDK ).offset().top}, 1000);
                }
            }
        }, false);

如果能告诉我怎么写，万分感谢

我的英文不是很好，请见谅

Answer 1

你是这个意思吗？

//Set each section's height equals to the window height
    $('section').height($(window).height());
    /*set the class 'active' to the first element 
     this will serve as our indicator*/
    $('section').first().addClass('active');

    /* handle the mousewheel event together with 
     DOMMouseScroll to work on cross browser */
    $(document).on('mousewheel DOMMouseScroll', function (e) {
        e.preventDefault();//prevent the default mousewheel scrolling
        var active = $('section.active');
        //get the delta to determine the mousewheel scrol UP and DOWN
        var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;
        
        //if the delta value is negative, the user is scrolling down
        if (delta < 0) {
            //mousewheel down handler
            next = active.next();
            //check if the next section exist and animate the anchoring
            if (next.length) {
               /*setTimeout is here to prevent the scrolling animation
                to jump to the topmost or bottom when 
                the user scrolled very fast.*/
                var timer = setTimeout(function () {
                    /* animate the scrollTop by passing 
                    the elements offset top value */
                    $('body, html').animate({
                        scrollTop: next.offset().top
                    }, 'slow');
                    
                    // move the indicator 'active' class
                    next.addClass('active')
                        .siblings().removeClass('active');
                    
                    clearTimeout(timer);
                }, 800);
            }

        } else {
            //mousewheel up handler
            /*similar logic to the mousewheel down handler 
            except that we are animate the anchoring 
            to the previous sibling element*/
            prev = active.prev();

            if (prev.length) {
                var timer = setTimeout(function () {
                    $('body, html').animate({
                        scrollTop: prev.offset().top
                    }, 'slow');

                    prev.addClass('active')
                        .siblings().removeClass('active');
                    
                    clearTimeout(timer);
                }, 800);
            }

        }
    });

body, html {
    margin:0;
    padding:0;
    overflow:hidden;
}
section {
    height:100vh!important;
    font-size:30px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
}
.bg1{background-color:#FAAD80;}
.bg2{background-color:#FF6767;}
.bg3{background-color:#FF3D68;}
.bg4{background-color:#A73489;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="bg1">First</section>
<section class="bg2">Second</section>
<section class="bg3">Third</section>
<section class="bg4">Fourth</section>