Question

我有一个需要实时添加的日志：

        <h:panelGroup layout="block" style="width:100%; max-height: 400px; overflow: auto;" id="log" styleClass="logArea">
            <h:outputText value="#{myBean.log}" style="white-space:pre;"></h:outputText>
        </h:panelGroup>
        <h:outputScript>
        function scrollLog() {var log=jQuery('.logArea');log.scrollTop(log.scrollHeight-log.height);};</h:outputScript>
        <p:remoteCommand name="getLog" process="@this" update="log" onsuccess="scrollLog();">
        </p:remoteCommand>

虽然在运行remoteCommand后日志输出更新正常，但它不会滚动到底部。我怀疑我的scrollLog（）在应用部分更新之前被调用，并且更新将滚动条重置为顶部。

我还尝试了以下jQuery代码：

jQuery( function() { var log=jQuery('.logArea');log.animate({ scrollTop: log.scrollHeight}, 1000); });

但似乎没有任何效果。

如何解决此问题并在每次更新后滚动到日志底部？

Answer 1

在成功检索到ajax响应之后直接调用{em} ，但之前基于ajax响应更新DOM。

您想要使用onsuccess处理程序。

oncomplete

如何在更新后滚动到JSF组件的底部？

1 个答案: