横向滑动页面,导航条滑动居中的 js 实现思路

Posted 进击的前端狗

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了横向滑动页面,导航条滑动居中的 js 实现思路相关的知识,希望对你有一定的参考价值。

最近在做新闻咨询页的项目,各个新闻频道通过横向滑动切换,顶部的导航active栏需要跟着切换到对应频道,并且active到达中部时,要一直处在中间。 类似效果就是uc浏览器《UC头条》的导航栏滑动居中一样。

写出来挺有成就感的,做个记录。使用的框架是vue, 但思路无关框架。

首先看html的结构,

<ul>
      <li class=‘active‘>娱乐</li>
      <li>要闻</li>
      <li>体育</li>
</ul>

 

目的是需要动态设置ul的位置,可以设置绝对定位调整left值,也可以用css3的translateX

那首先需要拿到active 对应li 标签的位置, 实现的关键是这2个方法

offsetLeft  获取当前元素相对于父元素的left值

getBoundingClientRect() 获取当前元素相对于视口(viewport)的位置,宽高等属性。

 

首先需要获得  居中的位置 = (window.innerWidth - li的宽度 ) / 2;

公式: ul目标位置 = li相对于父元素的left值 -  居中的位置。  

 1           let li= document.querySelector(‘.active‘);
 2           let ul = document.querySelector(‘ul‘)
 3           let window_offsetWidth = window.innerWidth; //屏幕宽度;
 4           if (dom) {
 5              let lioffsetWidth = dom.offsetLeft,
 6               //中间值 =( 屏幕宽度 - li宽度 ) / 2;
 7               diffWidth = (window_offsetWidth - dom.getBoundingClientRect().width) / 2,
 8               //目标值 = offset - 中间值
 9               targetOffset = lioffsetWidth - diffWidth;
10            
11             if (targetOffset < 0) {
12               ul.style.left = ‘0px‘;
13               return;
14             }
15             ul.style.left = -targetOffset + ‘px‘  

以上代码,每次active切换的时候都需要执行,计算一次。我这里用vue的 watch 事件监听active绑定变量的变化来实现的

 

以上是关于横向滑动页面,导航条滑动居中的 js 实现思路的主要内容,如果未能解决你的问题,请参考以下文章

导航栏实现横向滑动效果

iOS下简单实现滑动导航条

android开发中,怎么实现上下滑动,不是ScrollView,我要的是一次滑动整个页面,跟横向滑动效果一样。。

jQuery右侧滑动快速导航条

html+js自定义滑动条

JS怎么判断屏幕有没有变化啊,我想判断滑动一个页面是不是滑倒底部(无滚动条)