如何固定MudTabPanel顶部文本，实现滚动时始终可见

需要实现MudTab的内容可滚动，但顶部的标签（如Item One、Item Two）保持固定，滚动内容时标签始终可见。当前实现的代码会导致标签和内容一起滚动，示例代码如下：

<MudTabs Position="Position.Top"  PanelClass="pt-2" Style="height:320px; overflow-y: scroll">
    <MudTabPanel Text="Item One">
        <MudText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
            incididunt ut labore et dolore magna aliqua. Ut etiam sit amet nisl purus in mollis. 
            Gravida arcu ac tortor dignissim convallis aenean. Sit amet cursus sit amet dictum sit
            amet justo donec. Hac habitasse platea dictumst vestibulum rhoncus. Luctus venenatis 
            lectus magna fringilla urna porttitor rhoncus dolor purus. In hendrerit gravida rutrum
            quisque. Eget est lorem ipsum dolor sit amet consectetur adipiscing. Lectus mauris 
            ultrices eros in cursus. Egestas egestas fringilla phasellus faucibus. Tortor pretium
            viverra suspendisse potenti nullam ac tortor vitae. Vulputate dignissim suspendisse 
            in est ante in. Donec adipiscing tristique risus nec feugiat in fermentum. Eros in 
            cursus turpis massa tincidunt dui ut ornare lectus. Tempus iaculis urna id volutpat
            lacus. In aliquam sem fringilla ut. Mauris commodo quis imperdiet massa tincidunt nunc
            pulvinar. Vitae nunc sed velit dignissim sodales ut eu sem integer.
        </MudText>
            <MudText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
            incididunt ut labore et dolore magna aliqua. Ut etiam sit amet nisl purus in mollis. 
            Gravida arcu ac tortor dignissim convallis aenean. Sit amet cursus sit amet dictum sit
            amet justo donec. Hac habitasse platea dictumst vestibulum rhoncus. Luctus venenatis 
            lectus magna fringilla urna porttitor rhoncus dolor purus. In hendrerit gravida rutrum
            quisque. Eget est lorem ipsum dolor sit amet consectetur adipiscing. Lectus mauris 
            ultrices eros in cursus. Egestas egestas fringilla phasellus faucibus. Tortor pretium
            viverra suspendisse potenti nullam ac tortor vitae. Vulputate dignissim suspendisse 
            in est ante in. Donec adipiscing tristique risus nec feugiat in fermentum. Eros in 
            cursus turpis massa tincidunt dui ut ornare lectus. Tempus iaculis urna id volutpat
            lacus. In aliquam sem fringilla ut. Mauris commodo quis imperdiet massa tincidunt nunc
            pulvinar. Vitae nunc sed velit dignissim sodales ut eu sem integer.
        </MudText>
    </MudTabPanel>
    <MudTabPanel Text="Item Two">
        <MudText>Content Two</MudText>
    </MudTabPanel>
    <MudTabPanel Text="Item Three">
        <MudText>Content Three</MudText>
    </MudTabPanel>
</MudTabs>

解决方案 #

问题出在你把滚动属性加在了整个MudTabs组件上，导致标签栏和内容区域一起滚动。要让标签固定，只需给每个TabPanel内部的内容容器设置滚动属性，标签栏留在外部即可。

修改后的代码如下：

<MudTabs Position="Position.Top" PanelClass="pt-2">
    <MudTabPanel Text="Item One">
        <div style="height: 320px; overflow-y: auto;">
            <MudText>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
                incididunt ut labore et dolore magna aliqua. Ut etiam sit amet nisl purus in mollis. 
                Gravida arcu ac tortor dignissim convallis aenean. Sit amet cursus sit amet dictum sit
                amet justo donec. Hac habitasse platea dictumst vestibulum rhoncus. Luctus venenatis 
                lectus magna fringilla urna porttitor rhoncus dolor purus. In hendrerit gravida rutrum
                quisque. Eget est lorem ipsum dolor sit amet consectetur adipiscing. Lectus mauris 
                ultrices eros in cursus. Egestas egestas fringilla phasellus faucibus. Tortor pretium
                viverra suspendisse potenti nullam ac tortor vitae. Vulputate dignissim suspendisse 
                in est ante in. Donec adipiscing tristique risus nec feugiat in fermentum. Eros in 
                cursus turpis massa tincidunt dui ut ornare lectus. Tempus iaculis urna id volutpat
                lacus. In aliquam sem fringilla ut. Mauris commodo quis imperdiet massa tincidunt nunc
                pulvinar. Vitae nunc sed velit dignissim sodales ut eu sem integer.
            </MudText>
            <MudText>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
                incididunt ut labore et dolore magna aliqua. Ut etiam sit amet nisl purus in mollis. 
                Gravida arcu ac tortor dignissim convallis aenean. Sit amet cursus sit amet dictum sit
                amet justo donec. Hac habitasse platea dictumst vestibulum rhoncus. Luctus venenatis 
                lectus magna fringilla urna porttitor rhoncus dolor purus. In hendrerit gravida rutrum
                quisque. Eget est lorem ipsum dolor sit amet consectetur adipiscing. Lectus mauris 
                ultrices eros in cursus. Egestas egestas fringilla phasellus faucibus. Tortor pretium
                viverra suspendisse potenti nullam ac tortor vitae. Vulputate dignissim suspendisse 
                in est ante in. Donec adipiscing tristique risus nec feugiat in fermentum. Eros in 
                cursus turpis massa tincidunt dui ut ornare lectus. Tempus iaculis urna id volutpat
                lacus. In aliquam sem fringilla ut. Mauris commodo quis imperdiet massa tincidunt nunc
                pulvinar. Vitae nunc sed velit dignissim sodales ut eu sem integer.
            </MudText>
        </div>
    </MudTabPanel>
    <MudTabPanel Text="Item Two">
        <div style="height: 320px; overflow-y: auto;">
            <MudText>Content Two</MudText>
        </div>
    </MudTabPanel>
    <MudTabPanel Text="Item Three">
        <div style="height: 320px; overflow-y: auto;">
            <MudText>Content Three</MudText>
        </div>
    </MudTabPanel>
</MudTabs>

关键改动说明 #

1. 移除MudTabs上的height和overflow-y: scroll样式，让标签栏保持在页面固定位置。
2. 在每个MudTabPanel内部添加一个div容器，设置固定高度height:320px和overflow-y: auto，这样只有Tab内部的内容会滚动，标签栏不受影响。

内容的提问来源于stack exchange，提问作者Lisa