建立媒體捲動工具元件

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

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 種版面配置 能夠處理許多有趣的組合

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

.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 */
}

敬上

注意： 我已將這個範例 CSS 範例簡化為邏輯屬性。本文所連結的代管示範內容針對不支援這些邏輯簡寫支援的瀏覽器提供備用選項。

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

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

.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 瀏覽器或機上盒中。由於 媒體捲動器格線版面配置僅指定方向和間距，調整大小可以 變更媒體查詢中的變更，這項功能可檢查是否支援長寬比。 漸進式強化功能，導入更動態的媒體捲動器。

@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，會允許詢問裝置是否位於 任何縮短數據的狀態，例如數據節省模式。如果是，我可以修改 在此情況下，請隱藏圖片。

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

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

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

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

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

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

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

結論

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

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

資料來源

• GitHub 上的 GUI 挑戰來源

• 媒體捲動器 Codepen 啟動條件

社群重混作品

這裡還沒有任何資訊！