向下翻頁點擊滾動div適合查看端口

Question

我有四個div都適合查看port.I要滾動下一個div適合查看端口上的頁面向下按鈕單擊（鍵代碼：34）。現在我做了鼠標scroll.I想頁面向下/向上鍵press.Dy默認DIV之一來修改它在Page Down鍵按下DIV兩個在頂部視口，反之爲向上翻頁按鍵上

//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/