Question

我有一个包含长内容的JSF / Primefaces页面，该页面由滚动条处理，还有一个包含长内容的对话框和滚动条。该对话框包含一个按钮，我想将对话框内容滚动到对话框内部的某个组件（几乎在其底部），但是如果我使用

PrimeFaces.current().scrollTo("component");

滚动只在底部而不是对话框中起作用。
通过阅读其他问题，我试图通过将脚本直接放在onclick按钮上来实现JQuery的效果

$('#dialog').animate({scrollTop: $('#dialogForm\\:panelDialog').offset().top},'slow');

但是它不起作用。
以下是一个最小（不是）工作示例的文件。

XHTML页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">

<h:head>

</h:head>

<h:body>
    <p:commandButton value="Basic" type="button" onclick="PF('dialogVar').show();" />
    <p:commandButton value="Scroll" actionListener="#{testCBean.onClick()}" />
    <p:panel>
        <ui:repeat var="item" value="#{testCBean.tableRows}">
            <div>
                #{item}
            </div>
        </ui:repeat>
    </p:panel>
    <p:outputPanel id="panel">
                scroll destination
            </p:outputPanel>
    <p:dialog id="dialog" header="Basic Dialog" widgetVar="dialogVar" minHeight="40" height="500">
        <h:form id="dialogForm">
            <p:commandButton value="Scroll" actionListener="#{testCBean.onClickDialog()}" />
            <ui:repeat var="item" value="#{testCBean.tableRows}">
                <div>
                    #{item}
                </div>
            </ui:repeat>
            <p:outputPanel id="panelDialog">
                scroll destination
            </p:outputPanel>
        </h:form>
    </p:dialog>
</h:body>
</html>

Bean：

package controller;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import javax.annotation.PostConstruct;
import javax.enterprise.context.SessionScoped;
import javax.inject.Named;

import org.primefaces.PrimeFaces;

@Named
@SessionScoped
public class TestCBean implements Serializable {

    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    private List<String> tableRows;

    @PostConstruct
    public void init() {
        tableRows = new ArrayList<String>();
        for (int i = 0; i < 100; i++) {
            tableRows.add("Test");
        }
    }

    public List<String> getTableRows() {
        return tableRows;
    }

    public void setTableRows(List<String> tableRows) {
        this.tableRows = tableRows;
    }

    public void onClick() {
        PrimeFaces.current().scrollTo("panel");
    }

    public void onClickDialog() {
        PrimeFaces.current().scrollTo("dialogForm:panelDialog");
//      PrimeFaces.current().executeScript("$('#dialog').animate({scrollTop: $('#dialogForm\\:panelDialog').offset().top},'slow');");
    }
}

Answer 1

我找到了一种通过使用以下脚本通过JQuery做到这一点的方法：

function dialogScroll(dialogId, elementId) {
    $('#' + dialogId).find('.ui-dialog-content').first().animate({scrollTop: $('#' + elementId).offset().top},'slow');
}

第一个参数是对话框的ID，它用作容器来查找要滚动到的元素，其ID作为第二个参数传递。
然后可以在按钮onclick中直接调用此函数，也可以通过以下方式在Java bean方法中调用该函数：

PrimeFaces.current().executeScript("dialogScroll('dialog', 'dialogForm\\\\:panelDialog');");

请注意元素ID中的转义符，如果包含“：”则必须这样做

单击按钮滚动到对话框内的组件

1 个答案: