我有以下 html，包含一個可滾動的 div 和一個作為行的子項串列。行的大小大于容器的寬度，因此可以看到滾動條。
每行都有一個寬度等于最頂部 div 的單元格，以及在非滾動視圖中不可見的第二個單元格。向右滾動時，我們可以看到它。
我想要實作的是利用 css 的粘性位置，使粘性單元始終可見。
<div id="scrollable-container" style="background-color: lightgrey; height: 150px; width: 600px; overflow: auto;">
<div id="fit" style="height: 150px; width: 800px;">
<div id="row" style="height: 100px; width: 800px; display: flex;">
<div id="cell" style="background-color: yellow; height: 100px; width: 600px;"></div>
<div id="cell-sticky"
style="background-color: red; height: 100px; width: 100px; position: sticky; left: 0px;"></div>
</div>
</div>
</div>有人可以解釋為什么這個單元格粘性 div 不可見嗎？有沒有辦法實作這個功能？
uj5u.com熱心網友回復：
我將粘性位置切換為right: 0px而不是left: 0px基于此：
粘性定位元素是其計算出的位置值具有粘性的元素。它被視為相對定位，直到它的包含塊在其流根（或其滾動的容器）內超過指定的閾值（例如將 top 設定為 auto 以外的值），此時它被視為“卡住”，直到滿足其包含塊的相對邊緣。
和這個...
請注意，粘性元素“粘”到其最近的具有“滾動機制”的祖先（在隱藏、滾動、自動或覆寫時創建），即使該祖先不是最近的實際滾動祖先。這有效地抑制了任何“粘性”行為（請參閱 W3C CSSWG 上的 GitHub 問題）。 MDN
這使粘性 div 保持在視圖中并僅在水平背景關系中粘在最近的可滾動元素（在本例中為最外層 div）的右邊緣，直到遇到其包含塊的相對邊緣（id 為 'row '）。
<div id="scrollable-container" style="background-color: lightgrey; height: 150px; width: 600px; overflow: auto;">
<div id="fit" style="height: 150px; width: 800px;">
<div id="row" style="height: 100px; width: 800px; display: flex;">
<div id="cell" style="background-color: yellow; height: 100px; width: 600px;">The arguments object is useful for functions called with more arguments than they are formally declared to accept. This technique is useful for functions that can be passed a variable number of arguments, such as Math.min(). This example function accepts any number of string arguments and returns the longest one:</div>
<div id="cell-sticky"
style="background-color: red; height: 100px; width: 100px; position: sticky; right: 0px;"></div>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/366460.html
上一篇：無法使用React隱藏DIV