原生js写头部tab栏左右滑动支持移动端

最新推荐文章于 2026-06-20 00:18:33 发布

原创最新推荐文章于 2026-06-20 00:18:33 发布 · 2.8k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #tab滑动 #插件 #web app #移动

前端插件专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用纯原生JavaScript实现一个响应式的导航栏，包括CSS样式设置、HTML结构搭建及通过触摸事件实现导航栏平滑滚动的完整代码。

前面有一篇功能较完善的，但是是jq和原生混搭的，有朋友只需要原生的，就做了个简单的；

1.css

*{margin: 0; padding: 0; box-sizing: border-box; text-decoration: none;list-style:none}
			html,body{width: 100%; overflow: hidden;} 
			#contentNav{width: 100%;margin-left:20px;height: 67px;overflow: hidden;}
			#contentNavul {height: 100%;transition: all ease 0s;}
			#contentNavul li{float: left;height: 65px;width: 105px; border: 1px solid #CCCCCC; text-align: center;
				color: #CCCCCC;line-height: 65px; margin-right: 10px;border-radius: 5px;font-size: 14px;}
			#contentNavul li.selected{background: blue;color: #FFFFFF}

2.html

<div id="contentNav">
			<ul id="contentNavul">
				<li class="selected">演讲者模式</li>
				<li>声控模式</li>
				<li>固定画面模式</li>
				<li>轮播图模式</li>
				<li>模式1</li>
				<li>模式2</li>
				<li>模式3</li>
			</ul>
		</div>

3.原生js

var hg = window.screen.width;
			var contentNav = document.getElementById("contentNav");
			contentNav.style.width = (hg-40) +'px';
			
			var contentNavul = contentNav.getElementsByTagName('ul')[0];
			var ali = contentNavul.getElementsByTagName('li');
			contentNavul.style.width = ali.length*(ali[0].offsetWidth+10)+'px';
			
			for (var i=0;i<ali.length;i++) {
				ali[i].index=i;
				ali[i].onclick=function(){
					for (var j=0;j<ali.length;j++) {
						ali[j].className="";
					}
					ali[this.index].className="selected";
                                        tocenter(this.index); 
			};
			
                        function tocenter(index){
                var disX = ali[index].offsetLeft;//当前div距离屏幕左边距离
                var divWidth = ali[index].offsetWidth;
                var resPlaceX = (hg - divWidth) / 2;
                var moveDistance = disX - resPlaceX; 
                var a=getmarginleft(contentNavul.style.marginLeft);
                  var translateX = a + -moveDistance;
                  console.log(translateX)
                var maxleft=getmarginleft(contentNavul.style.width)-getmarginleft(contentNav.style.width);
                if(translateX > 0){
                    translateX = 0;
                }
                if(translateX < 0){
                    if(-translateX > maxleft){
                        translateX = -maxleft;
                    }else{
                        translateX = translateX;
                    }
                }
                contentNavul.style.marginLeft = translateX  +"px";
                
               }

			function getmarginleft(a){
				a=a.slice(a.indexOf('(') + 1,a.indexOf('px'));
		  		if (a == '') {a = 0};
		  		a= parseFloat(a); 
		  		return a;
			}
			var startX=0;
			var a=0;
			contentNavul.ontouchstart=function(e){
				var touchestartEv = e || event; 
				startX = touchestartEv.touches[0].clientX;
				a=getmarginleft(contentNavul.style.marginLeft);
			}
			
			contentNavul.ontouchmove=function(ev){
				var touchmoveEv = ev || event;
				var moveX = touchmoveEv.touches[0].clientX;;
				var translateX =startX - moveX - a;
				var maxleft=getmarginleft(contentNavul.style.width)-getmarginleft(contentNav.style.width);
				if(translateX > maxleft){
					translateX = maxleft;
				}
				if(translateX < 0){
					translateX = 0;
				}
				console.log(translateX);
				contentNavul.style.marginLeft = "-" + translateX  +"px";
			}