Primefaces 当p:messages更新且（错误）消息出现时，将其滚动到视图中

我正在处理PrimeFaces消息，我希望在呈现

p:messages

时将整个页面滚动到顶部。

不推荐使用PrimeFaces<6.2

在支持bean（生成消息的bean）中，您应该知道何时呈现

p:message

。如果是这样，只需执行以下操作：

RequestContext.getCurrentInstance().execute("window.scrollTo(0,0);");

更新：

对于版本（>=6.2），在客户端执行Javascript的方法是（使用x和y坐标）：

要滚动到某个元素，请使用该元素的clientId：

PrimeFaces instance = PrimeFaces.current();
instance.scrollTo("myElementsClientId");

请在此处查找更多信息：

• 使用jQuery进行平滑滚动的示例：

---

假设您的按钮导致消息出现

XHTML

javascript

//滚动到页面中第一条消息的javascript函数
函数scrollToFirstMessage（）{
试一试{
scrollTo（$（'.ui消息：第一个子项'）.eq（0.parent（）.attr（'id'））；
}捕捉（错误）{
//没有找到任何消息！
}
}

---

希望这有帮助。

为p:message组件分配一个ID

<p:messages autoUpdate="true" id="myMessage" />

在Primefaces<6.0的情况下：

RequestContext context = RequestContext.getCurrentInstance();
context.scrollTo("myMessage");

在PrimeFaces 6.0中不推荐使用

---

已经有有效的答案显示了如何滚动到

p:messages

组件，但它们都要求您在支持bean中执行代码。这要求您在每个操作中执行/调用相同的操作。无显示如何在呈现（更新）消息组件时滚动到该组件

您可以实现并检查消息是否存在，以及消息组件的

客户端ID是否存在于
渲染中：

这些客户端标识符用于标识将在请求处理生命周期的呈现阶段处理的组件

您的侦听器可以是这样的：

public class MessagesUpdateListener implements PhaseListener {

  private final String MESSAGES_ID = "yourMessagesClientId";

  @Override
  public void afterPhase(PhaseEvent event) {
    // Empty
  }

  @Override
  public void beforePhase(PhaseEvent event) {
    FacesContext fc = FacesContext.getCurrentInstance();
    if (!fc.getMessageList().isEmpty() &&
        fc.getPartialViewContext().getRenderIds().contains(MESSAGES_ID)) {
      RequestContext.getCurrentInstance().scrollTo(MESSAGES_ID);
    }
  }

  @Override
  public PhaseId getPhaseId() {
    return PhaseId.RENDER_RESPONSE;
  }

}

确保在
faces config.xml中注册它：

<lifecycle>
  <phase-listener>your.MessagesUpdateListener</phase-listener>
</lifecycle>

另见：



Javascript也可以如下所示：
$（'.ui messages:first child'）.eq（0）.parent（）[0].scrollIntoView（）只是JS+jQuery。我不是jQuery专家。你能详细解释一下查询，
eq（0）.parent.attr（'id'）
代表什么吗（最好不是在评论中，而是在答案中）？创造性。。。让我想。。。您还可以向
p:messages
添加一个passTour属性，如
scrollToWhenDisplayed
，覆盖PrimeFaces messages组件的一小部分，并在其中检查scrollToWhenDisplayed是否存在，如果存在，则滚动到它。不需要phaselistener，也不需要知道其中组件的id…RequestContext.getCurrentInstance（）.execute（“window.scrollTo（0,0）；”；不推荐使用。使用PrimeFaces.current（）.executeScript（“window.scrollTo（0,0）；”）；谢谢你提供的信息，但是你的脚本只是部分正确。请参阅我的最新答案。
public class MessagesUpdateListener implements PhaseListener {

  private final String MESSAGES_ID = "yourMessagesClientId";

  @Override
  public void afterPhase(PhaseEvent event) {
    // Empty
  }

  @Override
  public void beforePhase(PhaseEvent event) {
    FacesContext fc = FacesContext.getCurrentInstance();
    if (!fc.getMessageList().isEmpty() &&
        fc.getPartialViewContext().getRenderIds().contains(MESSAGES_ID)) {
      RequestContext.getCurrentInstance().scrollTo(MESSAGES_ID);
    }
  }

  @Override
  public PhaseId getPhaseId() {
    return PhaseId.RENDER_RESPONSE;
  }

}

<lifecycle>
  <phase-listener>your.MessagesUpdateListener</phase-listener>
</lifecycle>

<h:form id="main">

  <p:messages id="messages" />
  <p:inputText id="text1" required="true" />

  this<br/>is<br/>a<br/>long<br/>page<br/>this<br/>is<br/>a<br/>long<br/>page<br/>
  this<br/>is<br/>a<br/>long<br/>page<br/>this<br/>is<br/>a<br/>long<br/>page<br/>
  this<br/>is<br/>a<br/>long<br/>page<br/>this<br/>is<br/>a<br/>long<br/>page<br/>
  this<br/>is<br/>a<br/>long<br/>page<br/>this<br/>is<br/>a<br/>long<br/>page<br/>
  this<br/>is<br/>a<br/>long<br/>page<br/>this<br/>is<br/>a<br/>long<br/>page<br/>
  this<br/>is<br/>a<br/>long<br/>page<br/>this<br/>is<br/>a<br/>long<br/>page<br/>
  this<br/>is<br/>a<br/>long<br/>page<br/>this<br/>is<br/>a<br/>long<br/>page<br/>

  <p:commandButton value="Update" update="messages text1"/>
  <p:commandButton value="No update"/>

</h:form>

fc.getMessageList(null).isEmpty()