reactjs 粘滞列不位于其父div内

v09wglhw 于 2023-03-01 发布在 React

关注(0)|答案(1)|浏览(111)

为什么列没有粘附到其父div？滚动时，左侧和右侧粘性容器滚动到RecommendedProducts div的顶部。预期行为是当它们到达其包含父div的底部时，它们应该停止/粘附。
代码和框：https://codesandbox.io/s/fragrant-darkness-uefhr2?file=/src/index.js

<>
      <div className="h-full w-screen">
        <div className="bg-[#EFEFEF] relative h-auto w-full pt-12">
          {images &&
            images.map((image) => (
              <div className="flex items-center justify-center" key={image.id}>
                <div className="relative h-[calc(100vh-48px)] w-full">
                  <img
                    src="https://i.ibb.co/mDTWnb2/hej.webp"
                    alt={image.alt}
                    className="object-contain w-full h-full"
                  />
                </div>
              </div>
            ))}

          <div className="fixed top-0 w-full">
            <div className="mx-auto flex w-11/12 flex-col items-center justify-center space-y-8 sm:grid sm:w-full sm:max-w-screen-3xl sm:grid-cols-3 sm:space-y-0 sm:px-6 lg:px-8">
              {/* Desktop */}

              {/* Left column */}
              <div className="flex h-screen w-full items-center justify-center self-start sm:sticky sm:inset-y-0">
                <div className="flex w-[300px] flex-col items-center justify-start bottom-0 overflow-y-auto">
                  <ProductDescription />
                </div>
              </div>

              {/* Middle column */}
              <div className="hidden sm:block"></div>

              {/* Right column */}
              <div className="flex h-screen w-full items-center justify-center self-start sm:sticky sm:inset-y-0">
                <div className="flex w-[200px] flex-col items-center justify-start bottom-0 overflow-y-auto">
                  <ProductDescription />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <RecommendedProducts />
    </>

reactjs

来源：https://stackoverflow.com/questions/75584561/sticky-columns-dont-stay-within-their-parent-div

1条答案

按热度按时间

np8igboo1#

position: sticky要求（i）父元素具有height属性;（ii）已经用类似top、bottom、right或left的属性指定了阈值。
因此，要实现您希望在示例中实现的行为，您需要做两件事：
(i)将一个height设置为作为列容器的div。如果你想保持它的灵活性，你不能将它的height和其父的height设置为full。在tailwind中，这是h-full类。
(ii)将position: sticky和top: 0属性添加到列中，在Tailwind中这是sticky和top-0类。

<div className="h-full absolute top-0 w-full">
  <div className="h-full mx-auto items-center justify-center grid w-full max-w-screen-3xl grid-cols-3 px-8">
    {/* Left column */}
    <div className="sticky top-0 flex h-screen w-full items-center justify-center self-start">
      <div className="flex w-[300px] flex-col items-center justify-start bottom-0 overflow-y-auto">
        <ProductDescription />
      </div>
    </div>

    {/* Middle column */}
    <div className="hidden sm:block"></div>

    {/* Right column */}
    <div className="sticky top-0 flex h-screen w-full items-center justify-center self-start">
      <div className="flex w-[200px] flex-col items-center justify-start bottom-0 overflow-y-auto">
        <ProductDescription />
      </div>
    </div>
  </div>
</div>

代码片段中的代码和您提供的沙箱中的代码有不同的类。我编辑了沙箱中的代码以提供上面的答案。

赞(0）回复(0）举报 2023-03-01

我来回答

reactjs 粘滞列不位于其父div内

1条答案

相关问题

热门标签

最新问答