打造精選故事元件

簡要說明如何打造類似網路上的 Instagram 限時動態。

Adam Argyle

我想透過這篇文章和大家分享如何打造 回應速度飛快的網頁、支援鍵盤瀏覽功能，而且適用於所有 。

示範

如果你想要親身示範 親自建構這個短片故事元件 請參閱故事元件程式碼研究室。

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

總覽

關於短片故事的使用者體驗，常見的兩個例子是 Snapchat Stories 和 Instagram 限時動態 (並非提及機群)。 一般而言，故事通常是在行動裝置上以輕觸為主的模式，方便使用者瀏覽內容 不同訂閱方案。例如，使用者在 Instagram 上開啟某位朋友的故事 然後瀏覽裡面的相片他們通常會透過 讓應用程式從可以最快做出回應的位置 回應使用者要求使用者只要輕觸裝置右側，就能直接跳到好友的 下一則報導使用者向右滑動，直接滑到其他好友。 故事元件與輪轉介面很類似，但可在使用者導覽到 多維陣列，而不是單一維度陣列。彷彿內部有輪轉介面 每個輪轉介面都有內容🤯

使用資訊卡視覺化的多維度陣列。由左至右是一疊紫色邊框，每張卡片內有 1 百張青色邊框。清單中。
第一個好友輪轉介面
第 2 個「堆疊」報導輪轉介面
👍? 清單 (又稱「多維陣列」)

為工作挑選合適的工具

我認為，這個元件非常易於建構， 重要網路平台功能一起來介紹這些功能吧！

CSS 格線

我們的版面配置看似不高，因為這是 CSS 格狀檢視畫面 大幅提升內容呈現效果

好友版面配置

我們的主要 .stories 元件包裝函式是行動裝置優先的水平捲動檢視畫面：

.stories {
  inline-size: 100vw;
  block-size: 100vh;

  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}

/* desktop constraint */
@media (hover: hover) and (min-width: 480px) {
  max-inline-size: 480px;
  max-block-size: 848px;
}
敬上
使用 Chrome 開發人員工具 裝置模式 藉此醒目顯示網格建立的資料欄
。
。

以下詳細說明 grid 版面配置：

  • 我們會使用 100vh 和 100vw 明確填滿行動裝置的可視區域，並限制電腦上的尺寸
  • / 用於分隔列範本和欄範本
  • auto-flow翻譯為grid-auto-flow: column
  • 自動流程範本為 100%，在這個範例中是任何捲動視窗寬度
，瞭解如何調查及移除這項存取權。

對手機而言，這就像是列大小是可視區域高度 每個欄都會根據可視區域寬度顯示延續 Snapchat Story 和 Instagram 限時動態範例，每一欄都是某位好友的故事。我們希望朋友 繼續往下捲動報導 所以必須在可視區域外捲動 格狀空間會設定各種欄位，以便設定每個好友的 HTML 版面配置 打造回應式動態捲動容器格線 讓我們能集中處理整體的影響力。

堆疊

我們必須讓每個好友的故事都能處於分頁就緒狀態。 我選擇堆疊，準備製作動畫和其他趣味模式。 我說堆疊時，想看的是 不像從側面那樣那樣

透過 CSS 格線，我們可以定義單儲存格方格 (也就是正方形)，其中一列 資料欄會共用一個別名 ([story])，而每個子項都會指派給該別名 別名單一儲存格空間：

.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.story {
  grid-area: story;
  background-size: cover;
  …
}

這樣可以讓 HTML 控制堆疊順序，同時保留所有元素 資料流向請注意，我們不需要對 absolute 定位、z-index 和 我們不需要用 height: 100% 或 width: 100% 打字。父項格線 已定義故事影像可視區域的大小，因此這些故事元件都不會定義 就能填補這個星球！

CSS 捲動貼齊點

