建立媒體捲動工具元件

針對電視、手機、電腦等平台建構回應式水平捲動檢視畫面的基礎總覽。

Adam Argyle

這篇文章說明水平捲動功能的建立方式 極簡、反應靈敏、方便存取且適合各種類型的網路體驗 瀏覽器和平台 (例如電視！)試試 demo」。

示範

如果您喜歡看影片，請參考這篇文章的 YouTube 版本：

總覽

我們會建構水平捲動版面配置，來代管 媒體或產品元件一開始是簡易的 <ul> 清單，但 藉助 CSS 打造流暢且流暢的捲動體驗， 並貼齊格線加入了 JavaScript 核准互動索引，幫助鍵盤使用者略過 100 個以上的項目。 您還可以使用實驗性媒體查詢「prefers-reduced-data」將 提供更精簡的標題捲動式介面

從無障礙標記開始

媒體捲動器是由數個核心元件 (即內含項目的清單) 組成，A 罩杯 繪製一個清單，它最簡單的形式 會在全世界環遊世界 以及供大眾使用到達這個網頁的使用者能夠瀏覽清單及點選連結 即可查看項目。這就是我們的無障礙設施

提交含有 <ul> 元素的清單：

<ul class="horizontal-media-scroller">
  <li></li>
  <li></li>
  <li></li>
  ...
<ul>

使用 <a> 元素讓清單項目更具互動性：

<li>
  <a href="#">
    ...
  </a>
</li>

使用 <figure> 元素，以語意方式表示圖片和說明文字：

<figure>
  <picture>
    <img alt="..." loading="lazy" src="https://picsum.photos/500/500?1">
  </picture>
  <figcaption>Legends</figcaption>
</figure>

請注意 <img> 中的 alt 和 loading 屬性。媒體的替代文字 捲動器是使用者體驗的機會，可協助顯示縮圖的額外相關資訊， 如果圖片無法載入，或為使用者提供朗讀 UI，則備用文字 仰賴螢幕閱讀器等輔助技術。與 Five Golden 一起學習 符合規定的替代文案 文字。

loading 屬性接受關鍵字 lazy 以表明此圖片的信號 只有在圖片位於可視區域內時，才能擷取來源。可用的值包括 很適合大型清單使用，因為使用者只會下載項目圖片 向下捲動到檢視畫面中

支援使用者的色彩配置偏好設定

使用 color-scheme 做為 <meta> 標記，向瀏覽器傳送你的網頁 想同時提供淺色和深色的使用者代理程式樣式。這是免費的深色模式 視你看到的畫面而定：

<meta name="color-scheme" content="dark light">

中繼標記可以提供最早的信號，因此瀏覽器 如果使用者採用深色主題，可以選取深色的預設畫布顏色。 這表示網站不同網頁的瀏覽動作不會閃爍白色畫布 之間的背景載入後流暢的深色主題，在 眼睛。

如要瞭解詳情，請前往 Thomas Steiner 網站： https://web.dev/color-scheme/.

新增內容

根據 ul > li > a > figure > picture > img 的內容結構， 下一步是加入圖片和標題我已將示範內容 但您可以使用靜態預留位置圖片和文字 最喜歡的資料來源

使用 CSS 新增樣式

現在 CSS 將這份通用內容清單轉換成 無須專人管理Netflix、應用程式商店等多個網站和應用程式會橫向 這些捲動區域，讓可視區域隨著類別和選項形成包容。

建立捲動器版面配置

請務必避免在版面配置中截斷內容，或濫用文字 以及刪節號許多電視機都有媒體捲動器，就像 但通常是刪減內容這個版面配置沒有作用！ 此外，媒體內容也能覆寫欄大小，使 1 種版面配置 能夠處理許多有趣的組合

2 分 已顯示捲動列。一個沒有刪節號 表示其高度較高 必須保持清晰易讀。另一個較短的標題，且許多標題都遭到截斷 省略符號。

容器可讓您提供預設大小來覆寫資料欄大小 也可建立自訂屬性。這個格狀版面配置與資料欄大小息息相關 僅管理間距和方向：

.horizontal-media-scroller {
  --size: 150px;

  display: grid;
  grid-auto-flow: column;
  gap: calc(var(--gap) / 2); /* parent owned value for children to be relative to*/
  margin: 0;
}

<picture> 元素接著會使用自訂屬性建立基本顯示比例：方塊：

