用純HTML，JS，CSS實現橫向滾動標簽頁

来源:https://www.cnblogs.com/honguilee/archive/2023/06/13/17478578.html
-Advertisement-
Play Games

### 前言 前不久，在我的一個項目中，需要展示一個橫向滾動的標簽頁，它支持滑鼠橫向拖動和點擊切換。在實現的過程中，我發現這個小功能需要同時用到前端的三輛馬車，但是實現難度不高，而且最終效果還不錯，是個難得的初學者項目，於是萌生了寫這篇文章的想法，希望對初學者有所幫助。同時為了避免初學者學習框架，我 ...


前言

前不久，在我的一個項目中，需要展示一個橫向滾動的標簽頁，它支持滑鼠橫向拖動和點擊切換。在實現的過程中，我發現這個小功能需要同時用到前端的三輛馬車，但是實現難度不高，而且最終效果還不錯，是個難得的初學者項目，於是萌生了寫這篇文章的想法，希望對初學者有所幫助。同時為了避免初學者學習框架，我打算用純原生的方式實現它。

我們最終的效果應該類似於下麵：
last_version

需求分析

需求分析就是細化我們需要完成的功能，某個功能的完成需要哪些技術的參與。對於初學者，需求分析至關重要，它可以幫助我們理清思路，找到解決問題的突破口，所以應該引起足夠的重視。以本篇目標為例，標簽頁的需求分析就可以像下麵這樣：

  1. 我們的展示主體是標簽頁，HTML就是實現主體的主要技術；
  2. 標簽頁需要可以拖動和點擊，這涉及到滑鼠事件的監聽和處理，是JS的主場；
  3. 既然標簽頁可以拖動了，那是否要隱藏那個醜陋的滾動條，加個活動指示器，給滑鼠變一個樣式？很明顯，這些都是CSS的優勢。

如上，通過對展示，操作，樣式的劃分，我們進一步明確了HTML，JS，CSS需要完成的工作，甚至連實現都明朗了，所以對需求拆分得越詳細，對實現就越有掌控力。

基本框架

對於前端來說，HTML始終是萬物之源，所以一言不合先構築個標準的HTML頁面總是沒錯的。為了便於演示，我將所有的內容都放在一個HTML文件中，文件結構如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Tab演示</title>

	<!-- 這裡是樣式區，後續css代碼會添加到這裡 -->
	<style type="text/css">
		
	</style>
</head>
<body>
	<!-- 這裡是頁面區，後續HTML代碼會添加到這裡 -->
</body>
<!-- 這裡是腳本區，後續JS代碼會添加到這裡,放在這裡是因為方便寫代碼 -->
<script type="text/javascript">
	
</script>
</html>

這裡和以往不同，我將script放到了最後，這是因為我想在寫腳本的時候，頁面標簽直接可用，減少對頁面載入的監聽，降低複雜性。

實現基本功能

有了基本結構，下一步當然是畫頁面啦。從效果圖中不難看出，頁面主要包括一個一個的選項卡，對於HTML來說，這不就是列表嘛。於是，突破口就出現了，我們先往HTML裡面加入列表

<ul>
		<li>肖申克的救贖</li>
		<li>霸王別姬</li>
		<li>阿甘正傳</li>
		<li>泰坦尼克號</li>
		<li>這個殺手不太冷</li>
		<li>美麗人生</li>
		<li>千與千尋</li>
		<li>辛德勒的名單</li>
		<li>盜夢空間</li>
		<li>忠犬八公的故事</li>
</ul>

於是，我們有了原始的標簽頁。但是標簽頁是豎向的，並且有著醜陋的小黑點，不符合需求。
pure_html
發現了這些問題，下一步當然解決這些問題了，這當然就是CSS的強項啦。首要問題就是讓列表橫過來。橫過來就是改變了元素的相對位置，也就是對應CSS的佈局功能。那說起佈局，CSS的佈局方式有很多，像float,position等等。標簽頁是橫向多個緊密排列的，一個挨著一個，這當然是用flex啦。至於討厭的小黑點，這是新東西，需要百度一下。查閱文檔發現，ul有個屬性list-style-type，只需把它設置為none就可以去除小黑點。
此時，頁面上的所有選項卡都緊密排列了。為了讓它更像一個選項卡，需要給它居中，限制一下寬度，加個背景色，加點padding。下麵就是改完樣式的代碼

ul{
	display: flex;
	justify-content: center;
	align-content: center;
	list-style-type: none;
	background-color: #2397f3;
	width: 600px;
	overflow-x: scroll;
}

