資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用 CSS 建立水平可滾動區域
水平可滾動區域是一種流行的網頁設計模式，用於展示超出視口寬度的內容。這種設計模式允許使用者水平滾動，提供了一種獨特且引人入勝的方式來顯示大型影像、畫廊、時間線、地圖和其他內容。這可以透過使用 CSS 屬性（如 overflow−x: auto 或 overflow−x: scroll）來實現。
這利用了瀏覽器原生的水平滾動功能，並且在不同裝置上具有響應性。允許輕鬆導航和瀏覽內容。它不需要任何額外的庫或外掛。
演算法
定義一個具有“container”類的容器元素。
將容器的“overflow−x”屬性設定為“auto”以啟用水平滾動。
將容器的“white−space”屬性設定為“nowrap”以防止區域換行到下一行。
定義具有“section”類的區域元素。
將每個區域的“display”屬性設定為“inline−block”以使它們並排顯示。
將每個區域的“width”屬性設定為“100vw”以將每個區域的寬度設定為整個視口寬度。
將每個區域的“height”屬性設定為“80vh”以將每個區域的高度設定為視口高度的 80%。
使用“margin−right”屬性向每個區域的右側新增邊距。
使用“vertical−align”屬性將每個區域的頂部與容器的頂部對齊。
將區域元素放置在容器元素內。
示例
<!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>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="section">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="section">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="section">
<h2>Section 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="section">
<h2>Section 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</body>
</html>
這也可以使用傳統的垂直滾動與分頁或選項卡來實現，以將內容分成多個區域。使用網格或 flexbox 佈局以響應式且視覺上吸引人的方式顯示內容，而無需依賴水平滾動。
結論
在設計時請記住以下準則
保持簡單：避免在每個區域塞滿資訊。將注意力放在簡潔明瞭地陳述要點上。
使用醒目的視覺效果：使用一流的照片、影片或動畫來吸引觀看者並使您的區域更具趣味性。
使用一致的設計：確保每個區域都具有一致的設計，以創造無縫的整體外觀和感覺。
提供導航：使使用者能夠輕鬆地在水平滾動頁面中各個部分之間移動。您可以包含箭頭、點和導航連結來幫助他們移動。
781 次檢視