.horizontal-media-scroller {
  --size: 150px;

  display: grid;
  grid-auto-flow: column;
  gap: calc(var(--gap) / 2);
  margin: 0;

  & picture {
    inline-size: var(--size);
    block-size: var(--size);
  }
}

除了幾種次要樣式，請完成媒體捲軸的必備標準：

.horizontal-media-scroller {
  --size: 150px;

  display: grid;
  grid-auto-flow: column;
  gap: calc(var(--gap) / 2);
  margin: 0;

  overflow-x: auto;
  overscroll-behavior-inline: contain;

  & > li {
    display: inline-block; /* removes the list-item bullet */
  }

  & picture {
    inline-size: var(--size);
    block-size: var(--size);
  }
}

設定 overflow 會將 <ul> 設定成允許捲動和使用鍵盤瀏覽 中，每個直接子項 <li> 元素都會移除其 ::marker 取得新的 inline-block 顯示類型

不過，圖片尚未反應，因此可以立即從包裝盒中迅速連拍 您會獲得什麼體驗善用多種尺寸、合身與邊框樣式，打造獨特魅力， 包括延遲載入時的背景漸層：

img {
  /* smash into whatever box it's in */
  inline-size: 100%;
  block-size: 100%;

  /* don't squish but do cover the space */
  object-fit: cover;

  /* soften the edges */
  border-radius: 1ex;
  overflow: hidden;

  /* if empty, show a gradient placeholder */
  background-image:
    linear-gradient(
      to bottom,
      hsl(0 0% 40%),
      hsl(0 0% 20%)
    );
}

捲動邊框間距

對齊頁面內容，以及無邊框捲動表面區域， 對和諧和極簡性構成的重要元素

達成與字體排版對齊的無邊框捲動版面配置 和版面配置行，請使用與 scroll-padding 相符的 padding：

.horizontal-media-scroller {
  --size: 150px;

  display: grid;
  grid-auto-flow: column;
  gap: calc(var(--gap) / 2);
  margin: 0;

  overflow-x: auto;
  overscroll-behavior-inline: contain;

  padding-inline: var(--gap);
  scroll-padding-inline: var(--gap);
  padding-block: calc(var(--gap) / 2); /* make space for scrollbar and focus outline */
}
敬上

修正水平捲動邊框間距錯誤 以上說明瞭 填充捲動容器，但仍有尚未解決的相容性問題 (但已在 Chromium 91 以上版本中修正！)。詳情請見 請參閱這篇文章 但簡單來說，邊框間距不一定會考量到邊框間距 都會顯示在捲動檢視畫面中

A 罩杯 方塊，在最後一個清單項目的內嵌端以方框特別標出， 邊框間距和元素的寬度，與建立所需對齊方式相同。

若要誘騙瀏覽器將邊框間距放在捲動器的結尾， 指定每份清單中的最後一個數字，並加上 所需邊框間距

.horizontal-media-scroller > li:last-of-type figure {
  position: relative;

  &::after {
    content: "";
    position: absolute;

    inline-size: var(--gap);
    block-size: 100%;

    inset-block-start: 0;
    inset-inline-end: calc(var(--gap) * -1);
  }
}

使用邏輯屬性，讓媒體捲動器在任何編寫模式中運作 以及文件方向

捲動貼齊

含有溢位的捲動容器可能會成為含有單行 CSS 的貼齊可視區域，然後由子項指定對齊可視區域的方式。

.horizontal-media-scroller {
  --size: 150px;

  display: grid;
  grid-auto-flow: column;
  gap: calc(var(--gap) / 2);
  margin: 0;

  overflow-x: auto;
  overscroll-behavior-inline: contain;

  padding-inline: var(--gap);
  scroll-padding-inline: var(--gap);
  padding-block-end: calc(var(--gap) / 2);

  scroll-snap-type: inline mandatory;

  & figure {
    scroll-snap-align: start;
  }
}

專注

這項元件的靈感來自於電視上相當受歡迎。 「應用程式商店」等許多電玩遊戲平台都使用媒體捲軸 很類似。專注是重要的使用者體驗 而不是只有小細節假設從 將沙發與遙控器搭配使用，對互動操作進行一些小幅調整：

.horizontal-media-scroller a {
  outline-offset: 12px;

  &:focus {
    outline-offset: 7px;
  }

  @media (prefers-reduced-motion: no-preference) {
    & {
      transition: outline-offset .25s ease;
    }
  }
}

