Primefaces：如何使用 p:sticky 在 tabView 中滚动内容

Question

当用户向下滚动时，我希望将我的 tabView 保持在视图的顶部并在选项卡内滚动内容。我希望通过 p:sticky 来实现这一点，但相反，正文似乎在选项卡内容的后面滚动，而不是选项卡内容。我试过将内容放在 scrollPanel 中，但这需要一个高度。我尝试了其他一些 css 解决方案，但 none 有效。

这是一个非常简短的例子。请注意，选项卡内容不会滚动。感谢您提供任何解决方案。

<?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 选项卡视图添加粘性位置样式 header（添加一些边框以了解行为)

<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>

另请检查 this，了解解决方案的浏览器兼容性。

Primefaces：如何使用 p:sticky 在 tabView 中滚动内容

Primefaces: How to scroll content in a tabView using p:sticky

css

primefaces

jsf-2.2