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

function scrollTabX() {let nav &＃61; document.getElementById("nav");let navs &＃61; document.getElementsByTagName("li");let navbar &＃61; document.getElementsByClassName("navbar")[0];let left &＃61; nav.style.left; // ul 距离左边的距离let totalWidth &＃61; 0; // 总宽度let minusValue &＃61; 0; // 设备宽度与总宽度的差值
left &＃61; left ? left : 0; // 初始时 ul 距离左边 0px// 获取所有 li 所占用的宽度for (let i &＃61; 0; i navs[i].offsetWidth;// 固定 ul 的宽度nav.style.width &＃61; totalWidth &＃43; &＃39;px&＃39;;minusValue &＃61; window.screen.width - totalWidth;// 当设备宽度小于 ul 宽度的时候&＃xff0c;执行水平滚动if (minusValue <0) {(function () {nav.onmousedown &＃61; function (ev) {let e &＃61; ev || event;// 获取鼠标的位置信息let startX &＃61; e.screenX;nav.onmousemove &＃61; function (e) {left &＃43;&＃61; (e.screenX - startX) / 10;nav.style.left &＃61; left &＃43; &＃39;px&＃39;;}}nav.onmouseup &＃61; function () {nav.onmousemove &＃61; null;// 拉多了&＃xff0c;要回来呢&＃xff0c;兄弟if (left > 0) {let timer &＃61; setInterval(function () {left -&＃61; 50;if (left <&＃61; 0) {left &＃61; 0;clearInterval(timer);}nav.style.left &＃61; left &＃43; &＃39;px&＃39;;}, 20);}if (left <minusValue) {let timer &＃61; setInterval(function () {left &＃43;&＃61; 50;if (left >&＃61; minusValue) {left &＃61; minusValue - 10; // 有个 10px 的 padding
clearInterval(timer);}nav.style.left &＃61; left &＃43; &＃39;px&＃39;;}, 20);}// 去掉阴影navbar.style.boxShadow &＃61; (left <&＃61; minusValue) ? "0 0 0 #fff" : "-5px 0 10px #fff inset";}})();}
}