用純HTML，JS，CSS實作橫向滾動標簽頁-有解無憂

前言

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

我們最終的效果應該類似于下面：
last_version

需求分析

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

我們的展示主體是標簽頁，HTML就是實作主體的主要技術；
標簽頁需要可以拖動和點擊，這涉及到滑鼠事件的監聽和處理，是JS的主場；
既然標簽頁可以拖動了，那是否要隱藏那個丑陋的滾動條，加個活動指示器，給滑鼠變一個樣式？很明顯，這些都是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，這一程序是有標準流程的，

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

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

演算法明確后，接下來就是具體實作，

查找目標元素

在查找目標前，需要首先明確目標是誰，用戶肯定不希望在頁面的其他地方拖動滑鼠，標簽頁跟著滾動了，這很奇怪，所以我們的目標元素應該是無序串列，那么，怎樣通過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，關鍵時刻真能派上大用場，

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

參考

[1] 使用CSS隱藏元素滾動條
[2] Element
[3] 事件參考
[4] MouseEvent

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/555118.html

標籤：其他

上一篇：記錄--為什么推薦用svg而不用icon?

下一篇：返回列表