如何在重复的div中获取特定内容的滚动位置答案

【问题标题】：How to get the scroll position of a specific content in a repeating div如何在重复的div中获取特定内容的滚动位置
【发布时间】：2015-06-16 10:21:57
【问题描述】：

有什么方法可以在 div 中找到特定内容的滚动位置。我有一个在 Angularjs 上运行的聊天应用程序，使用 ng-repeat 来显示发件人的姓名和消息。

这是显示消息的 HTML 代码。

<div ng-repeat="(key,value) in list" >
     <div ng-init="compare(value.name,key,value.date);">
          <div id="date" ng-if="date[key]=='not_same'" >  {{value.date|convert }} </div>
          <div id="recipent" >  
            <div ng-if="name[key]=='not_same'">
                <span class="glyphicon glyphicon-user" ></span> :<b> {{value.name}}</b>
            </div>
          </div>
      </div>
      <div class="msgInfo" ng-if="value.name=='Yash'" align='right' >
            <div id="msg" > <b id="ms"> {{value.msg}}</b>&nbsp;&nbsp;&nbsp;<b id="time">{{value.time|change_time}}&nbsp;&nbsp;</b></div>
      </div> 
      <div class="msgInfo" ng-if="value.name!=='Yash'" align='left' >
            <div id="msg" > <b id="ms"> {{value.msg}}</b>&nbsp;&nbsp;&nbsp;<b id="time">{{value.time|change_time}}&nbsp;&nbsp;</b></div>
      </div>   
</div>

这里的 div id="msg" 包含消息。

我还有一个“加载以前的消息”按钮来加载以前的消息。当我单击 Load prev Msg 按钮时，它会加载以前的消息并按时间顺序显示。我想显示在加载之前的消息之前存在的最旧消息，就像您在 Whatsapp 中看到的那样。

我使用这段代码来获取特定消息的内容

var msg=document.getElementById("ms").innerHTML;

我想在旧消息也显示后获取该特定消息的滚动位置。

【问题讨论】：

你可以为这个问题制作一个 jsfiddle 吗？

标签： javascript jquery html angularjs

【解决方案1】：

$('html,body').animate({
    scrollTop: $(".scrolltodiv").offset().top},
    'slow');

【讨论】：

【解决方案2】：

在代码Load previous Messages .... 使第一行得到

var position = document.getElementById('ms').scrollTop;

当你加载完之前的消息后，滚动到位置为position的那条消息

【讨论】：

其实这段代码只获取了第一条消息的内容。当我按下加载更多消息按钮时，更多消息出现在第一条消息上方。 “位置”的值始终具有值 = 0
最初消息没有加载所以位置的值设置为0，我想要的是在消息加载后得到hte位置

【解决方案3】：

var $t = $('.scrollContent');
$t.animate({ "scrollTop": $('.scrollContent')[0].scrollHeight }, "fast");

【讨论】：