导航条动态居中

落日映苍穹つ 2022-12-04 09:17 185阅读 0赞

# 导航条 动态居中 #

效果：  
![在这里插入图片描述][20200907172208399.gif_pic_center]

备注都在代码里了，各位看官请自便。  
代码：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			.wrap{  
    				height: 200px;
    				width: 820px;
    				background-color: #f0f0f0;
    				white-space: nowrap;
    				overflow: auto;
    				scroll-behavior: smooth;
    				}
    			.wrap::-webkit-scrollbar{  display: none;}
    			.inner{ 
    				width: 220px;
    				height: 100px;
    				background-color: gray;
    				display: inline-block;
    			}
    			.inner:nth-of-type(2n){ 
    				background-color: orange;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="wrap">
    			<div class="inner">1</div>
    			<div class="inner">2</div>
    			<div class="inner">3</div>
    			<div class="inner">4</div>
    			<div class="inner">5</div>
    			<div class="inner">6</div>
    			<div class="inner">7</div>
    			<div class="inner">8</div>
    			<div class="inner">9</div>
    			<div class="inner">10</div>
    		</div>
    		<script>
    			// 获取到wrap
    			var wrap = document.querySelector(".wrap");			
    			// wrap 宽度 
    			// wrap.clientWidth显示区域的宽
    			// wrap.offsetWidth 边框+滚动条+显示区域宽
    			// wrap.scrollWidth 内容实际的宽
    			var w = wrap.offsetWidth;
    		
    			// wrap 滚动条的位置
    			// var sl = wrap.scrollLeft;
    			
    			// 某个inner元素距wrap左侧的距离
    			var inner = document.querySelector(".inner:nth-of-type(4)");
    			
    			// 目标：单击哪个元素，滚动到最左侧
    			var inners = document.querySelectorAll(".inner");
    			for(let i=0;i<inners.length;i++){ 
    				inners[i].onclick = function(){ 
    					wrap.scrollLeft=inners[i].offsetLeft-w/2+inners[i].offsetWidth/2;
    					//移动到最左侧，再移动到盒子的中间(以左上角的点为基准)，再往回移动自身的一半
    				}
    			}
    		</script>
    	</body>
    </html>

[20200907172208399.gif_pic_center]: /images/20221123/02bc7b3b92f240cc9b2946d58be31648.png