CSS实现移动端横向滚动导航条，仿今日头条滚动导航

爱被打了一巴掌 2023-07-25 08:44 2阅读 0赞

## 应用场景 ##

现在很多移动端的横向导航都是实现了滚动效果，我们先来看几个案例：  
**今日头条**  
![aHR0cHM6Ly9pbWcyMDIwLmNuYmxvZ3MuY29tL2Jsb2cvNDgwNDUyLzIwMjAwNC80ODA0NTItMjAyMDA0MTMxNTQyNTY5MzAtMTIyMDUyOTUzOC5naWY][]

**b站**  
![aHR0cHM6Ly9pbWcyMDIwLmNuYmxvZ3MuY29tL2Jsb2cvNDgwNDUyLzIwMjAwNC80ODA0NTItMjAyMDA0MTMxNTQzMjYxNzYtMjA0NDg3ODE5MS5naWY][]

## 代码实现 ##

HTML代码：

CSS代码：

.nav { 
    	width: 100%;
    	height: 50px;
    	line-height: 50px;
    	/*段落中文本不换行*/
    	white-space: nowrap;
    	/*阴影*/
    	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    	/*设置横向滚动*/
    	overflow-x: scroll;
    	/*禁止纵向滚动*/
    	overflow-y: hidden;
    	/*文本平铺*/
    	text-align: justify;
    	/*背景颜色*/
    	background: #F4F5F6;
    	padding: 0px 5px;
    	margin-bottom: 10px;
    	/*设置边距改变效果为内缩*/
    	box-sizing: border-box;
    }
    
    .nav a { 
    	color: #505050;
    	/*取消超链接下划线*/
    	text-decoration: none;
    	margin: auto 10px;
    }
    
    .nav::-webkit-scrollbar { 
    	/*隐藏滚动条*/
    	display: none;
    }

演示效果：  
![aHR0cHM6Ly9pbWcyMDIwLmNuYmxvZ3MuY29tL2Jsb2cvNDgwNDUyLzIwMjAwNC80ODA0NTItMjAyMDA0MTMxNTQ4MTk1NDgtMjA0NjczMjQxNC5naWY][]

[aHR0cHM6Ly9pbWcyMDIwLmNuYmxvZ3MuY29tL2Jsb2cvNDgwNDUyLzIwMjAwNC80ODA0NTItMjAyMDA0MTMxNTQyNTY5MzAtMTIyMDUyOTUzOC5naWY]: /images/20230528/fb8a6e8080b746a98fb4753d39c87f2a.png
[aHR0cHM6Ly9pbWcyMDIwLmNuYmxvZ3MuY29tL2Jsb2cvNDgwNDUyLzIwMjAwNC80ODA0NTItMjAyMDA0MTMxNTQzMjYxNzYtMjA0NDg3ODE5MS5naWY]: /images/20230528/6340321d6cd94b04977ca5f800beeafe.png
[aHR0cHM6Ly9pbWcyMDIwLmNuYmxvZ3MuY29tL2Jsb2cvNDgwNDUyLzIwMjAwNC80ODA0NTItMjAyMDA0MTMxNTQ4MTk1NDgtMjA0NjczMjQxNC5naWY]: /images/20230528/bfaea375d7d840848966fe81ec6a0d21.png