仿今日头条横向滚动导航栏--原生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.width = totalWidth + 'px';
    minusValue = window.screen.width - totalWidth;

    // 当设备宽度小于 ul 宽度的时候，执行水平滚动
    if (minusValue < 0) {
        (function () {
            nav.onmousedown = function (ev) {
                let e = ev || event;
                // 获取鼠标的位置信息
                let startX = e.screenX;
                nav.onmousemove = function (e) {
                    left += (e.screenX - startX) / 10;
                    nav.style.left = left + 'px';
                }
            }
            nav.onmouseup = function () {
                nav.onmousemove = null;
                // 拉多了，要回来呢，兄弟
                if (left > 0) {
                    let timer = setInterval(function () {
                        left -= 50;
                        if (left <= 0) {
                            left = 0;
                            clearInterval(timer);
                        }
                        nav.style.left = left + 'px';
                    }, 20);
                }
                if (left < minusValue) {
                    let timer = setInterval(function () {
                        left += 50;
                        if (left >= minusValue) {
                            left = minusValue - 10;   // 有个 10px 的 padding
                            clearInterval(timer);
                        }
                        nav.style.left = left + 'px';
                    }, 20);
                }
                // 去掉阴影
                navbar.style.boxShadow = (left <= minusValue) ? "0 0 0 #fff" : "-5px 0 10px #fff inset";
            }
        })();
    }
}

效果图（动图不会哎）：

反正想像一下效果就好了，哈哈。

至于说这篇写的不怎么样，我为什么还要置顶？……当然是因为我的博客啦！

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

推荐阅读