li{
	padding: 16px;
	flex-shrink: 0;
}

值得註意的地方有兩點。在ul的樣式中，由於給ul加了寬度限制，導致它的內容超出了內容區，所以要給ul加上overflow-x的屬性。同樣由於寬度的原因，flex子項在寬度不夠的情況下會預設縮小，表現在標簽上就是文字換行啦，flex-shrink: 0;就是讓子項保留原有大小。此時，再來刷新頁面，可以看到選項卡的基本雛形已經出來了。雖然簡陋，但是可以拖動滾動條左右滾動了。下一步，我們的目標就是去除這個醜陋的滾動條。網上搜索一番，發現火狐，IE和Chrome的方式不盡相同，為了相容性，我們就都給寫上。

ul{
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE 10+ */
}

ul::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

滾動條去除後，UI好看了，但是新問題出現了——選項卡滾動不了了。彆著急，下一步就是添加滑鼠拖動功能。

實現交互

在瀏覽器中，HTML標簽有對系統事件的監聽能力，響應這些事件，可以使頁面實時響應用戶的操作。通過對不同的事件的組合，可以實現各種豐富、有趣的功能，標簽頁也一樣。

標簽頁的首要功能是可以隨著滑鼠的拖動而滾動元素，那麼，首要任務就是監聽滑鼠的移動事件啦。但是光監聽移動還不行，因為通常來說，用戶在滑鼠左鍵按下後才希望真正拖動，滑鼠左鍵抬起後結束拖動。所以，這個拖動動作其實需要組合滑鼠按下（mousedown），移動（mousemove），抬起（mouseup）三個事件。那麼這三個方法加在哪，怎麼加呢？

在Web API中，JS操作HTML的入口點是Document對象，Document提供了操作（增刪改查）HTML元素的API。這一過程是有標準流程的。

  1. 通過Document查找目標元素；
  2. 對目標元素進行元素，樣式變更等操作；
  3. 變更完成；

這一過程是重覆且繁雜的，為了減少編寫這樣的樣板代碼，加快開發速度，一大堆前端框架應運而生。所以，在學習前端框架時，牢記這一基本步驟，有助於快速理解框架的運行原理。畢竟無論框架怎麼變，最終都是要落實到這一過程上。

演算法明確後，接下來就是具體實現。

查找目標元素

在查找目標前，需要首先明確目標是誰。用戶肯定不希望在頁面的其他地方拖動滑鼠，標簽頁跟著滾動了，這很奇怪。所以我們的目標元素應該是無序列表。那麼，怎樣通過Document知道無序列表呢，查閱Document的API，發現它有個querySelector的方法，這個方法會從上到下查找滿足條件的選擇器，並返回第一個滿足條件的元素，參數則是選擇器的名稱。上面已經明確過我們的目標是無序列表，所以查找目標元素的最終代碼如下

const ul=document.querySelector('ul');

為列表滾起來

每一個HTML元素，在JS中都是Element的對象。上一步我們已經得到了一個Element對象ul,註意，這裡的ul對象和ul標簽不盡相同。一個是JS的對象對HTML標簽的表示，一個是HTML標簽。現在有了一個對象，那麼就可以通過調用合適的方法來操作這個對象了。通過查閱Element對象的API，發現它有個addEventListener()的方法，這個方法可以完成該對象表示的HTML標簽對某些事件的監聽。這個方法接收兩個參數，第一個參數是事件名稱，這在上一節已經說過。第二個參數則是對這個事件的處理，這也是我們實現魔法的地方。

首先，在用戶按下滑鼠左鍵後，開始記錄滑鼠移動情況。在滑鼠左鍵抬起後，停止記錄。所以按下和抬起的主要功能就是維護記錄開關，控制標簽滾動的動作得在滑鼠移動的回調里處理。

但在真正寫邏輯前，還有兩個問題沒有處理。
1、怎樣讓標簽滾動？
2、滾動的邏輯怎樣寫？
問題一當然需要查閱Element的API啦。搜索滾動相關的，發現兩個相關性比較大的方法——scrollBy()，scrollTo()，都可以滾動內容。唯一的區別是前者的參數是滾動的偏移，後者是最終值。由於滑鼠移動是一點一點的，所以選擇前者會更方便一點。確定了方法，也就解答了問題一。對於問題二，簡單來說就是怎樣提供問題一所需的參數。scrollBy()需要兩個參數，橫向和縱向的滾動偏移值，由於我們只希望標簽頁可以橫向滾動，所以縱向的偏移始終是0，那麼橫向的呢？通常事件回調都會傳遞一個事件對象，稱作MouseEvent，我們去查查事件對象的API，發現裡面帶有好幾個關於坐標的屬性——clientX，movementX，screenX。movementX直接就滿足我們的需求，它代表上一次滑鼠移動到這一次移動間的偏移，而剛好scrollBy()需要的參數就是偏移，妥了。
綜上，得出以下代碼

