在这种情况下无法进行位置固定工作

Using antd tab, and can't make position sticky work, such that the tab panel sticks when user scrolls down. Please check demo here.

向下滚动时,您可以看到苹果图像棒,而选项卡面板则没有。

有人可以帮助我诊断问题吗?

还会在此处粘贴代码,以防万一:

 <div style={{ display: "flex", height: "100%", flexDirection: "column" }}>
      <div style={{ height: 200, border: "1px solid red" }} />
      <div
        style={{
          overflow: "auto",
          flex: 1,
          minHeight: 0,
          border: "1px solid blue"
        }}
      >
        <div className="container" style={{}}>
          <div className="item pirate">
            <img
              src="https://is5-ssl.mzstatic.com/image/thumb/Purple123/v4/1b/da/2f/1bda2faa-a688-e0a2-57ac-6007845a3df9/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/1200x630wa.png"
              width="100"
              alt="Item 1"
            />
          </div>
          <Tabs defaultActiveKey="1">
            <TabPane tab="Tab 1" key="1">
              <div>test</div>
              <div>test</div>
              <div>test</div>
              <div>test</div>
              <div>test</div>
              <div>test</div>
              <div>test</div>
              <div>test</div>
              <div>test</div>
              <div>test</div>
              <div>test</div>
              <div>test</div>
              <div>test</div>
              <div>test</div>
              <div>test</div>
              <div>test</div>
              <div>test</div>
              <div>test</div>
              <div>test</div>
              <div>test</div>
              <div>test</div>
              <div>test</div>
              <div>test</div>
              <div>test</div>
              <div>test</div>
              <div>test</div>
              <div>test</div>
              <div>test</div>
              <div>test</div>
            </TabPane>
            <TabPane tab="Tab 2" key="2">
              Content of Tab Pane 2
            </TabPane>
            <TabPane tab="Tab 3" key="3">
              Content of Tab Pane 3
            </TabPane>
          </Tabs>
        </div>
      </div>
    </div>

的CSS

.pirate {
  position: sticky;
  top: 0;
}

html,
body,
#root {
  height: 100%;
}

.ant-tabs {
  top: 0 !important;
  position: sticky !important;
}
评论