jquery - 向下翻页单击滚动适合视口(viewport)的 div

Question

我有四个 div 都适合查看端口。我想滚动下一个适合查看端口的 div 页面向下按钮单击(键码:34)。现在我做了鼠标滚动。我想修改它Page down/up key press.Dy default div one is in top on page Down key press div two is on view port and vice versa for page up key press

向下翻页/向上翻页键。

//Set each section's height equals to the window height
    $('.clildClass').height($(window).height());
    /*set the class 'active' to the first element 
     this will serve as our indicator*/
    $('.clildClass').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 = $('.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);
            }

        }
    });

.clildClass{
   min-height:100vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentClass">
    <div class="clildClass" id="div1">
        div one
    </div>
    <div class="clildClass" id="div2">
       div two
    </div>
    <div class="clildClass" id="div3">
       div three
    </div>
    <div class="clildClass" id="div4">
       div four
    </div>
</div>

Answer 1

尝试以下操作:

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

$(window).on('keydown', function(e) {//use the keydown event
 var active = $('.active');
  e.preventDefault(); //prevent the default mousewheel scrolling

console.log(2)
  if (e.keyCode == 40) {//test if the key is the down arrow

    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 if (e.keyCode == 38) {//test if the key is the up arrow
    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);
    }

  }
});

演示:https://jsfiddle.net/rpxzv4ae/