這會將焦點外框樣式 7px 遠離方塊範圍，使其看起來很棒 空白鍵。如果使用者未選擇減少動態效果的動作偏好設定， 轉場效果，為焦點事件帶來些微的動態效果。

旋轉索引

使用者需要特別留意這些長清單 包括捲動內容和選項解決問題的常見模式稱為 核准索引。它是指 項目的容器聚焦於鍵盤，但只允許 1 個子項保留焦點 逐步完成任務。一次可聚焦的項目 繞過可能很長的項目清單，而不是按下 Tab 鍵 50+ 時間。

示範的第一個捲動器只有 300 個項目我們可以做得更好 然後穿越所有網路，進入下一個階段

為提供這項體驗，JavaScript 需要觀察鍵盤事件和焦點 事件。我在 Google Cloud 上建立了小型開放原始碼程式庫， npm：協助取得該使用者 提升體驗以下說明如何在 3 個捲動器中使用：

import {rovingIndex} from 'roving-ux';

rovingIndex({
  element: someElement
});

這項示範會查詢捲動器文件，並讓每個捲動器呼叫 rovingIndex() 函式。將元素傳遞至 rovingIndex()，以獲得核准 例如清單容器和目標查詢選取器 焦點目標不是直接子系，

document.querySelectorAll('.horizontal-media-scroller')
  .forEach(scroller =>
    rovingIndex({
      element: scroller,
      target: 'a',
}))

如要進一步瞭解這項效果，請參閱開放原始碼程式庫 roving-ux：

顯示比例

截至本文撰寫時， aspect-ratio落後 旗標，但在 Chromium 瀏覽器或機上盒中。由於 媒體捲動器格線版面配置僅指定方向和間距，調整大小可以 變更媒體查詢中的變更，這項功能可檢查是否支援長寬比。 漸進式強化功能，導入更動態的媒體捲動器。

A 罩杯 長寬比為 4:4 的方塊，旁邊顯示其他 16:9 設計比例 和 4:3

@supports (aspect-ratio: 1) {
  .horizontal-media-scroller figure > picture {
    inline-size: auto; /* for a block-size driven ratio */
    aspect-ratio: 1; /* boxes by default */

    @nest section:nth-child(2) & {
      aspect-ratio: 16/9;
    }

    @nest section:nth-child(3) & {
      /* double the size of the others */
      block-size: calc(var(--size) * 2);
      aspect-ratio: 4/3;

      /* adjust size to fit more items into the viewport */
      @media (width <= 480px) {
        block-size: calc(var(--size) * 1.5);
      }
    }
  }
}

如果瀏覽器支援 aspect-ratio 語法，就會發現媒體捲動器圖片 大小已升級至 aspect-ratio。使用草稿巢狀結構語法 根據是第一、第二或第三列是變更長寬比。 巢狀結構語法也允許設定 其他大小調整邏輯不在此限。

隨著 CSS 支援更多瀏覽器引擎 但看起來會更搶眼的版面配置

偏好減少數據用量

儘管下一種技巧只提供 位於旗幟後方 Canary 版 我想分享如何節省大量網頁載入時間 和幾行 CSS 搭配使用的資料prefers-reduced-data 媒體查詢來自 等級 5，會允許詢問裝置是否位於 任何縮短數據的狀態，例如數據節省模式。如果是，我可以修改 在此情況下，請隱藏圖片。

ALT_TEXT_HERE

figure {
  @media (prefers-reduced-data: reduce) {
    & {
      min-inline-size: var(--size);

      & > picture {
        display: none;
      }
    }
  }
}

內容仍可可供瀏覽，但沒有大量圖片的費用 已下載完成。以下是新增 prefers-reduced-data CSS 前的網站：

(7 個要求，100 KB 的資源，以 131 毫秒為單位)

ALT_TEXT_HERE

新增 prefers-reduced-data CSS 後，網站效能如下：

ALT_TEXT_HERE

(71 個要求，1.07s 中有 1.2mb 的資源)

減少 64 項要求，也就是可視區域內的約 60 張圖片 (會進行的測試) 將頁面載入 資料佔 10%。功能強大

結論

現在你知道該怎麼做了，你會怎麼做？！🙂

讓我們來體驗多元的方法，瞭解透過網路建立內容的所有方式。 建立 Codepen 或主持自己的示範，並透過 Twitter 推文給我，我會將它新增到 下方的社群重混作品部分。

資料來源

社群重混作品

這裡還沒有任何資訊！