jQuery와 div가 정확한 위치로 스크롤 될 때 라디오 버튼 확인

Question

일부 HTML, CSS 및 jQuery 코드가 있습니다. 아이디어는 라디오 버튼이 체크되었을 때, div는 그 라디오 버튼의 왼쪽 위치로 수평으로 스크롤되어야한다는 것입니다.

문제가 있습니다. div가 radio8의 왼쪽 위치로 스크롤되면 라디오 버튼 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)를 유지해야합니다. 콘솔에이 값을 인쇄 할 때

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

, 당신은 왼쪽은 오른쪽보다 항상 큰 것을 볼 수 있습니다 :

$(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

나는 당신이이 문제가 있다고 생각 손 쪽. .width() 대신 $('#td8').offset().left을 사용하는 것이 좋습니다.

두 번째로, 두 측면을 등호 연산자로 비교합니다. 보다 크거나 같음 연산자를 사용하는 것이 더 안전하다고 생각합니다. 스크롤이 컨테이너 오른쪽에 닿아도 적어도 내 컴퓨터에서는 두 값이 같을 것이라고 보장하지 않습니다.