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

我有一个需要实时进行尾日志：如何在更新后滚动到JSF组件的底部？

 <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); });

，但似乎没有任何工作。

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

来源

2013-06-03 rootkit

这似乎应该工作......你有没有看到类似的问题？ http://stackoverflow.com/questions/12430546/primeface-datatable-scrollbar-at-desired-position –

你有一个客户端的具体问题。 JSF在这个问题的背景下仅仅是一个HTML代码生成器，因此与具体问题无关（当使用例如PHP，ASP或其他任何代替JSF时，您会遇到完全相同的问题）。因此，如果您从问题中省略JSF部分，客户端（HTML/JS/jQuery）专家就会更容易理解和回答问题。即只发布JSF生成的HTML输出（如果可能的话，以简单的形式，你已经在普通的vanilla'.html'文件中测试过）。 – BalusC

@BalusC我部分同意。我使用的JS代码（或者@better_use_mkstemp建议的代码）可以独立工作。然而，DOM树由PF客户端库更新，似乎它在我的JS代码运行后重置滚动位置 - 因此问题... – rootkit

的onsuccess处理程序是基于Ajax响应援引后直接Ajax响应被成功地检索到，但的DOM被更新。

您想要改用oncomplete处理程序。

<p:remoteCommand ... oncomplete="someFunctionWhichNeedsToWorkWithUpdatedDOM()" />

来源

2013-06-04 14:51:16 BalusC

工作完美！谢谢！ – rootkit

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

回答

相关问题