스크롤 영역의 읽기 위치 유지

Question

나는 TweetDeck의 스타일과 비슷한 열의 맨 위에 동적 컨텐트가 추가 된 열을 만듭니다.

콘텐츠를보기 위해 div의 절반 아래로 스크롤하면 상단에 추가되는 콘텐츠가 스크롤 된 위치에서 점프하여 콘텐츠가 많으면 해당 열을 읽을 수없는 콘텐츠가 생성됩니다. 이 열에 추가됩니다.

사용자가있는 positon을 유지하는 CSS 또는 jQuery의 방법을 아는 사람이 있습니까? 아직 콘텐츠가 상단에 추가되도록 허용 하시겠습니까? I는 JS 바이올린 제공 캔트

죄송 데이터는 DEV 환경에

업데이트 - 예 HTML 마크 업

<div class="results" id="results9016"> 
    <article> 
    <img alt="Dave" src="normal.jpg"> 
    <div class="data"> 
     <p class="user"><a target="_blank" href="#">dave</a></p> 
     <p class="message">Message</p><p class="datetime">24 Apr 17:16:23</p></div> 
    </article> 
    <article> 
    <img alt="Dave" src="normal.jpg"> 
    <div class="data"> 
     <p class="user"><a target="_blank" href="#">dave</a></p> 
     <p class="message">Message</p><p class="datetime">24 Apr 17:16:23</p></div> 
    </article> 
    <article> 
    <img alt="Dave" src="normal.jpg"> 
    <div class="data"> 
     <p class="user"><a target="_blank" href="#">dave</a></p> 
     <p class="message">Message</p><p class="datetime">24 Apr 17:16:23</p></div> 
    </article> 
</div> 

각 문서 엘리먼트는의 jQuery .prepend()를 사용하여 추가되고; 사전에

감사

Answer 1

앞에 추가하기 전에 문서의 스크롤 위치를 캐싱 즉시 이후를 재설정 해보십시오 :

var addTweet = function() { 
    var scrollPosition = $(document).scrollTop(); 
    $('#results9016').prepend($newTweet); 
    $('html, body').scrollTop(scrollPosition); 
} 

Here's a fiddle of it in action. 참고 : 코드에 따라, 당신은 컨테이너를 스크롤 할 수 있습니다 대신의 전체 문서.