首页/ 填坑/ 文章详情

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位置,进行相差操作。

文章评论0 records

最新 最早

0

最新评论Latest comments

唐牛才是食神唐牛才是食神 06-15 10:51
(*°▽°*)八(*°▽°*)♪,解决了
唐牛才是食神唐牛才是食神 06-15 10:49
发现不得了的东西,今晚回去好好研究下...
胖螺胖螺 02-04 00:58
( ゜- ゜)つロ 在写了在写了。看到也有些感慨。因为站长前年在我原博客的留言,让我毅然选择去深造,选择读研,曾经我想过挺多东西的,还是自己本专业的适合我自己。在这先表达感谢。新年快乐!
强哥强哥 2021-12-08 15:49
怎么看文章作者是谁呀?
big2catbig2cat 2021-08-27 16:11
然而没什么用,smartpss不兼容老录像机,就算能看回放,很多时间点在回放里也看不到