Javasctip HTML5 菜单导航自动滚动到指定位置

Javasctip HTML5 Vue Elment UI 滚动动发布于 2021-08-07

习惯Vue.js + Elment UI组合后，再切换回原生写法，总感觉有点生疏感。坏了，给Vue.js + Elment UI组合养刁，再也回不去了。然而你的担心是多余的，根据不同的项目，技术栈早已被焊死。

作为前端，不能说不行。重新用原生写了一遍后，发现Vue.js + Elment UI组合真的做了很多，帮我们避开已知的坑。

HTML代码：

HTML<div class="menu-box">
    <ul>
        <li>苹果</li>
        <li>西瓜</li>
        <li>梨果</li>
        <li>山楂</li>
        <li>油桃</li>
        <li>草莓</li>
        <li class="current">柚子</li>
        <li>柠檬</li>
    </ul>
</div>

CSS样式：

CSS.menu-box { width: 100%;  height:30px;  overflow: hidden;  overflow-x: auto;  }
.menu-box ul {  white-space: nowrap;  overflow-x: visible; }
.menu-box ul li { display: inline-block; padding: 10px 20px; }
.menu-box ul li.current { color: red; }

Javascript代码：

JSvar id = '.menu-box';
var parent = $(id);
var item = $(id).find('li.current');
var start = $(id).find('li:first-child').position().left; //获取容器位置

parent.scrollLeft(item.position().left - start);

菜单导航自动滚动到指定位置代码量少，也没有几行，功能简单易懂。可样式要实现左右滚动，需要定义height，同时还要用div包裹ul元素，才能实现。滚动时，如果容器位置left不是0，需要提前获取left位置，进行相差操作。