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