divをスクロールして正しい位置にスクロールしたときのjQueryとラジオボタンの確認

Question

HTML、CSS、およびjQueryコードがあります。アイデアは、ラジオボタンがチェックされているとき、divはそのラジオボタンの左の位置に水平にスクロールする必要があるということです。

問題があります。 divがラジオ8の左の位置にスクロールされるとラジオボタンradio8がチェックされ、アラートが表示されるはずです。これは起こりません。

var container = $('div'), 
 
     scrollTo = $('#td9'); 
 

 
    container.animate({ 
 
     scrollLeft: scrollTo.offset().left - container.offset().left + container.scrollLeft() 
 
    }); 
 

 
    $('div > input').each(function() { 
 
     var radioInput = $(this); 
 
     if(radioInput.is(':checked')) { 
 
     $('div').animate({ 
 
      scrollLeft: radioInput.offset().left - $('div').offset().left + $('div').scrollLeft() 
 
     }, 2000); 
 
     } 
 
    }); 
 

 
    $('input[type=radio]').on('change', function() { 
 
     if($(this).is(':checked')) { 
 
     $('div').animate({ 
 
      scrollLeft: $(this).offset().left - $('div').offset().left + $('div').scrollLeft() 
 
     }, 2000); 
 
     } 
 
    }); 
 

 
    // the following does not work 
 
    container.scroll(function() { 
 
     if(container.scrollLeft() + container.width() == $('#td8').width()) { 
 
     $("#radio8").prop("checked", true) 
 
     alert("reached 8!"); 
 
     } 
 
    });

div { 
 
     width: 100px; 
 
     height: 70px; 
 
     border: 1px solid blue; 
 
     overflow: auto; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
     <table id="my_table"> 
 
     <tr> 
 
      <td id='td1'><input type="radio" name="distance" value="1" />111111</td> 
 
      <td id='td2'><input type="radio" name="distance" value="2" />222222</td> 
 
      <td id='td3'><input type="radio" name="distance" value="3" />333333</td> 
 
      <td id='td4'><input type="radio" name="distance" value="4" />444444</td> 
 
      <td id='td5'><input type="radio" name="distance" value="5" />555555</td> 
 
      <td id='td6'><input type="radio" name="distance" value="6" />666666</td> 
 
      <td id='td7'><input type="radio" name="distance" value="7" />777777</td> 
 
      <td id='td8'><input id="radio8" type="radio" name="distance" value="8" />888888</td> 
 
      <td id='td9'><input type="radio" name="distance" value="9" checked="checked" />999999</td> 
 
     </tr> 
 
     </table> 
 
    </div>

Answer 1

スクロールが動的にのみ

あなたは両端をスクロールしたときを知りたい場合は、最も簡単な解決策は、アニメーションの終了をキャプチャするanimateのcompleteコールバックを使用することです。

$(function(){ 
 
    $('.move').animate({ 
 
    scrollLeft: 200 
 
    }, 2000, function(){ 
 
    alert('Reached!'); 
 
    }); 
 
});

.move { 
 
    outline: solid red; 
 
    width: 100px; 
 
    white-space: nowrap; 
 
    overflow: auto; 
 
}

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

 
<div class="move"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit!</p> 
 
</div>

ScrollSpy方法

あなたはユーザーがスクロール（radioを選択せず​​に）自分でコンテナが、その後、あなたがいることを心に留めておく必要がある場合にも、いくつかのアクションをトリガーする場合明示的にポジションを==で比較しないでください。ピクセルは原子と同じように小片に分割することができるので、128.423pxのオフセットは決して128pxにはなりません。また、ほとんどの場合、スクロールは一度に多くのピクセルで行われるため、許容範囲（少なくとも+/- 5px）を維持する必要があります。

$(function(){ 
 
    $('.move').scroll(function() { 
 
    if ($(this).scrollLeft() >= 200) { 
 
     alert('Reached!'); 
 
    } 
 
    }); 
 
});

.move { 
 
    outline: solid red; 
 
    width: 100px; 
 
    white-space: nowrap; 
 
    overflow: auto; 
 
}

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

 
<p>Scroll the following container by yourself:</p> 
 
<div class="move"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit!</p> 
 
</div>

Answer 2

私はあなたが2つの問題があると思う：

container.scrollLeft() + container.width() == $('#td8').width() 

コンソールにこれらの値を印刷するとき、あなたは左手側は常に正しい以上であることがわかりますが手の側。 .width()の代わりに$('#td8').offset().leftを使用します。

次に、2つの辺を等しい演算子で比較します。より大きいか等しい演算子を使う方が安全だと思います。少なくとも私のマシンでは、スクロールがコンテナの右側に達しても、2つの値が等しいことが保証されていません。