Primefaces：如何使用 p:sticky 在 tabView 中滾動內容

Question

當用戶向下滾動時，我希望將 tabView 保留在視圖頂部並滾動選項卡內的內容。 我希望用 p:sticky 來實現這一點，但相反，正文似乎滾動到選項卡內容的后面，而不是選項卡內容。 我試過將內容放在 scrollPanel 中，但這需要一個高度。 我嘗試了一些其他的 css 解決方案，但沒有一個奏效。

這是一個非常簡短的例子。 請注意，選項卡內容不會滾動。 感謝您提供任何解決方案。

<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://java.sun.com/jsf/html"
  xmlns:p="http://primefaces.org/ui">
<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</h:head>
<h:body style="width: 1430px;padding:0">
    <p:panelGrid style="height: 100px">
        <p:outputLabel value="header info"/>
    </p:panelGrid>

    <p:tabView id="tabViewId">
        <p:tab id="tab1Id" title="Tab1">
            <h:form>
                <!--    <p:scrollPanel mode="native" style="height: 500px;">-->
                <p:panelGrid style="height: 1000px">
                    <p:outputLabel value="here i am"/>
                </p:panelGrid>
                <p:outputLabel value="scroll to me"/>
                <!--    </p:scrollPanel>-->
            </h:form>
        </p:tab>

    </p:tabView>

    <p:sticky target="tabViewId"/>
</h:body>
</html>

Answer 1

希望了解您的所有要求，這是我的建議。

基本思想：向 Prime Faces 選項卡視圖標題添加粘性位置樣式（添加一些邊框以了解行為）

<h:body style="width: 99%;padding:0">

    <style type="text/css">
        .ui-tabs-nav.ui-widget-header {
            position: -webkit-sticky; /* Safari */
            position: sticky;
            top: 10px;
            border: 1px solid green;
        }
    </style>

    <p:panelGrid style="height: 100px; border: 2px solid; width: 99%">
        <p:outputLabel value="Header info" />
    </p:panelGrid>

    <p:tabView id="tabViewId"
        style="width: calc(99% - 4px); border: 2px solid red;">
        <p:tab id="tab1Id" title="Tab1">
            <h:form>
                <p:panelGrid style="height: 1000px">
                    <p:outputLabel value="here i am" />
                </p:panelGrid>
                <p:outputLabel value="scroll to me" />
            </h:form>
        </p:tab>

    </p:tabView>
</h:body>

另請檢查此解決方案的瀏覽器兼容性。

Primefaces：如何使用 p:sticky 在 tabView 中滾動內容

問題描述

1 個解決方案

解決方案1
1 已采納 2020-02-25 20:47:28

Primefaces：如何使用 p:sticky 在 tabView 中滾動內容

問題描述

1 個解決方案

解決方案1 1 已采納 2020-02-25 20:47:28

解決方案1
1 已采納 2020-02-25 20:47:28