android 横向滚动 导航,仿今日头条横向滚动导航栏--原生js

咳咳！先打一波小广告，在上一篇里忘记了，那啥……我的那个个人博客做好了-->(我的博客)

好嘞，言归正传，说说我们的效果。

其实就是实现横向滑动，进行选择。

原理：

鼠标按下，获取当前鼠标坐标，作为起始坐标；

鼠标移动，获取坐标，与起始坐标进行一系列的数学运算；

给 left 赋值，改变位置；

移动过多，超过时进行处理。

function scrollTabX() {

let nav = document.getElementById("nav");

let navs = document.getElementsByTagName("li");

let navbar = document.getElementsByClassName("navbar")[0];

let left = nav.style.left; // ul 距离左边的距离

let totalWidth = 0; // 总宽度

let minusValue = 0; // 设备宽度与总宽度的差值

left = left ? left : 0; // 初始时 ul 距离左边 0px

// 获取所有 li 所占用的宽度

for (let i = 0; i < navs.length; i++) totalWidth += navs[i].offsetWidth;

// 固定 ul 的宽度

nav.style.w