Google Chrome 使用 Flexbox 視窗錨定擴充方向

Question

<p>Google Chrome 中存在一個問題，當元素放置在具有<code>之間有空格</code的<em>相鄰</em> Flex 項目的Flexbox 容器內時，元素會相對於視窗以不同方向展開/折疊> 或<code>center</code> 對齊內容。 </p> <p>這在 Firefox、IE11、Edge 或 Safari 中不是問題，因為元素始終向下擴展。 </p> <p>我很好奇：</p> <ul> <li>Chrome 的行為是否遵循某些規範？如果有，是哪一個？ </li> <li>如果不是，那為什麼要在 Chrome 中這樣做？ （恕我直言，點擊觸發器在螢幕外隨機消失是可怕的用戶體驗。）</li> <li>可以透過某種方式修改或停用 Chrome 的行為嗎？例如。透過 CSS 或元標記？ </li> </ul> <p><strong>更新 1：如果可能的話，我已在 chromium bug tracker 上提交了問題 #739860，尋求 Chromium 開發人員的見解/解釋。 </strong></p> <hr> <p>下面插入了兩個範例。描述問題的完整測試套件可以在這支筆中找到：https://codepen.io/jameswilson/full/xrpRPg/ 我選擇在本範例中使用 slipToggle，以便展開/折疊運動是動畫的並且對眼。詳細資訊標籤也會發生相同的行為，但還沒有跨瀏覽器支持，並且展開/折疊太卡頓了。</p> <p><strong>範例 1：Chrome 對準 Flexbox 之間的展開/折疊行為的空格</strong></p> <p>

$('button').click(function() {
  $(this).next().slideToggle();
})</pre>
body {
  邊距：30 像素；
  字體系列：無襯線字體；
}
在旁邊，
除了div，
概括，
主要的，
按鈕，
詳情 p,
按鈕 p {
  背景：rgba(0,0,0,.09);
  邊框：無；
  內邊距：20px；
  保證金：0；
}

.flex容器{
  顯示：柔性；
}
在旁邊 {
  彈性：1；
  位置：相對；
  最大寬度：25%；
  背景：薄荷奶油；

  顯示：柔性；
  彎曲方向：列；
  位置：相對；
}
aside.space- Between {
  justify-content：空間之間；
}
放在一邊.center {
  調整內容：居中；
}

主要的 {
  彈性：3；
  位置：相對；
  最大寬度：75%；
  背景：愛麗絲藍；
  垂直對齊：頂部；
  高度：100%；
}
主要> * * {
  上邊距：20px；
}

按鈕 p {
  顯示：無；
}</pre>
<腳本 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> ;< /腳本>

<節類=“flexcontainer”>
  <aside class="space- Between">
    
頂部側邊欄
    
底部側邊欄
  </旁白>
  <主要>
    

      <按鈕>slideToggle
      <p>其他瀏覽器：始終向下展開。<br>
        Chrome：應始終向下展開，因為頂部側邊欄始終可見。

    

    

      slideToggle（通常向下展開）
      <p>其他瀏覽器：始終向下展開。<br>
        Chrome：應向下展開，同時底部側邊欄和頂部邊欄均可見。但如果您向下滾動足夠遠以使頂部側邊欄超出螢幕，則會向上展開。

    
    
    

      slideToggle（通常向下展開）
      <p>其他瀏覽器：始終向下展開。<br>
        Chrome：應向下展開，同時底部側邊欄和頂部邊欄均可見。但如果您向下滾動足夠遠以使頂部側邊欄超出螢幕，則會向上展開。

    
;
  </主要>
</節></pre>


</p>

<p><strong>範例 2：Chrome 對居中對齊的 Flexbox 的展開/折疊行為</strong></p>



<p>

$('button').click(function() {
  $(this).next().slideToggle();
})</pre>
body {
  邊距：30 像素；
  字體系列：無襯線字體；
}
在旁邊，
除了div，
概括，
主要的，
按鈕，
詳情 p,
按鈕 p {
  背景：rgba(0,0,0,.09);
  邊框：無；
  內邊距：20px；
  保證金：0；
}

.flex容器{
  顯示：柔性；
}
在旁邊 {
  彈性：1；
  位置：相對；
  最大寬度：25%；
  背景：薄荷奶油；

  顯示：柔性；
  彎曲方向：列；
  位置：相對；
}
aside.space- Between {
  justify-content：空間之間；
}
放在一邊.center {
  調整內容：居中；
}

主要的 {
  彈性：3；
  位置：相對；
  最大寬度：75%；
  背景：愛麗絲藍；
  垂直對齊：頂部；
  高度：100%；
}
主要> * * {
  上邊距：20px；
}

按鈕 p {
  顯示：無；
}</pre>
<腳本 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> ;< /腳本>
<節類=“flexcontainer”>
  

    
中心側邊欄
  </旁白>
  <主要>

    

      slideToggle（通常向下展開）
      <p>其他瀏覽器：始終向下展開。<br>
        Chrome：通常向下擴充。當容器的頂部邊緣滾動出視口時，會向兩個方向擴展。

    

    

      <按鈕>slideToggle
      <p>其他瀏覽器：始終向下展開。<br>
        Chrome：通常向下擴充。當容器的頂部邊緣滾動出視口時，會向兩個方向擴展。

    

    

      slideToggle（通常向下展開）
      <p>其他瀏覽器：始終向下展開。<br>
        Chrome：通常向下擴充。當容器的頂部邊緣滾動出視口時，會向兩個方向展開，但當中心側邊欄滾動出視圖時，會再次恢復向下展開。

    
  </主要>
</節></pre>


</p>            

Answer 1

將此程式碼新增至您的 Flex 容器中：

• 溢出錨：無

#

這將停用 Chrome 中稱為「滾動錨定」的功能，該功能會導致框向上擴展 (修訂的程式碼筆）。

---

在 Chrome 中，展開框的向上/向下方向由視窗中的捲動位置決定，而不是佈局本身。

為了改善使用者體驗，Chrome 針對這種行為採取了獨特的方法。

基本上，它們將 DOM 元素綁定到當前滾動位置。螢幕上這個特定（「錨點」）元素的移動將決定對滾動位置的調整（如果有）。

他們將這種方法稱為「滾動錨定」。該演算法在此頁面上進行了解釋： https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md

此行為目前是 Chrome 獨有的，但Google 正在推動標準化。

根據滾動錨定文檔，將 overflow-anchor: none 應用到適當的元素將禁用滾動錨定調整。

更多資訊：

• https://github.com/WICG/ScrollAnchoring/blob/master/解釋器.md
• https://bugs.chromium.org/p/chromium/問題/詳細資訊？ id=739860
• #https://hacks.mozilla.org/2019 /03/scroll-anchoring-in-firefox-66/
• #更改 CSS 彈性順序會導致滾動