只要使用 CSS 捲動 Snap 點規格，即可採用 雙指撥動，可在捲動時將元素鎖定在可視區域在 CSS 屬性存在前 你必須使用 JavaScript，而且最不容易...退房日 CSS 捲動 Snap 要點 由 Sarah Drasner 製作而成

使用 scroll-snap-points 樣式時水平捲動。 沒有的話，使用者就可以正常捲動畫面。安裝完成後，瀏覽器會輕輕放在每個項目上。
parent
.stories {
  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}
敬上 具有過度捲動的父項定義貼齊行為。
兒童
.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
敬上 兒童選擇加入貼齊目標。

我選擇「捲動 Snap 點」的原因如下：

  • 免費的無障礙功能，捲動 Snap 點規格是指按下 使用向左鍵和向右鍵鍵，應在貼齊點之間移動 根據預設。
  • 規格不斷增加。捲動 Snap 規格的規格將取得新功能和改良項目 這意味著 我的短片故事元件可能永遠因為 執行
  • 易於導入：捲動 Snap 點數是很實用的設計， 以觸控為主的水平分頁使用案例。
  • 免費平台式的慣性。每個平台都會有樣式的捲動和休息時間 經過正規化的慣性，具有難以置信的捲動和休息風格。

跨瀏覽器相容性

我們在 Opera、Firefox、Safari、Chrome 及 Android 與 iOS 上都經過測試。接下來 簡述網路功能與支援差異。

雖然部分 CSS 供應商並不適用，因此目前有部分平台必須善用使用者體驗 以及最佳化調整不需要管理這些功能，也很有信心 最終會連到其他瀏覽器和平台

scroll-snap-stop

輪轉介面是使用者體驗的主要用途之一， CSS 捲動 Snap 點規格。與短片故事不同，輪轉介面不會一直 顯示在使用者與圖片互動後的每個圖片上而這應該不是問題， 快速循環切換輪轉介面另一方面，故事最適合逐一瀏覽 這就是 scroll-snap-stop 提供的功能

.user {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

撰寫本文時，scroll-snap-stop 只支援以 Chromium 為基礎的 。退房日 瀏覽器相容性 。不過，這不是阻礙。這只是表示在不支援的瀏覽器上 使用者可能會不小心略過朋友。所以使用者就必須謹慎以對 我們需要編寫 JavaScript，以確保要略過的好友並未標示為已觀看。

詳情請參閱 spec

overscroll-behavior

您是否曾在短時間內 要開始捲動互動視窗的內容嗎？ overscroll-behavior敬上 讓開發人員無法以捲動的方式 請出發。而且適合各種場合。「我的故事」元件會使用 防止額外的滑動和捲動手勢 元件。

.stories {
  overflow-x: auto;
  overscroll-behavior: contain;
}

Safari 和 Opera 是 2 種瀏覽器 支援， 完全沒問題這些使用者會獲得像先前一樣的過度捲動體驗 從不曾注意到這項強化功能我是個大粉絲，也喜歡 包含在我實作的每一個過度捲動功能中這是 帶來無害的附加價值，只會提升使用者體驗。

scrollIntoView({behavior: 'smooth'})

當使用者輕觸或點擊，並看過好友的故事集錦時， 現在可以移動到捲動貼齊點集中的下一位朋友了。取代為 JavaScript，我們就能參照下一位朋友，並要求使用 向下捲動到檢視畫面中這些基本概念的支援良好每個瀏覽器 向下捲動到檢視畫面中但並非所有瀏覽器都'smooth'。這只是 會捲動至檢視畫面中，而不是貼齊

element.scrollIntoView({
  behavior: 'smooth'
})

Safari 是唯一不支援此處 behavior: 'smooth' 的瀏覽器。退房日 瀏覽器相容性 。

實作

現在你知道該怎麼做了，你會怎麼做？！我們來擴展 ，瞭解建立網路世界的所有方式。建立 Glitch。 透過 Twitter 分享你的版本，我會將它新增到 請參閱下方的社群重混作品專區。

社群重混作品