const ul=document.querySelector('ul');
let isMouseDown=false;
ul.addEventListener('mousedown',(e)=>{
	isMouseDown=true;
})
ul.addEventListener('mousemove',(e)=>{
	if(isMouseDown){
		ul.scrollBy(-e.movementX,0);
	}
})
ul.addEventListener('mouseup',(e)=>{
	isMouseDown=false;
})

可以看到，在mousemove的處理上，偏移加了個負號。因為在HTML頁面中左上角為坐標原點，右邊為X軸正方向。一直往右，則X坐標是增大的，而movementX的值是當前滑鼠坐標與上一次坐標點的差值，上一次肯定比這一次小，兩者的差值肯定是正值。基於同樣的原因，scrollBy()參數正值代表增大X值，也就是顯示右邊的內容，隱藏左邊的內容。兩者結合的效果就是，滑鼠往右拖，標簽頁右邊隱藏的內容展示了出來，這和直覺相悖。通常我們希望滑鼠往右拖，頁面展示左邊的內容，隱藏右邊的。基於這樣的分析，我們需要給movementX的值取反。

顯示當前選中的標簽頁

現在，標簽頁可以滾動了，但是還不能選中。我希望點擊某個標簽時，標簽下方出現一個小橫條表示選中狀態。很明顯，顯示小橫條是一個CSS的問題，而點擊標簽切換小橫條是JS的問題，這一次我們需要同時處理JS和CSS的問題。

首先來顯示小橫條。顯示小橫條有兩個思路，一種是在HTML中搞個div標簽，另一種是使用::after偽元素。我選擇後一種，這樣可以保持HTML的乾凈。
接下來需要確定小橫條的樣式

  • 覆蓋在選中的標簽上
  • 位置是標簽底部
  • 和標簽一樣長

我們知道正常的HTML文檔流是從左到右，從上到下的，新加的元素會追加到已有元素的右邊或者下邊。小橫條需要覆蓋在標簽上，那麼就要改變這一預設行為，position屬性就是實現這個功能的關鍵。absolute，fixed都可以脫離正常文檔流，使元素覆蓋在祖先元素上，不同的是前者是相對於最近的定位祖先，後者是相當於視口的。小橫條是跟隨著標簽顯示的，顯然要使用前者。確定了位置，還有大小和樣式。既然使用了絕對定位，那麼bottom,'left',right相應就能限定它的位置和大小了，小橫條的樣式就直接用border-bottom吧。於是，小橫條的樣式就出來了

.current::after{
			content: "";
			position: absolute;
			border-bottom: 4px solid #FFC109;
			border-radius: 2px;
			bottom: 0;
			left: 0;
			right: 0;
}

結束了嗎，還沒有！使用了絕對定位，必須時刻記得給絕對定位的元素找個錨點，也就是參照，不然top,left，right，bottom去參考誰呢？那麼怎樣告訴絕對定位的參照物呢，還是position屬性。只不過這一次它要出現在參照物的CSS裡面。而由前面的樣式分析，小橫條始終跟著標簽頁走，也就是說小橫條的參照物就是標簽頁。所以，還要在標簽頁的樣式上加上position的屬性。當然，為了區分更明顯，我還改變了一下顏色。

.current{
			color: white;
			position: relative;
}

至此，小橫條可以正常顯示出來了。

小橫條跟隨滑鼠點擊顯示

有了前面拖動功能的經驗支持，這一次輕車熟路了，滑鼠點擊某個標簽頁，小橫條顯示在對應的標簽頁下方。這一次事件的對象變成了單個標簽頁，所以點擊事件要加在單個標簽頁上。但是這一次標簽頁太多了，我們不能還是按照之前的查找-設置方法，這樣太繁雜了。巧合的是，前面我們已經得到了ul對象了，通過它的children屬性，可以得到所有的li，這不就妥了嗎。
小橫條要切換到不同的標簽頁上顯示，也就是小橫條這個樣式要根據點擊對象的不同而動態增加或者刪除。查閱Element的API，發現有個className的屬性，改變它的值就可以增減樣式了。

let last=null;
for(let l of ul.children){
		l.addEventListener('click',(e)=>{
			if(last){
				last.className='';
			}
			e.target.className='current';
			last=e.target;
	})
}

