水平可捲動的部分是常見的網頁設計模式，用於顯示超出視窗寬度的內容。這種設計模式允許使用者水平滾動，提供了一種獨特而吸引人的方式來展示大型圖像、畫廊、時間軸、地圖和其他內容。這是透過使用CSS屬性，如overflow−x: auto或overflow−x: scroll來實現的。
這使用本機瀏覽器功能進行水平捲動，並且跨裝置回應。允許輕鬆導航和探索內容。它不需要任何額外的庫或插件。
演算法
使用「container」類別定義容器元素。
將容器的「overflow−x」屬性設為「auto」以啟用水平捲動。
將容器的“white−space”屬性設為“nowrap”，以防止各部分換行到下一行。
使用class為"section"定義section元素。
將每個部分的“display”屬性設為“inline−block”，使它們並排顯示。
將每個部分的“width”屬性設為“100vw”，以將每個部分的寬度設為完整視口寬度。
將每個部分的“height”屬性設為“80vh”，以將每個部分的高度設為視口高度的 80%。
使用「margin−right」屬性在每個部分的右側新增邊距。
使用「vertical−align」屬性將每個部分的頂部與容器的頂部對齊。
將section元素放置在容器元素內。
範例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Horizontal Scrollable Sections</title>
<!------------------------- CSS ----------------------->
<style>
.container {
overflow-x: auto; /* Enables horizontal scrolling for the container */
white-space: nowrap; /* Prevents the sections from wrapping to the next line */
}
.section {
display: inline-block; /* Makes the sections display side-by-side */
width: 100vw; /* Sets the width of each section to the full viewport width */
height: 80vh; /* Sets the height of each section to 80% of the viewport height */
margin-right: 20px; /* Adds a 20px margin to the right of each section */
vertical-align: top; /* Aligns the top of each section with the top of the container */
}
</style>
</head>
<body>
<!-- This is the container that holds the sections -->
<div class="container">
<!-- Each section is a div with the "section" class -->
<div class="section">
<h2 id="Section">Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="section">
<h2 id="Section">Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="section">
<h2 id="Section">Section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="section">
<h2 id="Section">Section 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="section">
<h2 id="Section">Section 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</body>
</html>
這也可以透過傳統的垂直滾動與分頁或選項卡來實現，將內容分成不同的部分。使用網格或彈性盒佈局以響應式和視覺上吸引人的方式顯示內容，而不依賴水平滾動。
結論
在設計時請記住以下準則：
保持簡單：避免將每個區域塞滿訊息。將注意力放在簡潔明了地陳述關鍵要點上。
使用引人注目的視覺效果：為了吸引觀眾並使您的版塊更具娛樂性，請使用一流的照片、影片或動畫。
使用一致的設計：為了產生無縫的整體外觀和感覺，請確保每個區域都具有一致的設計。
提供導覽：讓使用者可以輕鬆地在水平滾動頁面的各個部分之間移動。要使它們移動，您可以添加箭頭、點和導航連接。
以上是在CSS中建立水平可滾動的部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！
重新創建Codepen Gutenberg嵌入塊以進行理智。Apr 09, 2025 am 11:43 AM了解如何通過Chris Coyier實施WordPress的Gutenberg編輯器來創建一個自定義Codepen塊，並為Sanity Studio提供預覽。
我們如何創建一個在SVG中生成格子呢模式的靜態站點Apr 09, 2025 am 11:29 AM格子呢是一塊圖案布，通常與蘇格蘭有關，尤其是他們時尚的蘇格蘭語。在Tartanify.com上，我們收集了5,000多個格子呢
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
WebStorm Mac版
好用的JavaScript開發工具
禪工作室 13.0.1
強大的PHP整合開發環境
SublimeText3 英文版
推薦：為Win版本，支援程式碼提示！
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中
