时间戳

首页 > 解决方案 > Primefaces：如何使用 p:sticky 在 tabView 中滚动内容

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

问题描述

当用户向下滚动时，我想将我的 tabView 保持在视图的顶部并滚动选项卡内的内容。我希望通过 p:sticky 来实现这一点，但是，正文似乎在选项卡内容的后面滚动，而不是选项卡内容。我尝试将内容放在滚动面板中，但这需要一个高度。我尝试了其他一些 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>

标签： cssprimefacesjsf-2.2

解决方案

希望了解您的所有要求，这是我的建议。

基本思想：向 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>

还要检查这个，以了解解决方案的浏览器兼容性。

推荐阅读