Jquery .scrollTop() not working

Question

제목이 내 문제를 설명합니다. 그래서 여기 내 코드입니다 :

$("#my-div ul").scrollTop($("#my-div ul")[0].scrollHeight); 

# 내-DIV는 AJAX를 사용하여 작성하세요.

$.ajax({ 
    url: 'getLog.php', 
    data: {'logFile': 'log.php'}, // echo "<ul> A BUNCH OF <li>s here </ul>" 
    success: function(data){ 
     $("#my-div").html(data); 
     // console.log($("#my-div ul")[0].scrollHeight); // Debugging Purposes 
     $("#my-div ul").scrollTop($("#my-div ul")[0].scrollHeight); 
    } 
}); 

내가 나서서 콘솔 [0] .scrollHeight (당신으로 ​​("내-DIV UL #")를 $ 기록 : 그래서 내 아약스 요청에, 나는 위의 코드를 수행하는 성공 콜백있어 코드에서 볼 수 있습니다.) .scrollTop()을 수행하기 전에 scrollHeight를 알고 있는지 확인하십시오. 그리고 그것은 효과가있었습니다 (720을 보여주었습니다. 로그 파일의 크기를 늘린 다음 새로 고침하여 830을 나타냅니다.)

놀랍게도, 내가 콘솔 (Chrome)에 들어가서 입력하면

$("#my-div ul").scrollTop($("#my-div ul")[0].scrollHeight); 

완벽하게 작동합니다. eul은 맨 아래로 끝까지 스크롤합니다! 그것이 비록 작동하지 않는 이유는 HTML이 변경 될 때

내가 :(

Answer 1

브라우저가 모든 내용을 다시 렌더링하지 않습니다 ... 알아낼 수 없습니다, 틈이 없었다 작은 gap.If은 항상있다 자바 스크립트 실행은 브라우저를 차단하는 것이고, (의도 한대로) 사용자가 페이지를 사용할 수 <을 - 이것은 이유 :

이

당신은 시도 할 수 :. 그게 문제라면

$.ajax({ 
url: 'getLog.php', 
data: {'logFile': 'log.php'}, // echo "<ul> A BUNCH OF <li>s here </ul>" 
success: function(data){ 
    $("#my-div").html(data); 
    // console.log($("#my-div ul")[0].scrollHeight); // Debugging Purposes 
    setTimeout(function() { 
     $("#my-div ul").scrollTop($("#my-div ul")[0].scrollHeight); 
    }, 10); 
} 
}); 

당신은 또한 0으로 setTimeout 내부 시간을 낮출 수 있습니다 - 그것은되지 않습니다 0이지만 각 브라우저가 설정하는 최소 시간.