Question

我是部分的，我有一个可滚动的div，其中有很多消息（代码简化）

<div class="panel-body y-scrollable" id="box-auto-resizable">
    <div id="message-list-auto-resizable">
        <ul class="chat-box">
            @foreach (var messagesGroup in this.Model.Messages)
            {
                <li class="text-center" style="margin: 10px 0 10px 0;">@messagesGroup.DisplaySendingDate</li>
                <li id="message-box-@this.Model.Id" class="message-box message-box-@( this.Model.IsCurrentUserSender ? "right" : "left") @(this.Model.IsHighlighted ? "message-highlighted" : "")" ></li>
            }
        </ul>
    </div>
</div>

当用户点击结果链接时，我想加载线程并直接滚动到结果所在的消息。我为此目的编写了这个脚本：

function scrollToMessage(messageId) {
    if (messageId)
    {                           
        $("#box-auto-resizable").scrollTop(0).animate({ scrollTop: $("#message-box-" + messageId).position().top - $(".chat-box").position().top}, 300);
    }
}

if (@this.Model.ScrollToMessageId)
    scrollToMessage(@this.Model.ScrollToMessageId);

当我从chrome控制台调用它时，此功能非常有效。但不是因为＆＃34;部分＆＃34; （它是一个ajax负载。如果需要，代码在下面。）

更疯狂：我计算了＆＃34;本地滚动＆＃34;和一个＆＃34; onLoad-scroll＆＃34;对于每条消息，两次执行之间的偏移是不连续的例如：对于8个第一个消息，2个执行没有区别，因为4个跟随80个像素差异，然后170个然后190个其他5个消息，我没有看到任何模式。

<a data-ajax="true" data-ajax-method="Get" data-ajax-mode="replace" data-ajax-success="setHeight();makeActive(@this.Model.Id, @this.Model.RfpId);return false;" data-ajax-update="#thread-message-list" href="/Message/ThreadMessageList?threadId=@this.Model.Id&messageId=@this.Model.MessageId" class="list-group-item text-right" id="message-@this.Model.MessageId">
@this.Model.ConversationName<br>
     <em>@Html.Raw(this.Model.Preview)</em>
</a>

PS：我刚看到我可以通过课程＆＃34;消息突出显示＆＃34;来识别要滚动到的消息。而不是ids，但它与错误无关，我稍后会改变它;）。

编辑：我使用Internet Explorer和Mozilla Firefox对此进行了测试，并且可以正常运行。 Chrome没有，Opera和Safari不知道......

Jquery滚动：在控制台/页面加载中执行不同

0 个答案: