マウスホイールのスクロールでリスト要素を選択

Question

domがマウスホイールを聞いてjqueryがクラスを1つだけ削除し、クラスを変更して次のスクロールを待ってから次のスクロールを選択して同じことを行うとき、liを選択します。しかし、私のコードでは、すべてのクラスを選択し、クラスを一度に変更しています。

function scrollMe(){ 
    $('.header').on('mousewheel', function(e){ 
    e.preventDefault(); 
    var scrolled = e.originalEvent.wheelDelta; 
    if(scrolled < 0){ 
     $('li').each(function(i){ 
     if($('li').hasClass('no-show')){ 
      $('li').removeClass('no-show').addClass('is-visible'); 
     } 
     }); 
    } 
    }) 
} 

Answer 1

単一スピンあたり10回のように、スクロールイベントが発生を知って、スクロールごとに一つの要素を明らかにする...
。

setTimeout()はフラグと組み合わせて使用​​できます。
詳細については、コード内のコメントを参照してください。 downvoteの

var timer; 
 

 
// This is a flag to know if we scrolled. 
 
var scrolling=false; 
 

 
$('.header').on('mousewheel', function(e){ 
 

 
    // Get the scrolling direction 
 
    var scrolled = e.originalEvent.wheelDelta; 
 

 
    if(scrolled < 0 && !scrolling){ // if scroll down for the first time for at least 1 second. 
 

 
    // Show the first hidden li found 
 
    $('li.no-show').first().removeClass('no-show').addClass('is-visible'); 
 
    } 
 

 
    // As long as user scrolls, 
 
    // he clears the timer 
 
    clearTimeout(timer); 
 

 
    // and sets a new one (delaying more...). 
 
    timer = setTimeout(function(){ 
 

 
    // After at least 1 second not scrolling, reset the flag. 
 
    scrolling=false; 
 
    },1000); 
 

 
    // Set the flag to know we just scrolled. 
 
    scrolling=true; 
 

 
});

.header{ 
 
    height:300px; 
 
    background-color:#ddd; 
 
    overflow-y:scroll; 
 
} 
 
.no-show{ 
 
    display:none; 
 
} 
 
.is-visible{ 
 
    display:list-item; 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="header"> 
 
    <ul> 
 
    <li>1</li> 
 
    <li class="no-show">2</li> 
 
    <li>3</li> 
 
    <li class="no-show">4</li> 
 
    <li>5</li> 
 
    <li class="no-show">6</li> 
 
    <li>7</li> 
 
    <li class="no-show">8</li> 
 
    <li>9</li> 
 
    <li class="no-show">10</li> 
 
    </ul> 
 
</div>

Answer 2

ループ内では、no-showクラスを持つ「li」要素を制御しています。以下の変更を行うことで、各「li」要素を検索し、それぞれに対して処理を行います。あなたはいくつかの方法でイベントをバッファリングする必要が

function scrollMe(){ 
$('.header').on('mousewheel', function(e){ 
    e.preventDefault(); 
    var scrolled = e.originalEvent.wheelDelta; 
    if(scrolled < 0){ 
     $('li').each(function(i){ 
      if($(this).hasClass('no-show')){ 
      $(this).removeClass('no-show').addClass('is-visible'); 
      }}); 
    } 
}) 
}