代碼的實現中，多了個last對象。因為通常標簽頁只能同時選中一個，當新的標簽頁被選中之後，上一個選中的標簽頁應該恢複原始樣式，這就是last對象的作用。我們先取消選中上一個元素，然後再選中當前點擊的對象，這樣就完成了小橫條跟隨點擊選中的效果了。

總結

總的來說，這個項目的難點不在於實現有多難，而是新。很多初學者，面對這種新問題往往束手無策，找不到切入點。本篇嘗試以例子的形式，以初學者的思維方式分析需求，拆解問題，提煉方法，最終解決問題。從最朴素的直覺出發，引導思考，找到一條易於接受和理解的方法。

所以，遇到新問題不要慌，對問題拆解後，看能不能找到突破口，如果找不到，再從涉及到的幾個主要對象中尋找靈感，通常都會有所收穫。最後就是多逛逛MDN，關鍵時刻真能派上大用場。

最後，情人節快樂，祝有情人終成眷屬！

參考


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 資料庫複習——資料庫模式設計
    # 資料庫模式設計如果不好會導致的問題： １．冗餘 ２．導致數據一致性出現問題 ３．插入異常 ４．更新異常 ５．刪除異常 # 函數依賴 函數依賴是指一個或多個屬性的取值可以確定另一個屬性的取值。具體地說，如果一個關係模式R中屬性集合X的取值能唯一地確定屬性集合Y的取值，那麼我們稱屬性集合Y對於屬性集 ...
  • Hive執行計劃之只有map階段SQL性能分析和解讀
    這種只含map的操作，如果文件大小控制在合適的情況下，都將只有本地操作，其執行非常高效，運行效率完全不輸於在計算引擎Tez和Spark上運行。 ...
  • MySQL讀取的記錄和我想象的不一致
    摘要：併發的事務在運行過程中會出現一些可能引發一致性問題的現象，本篇將詳細分析一下。 本文分享自華為雲社區《MySQL讀取的記錄和我想象的不一致——事物隔離級別和MVCC》，作者：磚業洋__。 事務的特性簡介 1.1 原子性（Atomicity） 要麼全做，要麼全不做，一系列操作都是不可分割的，如果 ...
  • ORACLE如何找出視圖依賴的對象和視圖嵌套層數
    之前寫過一篇文章“SQL Server如何找出視圖依賴的對象和視圖嵌套層數”，這裡我介紹一下Oracle資料庫中如何找出視圖的依賴對象以及視圖嵌套層數關係。主要通過DBA_DEPENDENCIES這個系統視圖（這個系統視圖中包含有對象的依賴關係數據）。另外，我們使用了Oracle的樹形查詢（層級查詢 ...
  • 沉思篇-剖析Jetpack的ViewModel
    > ViewModel做為架構組件的三元老之一，是實現MVVM的有力武器。 ### ViewModel的設計目標 ViewModel的基本功能就是管理UI的數據。其實，從職責上來說，這又是對Activity和Fragment的一次功能拆分。以前存儲在它們內部的數據，需要它們自己處理創建，更新，存儲， ...
  • 插件化工程R文件瘦身技術方案 | 京東雲技術團隊
    隨著業務的發展及版本迭代，客戶端工程中不斷增加新的業務邏輯、引入新的資源，隨之而來的問題就是安裝包體積變大，前期各個業務模塊通過無用資源刪減、大圖壓縮或轉上雲、AB實驗業務邏輯下線或其他手段在降低包體積上取得了一定的成果。 ...
  • 直播回顧|走進元服務，攜手小強停車探索鴻蒙新流量陣地
    本期直播《“元”來如此，“服務”直達——揭秘鴻蒙新流量陣地》聚焦**元服務**的**商業流量價值**，介紹元服務提供的服務直達和卡片動態變化等**輕量化服務**。網約停車旗艦平臺小強停車做客直播間，分享小強停車在HarmonyOS生態中，如何通過元服務為廣大用戶帶來更加便捷易用的線上預約停車體驗。快 ...
  • 再也不用擔心變數類型錯誤！學會JS中如何輕鬆檢查變數類型
    ## 顏色 1. **RGB** （紅，綠，藍）三種顏色的集合，最低值是0（十六進位00）到最高值255（十六進位FF） 2. **HSL** H色相（0-360），S飽和度（百分比），L亮度（百分比） 3. （不）透明度 **rgba、hsla** （新版瀏覽器可不寫a，直接寫4個值） ## li ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類