移动web--滚动（可以滑动的）导航栏的制作

最新推荐文章于 2024-08-28 10:01:27 发布

前端薛之谦...

最新推荐文章于 2024-08-28 10:01:27 发布

阅读量1.1w

点赞数 12

分类专栏：移动web 文章标签： iScroll 控制导航栏的滚动移动web

本文链接：https://blog.csdn.net/weixin_41105030/article/details/85874060

版权

本文介绍了如何在移动Web上创建可滑动的导航栏，包括使用iScroll插件和原生JS的方法。通过示例代码和效果展示，详细解释了适配方案、HTML结构、CSS样式以及JS初始化和调用过程。

摘要由CSDN通过智能技术生成

滑动的导航栏

有时候导航栏的长度过于长，我们为了界面的美观和用户体验，会将导航栏在一行（或则一列）显示，超出部分隐藏，而且不用管内容的长短，有利于前后台数据的交互，大部分情况是：在移动web网站中，容器中的ul过长，我们通常会将ul超出容器的部分隐藏
移动网站上的横向导航栏

某直播平台的横向滚动导航栏–效果浏览：https://m.douyu.com/
某新闻平台的横向滚动导航栏–效果浏览：https://m.toutiao.com/?W2atIF=1
电商网站：https://pro.m.jd.com/mall/active/3YvKJrc4e4WK7aZ46j3h5UMCvEn4/index.html

移动网站上的纵向滚动导航栏

某电商平台
https://pro.m.jd.com/mall/active/ZQXsW6o4iFPgHhPMjr9LVjVoFai/index.html

控制导航栏滚动的重要性
电商，问答，直播，新闻…大部分平台都会使用到移动导航栏，特别是在移动web，典型的应用场景位于移动设备App和web，如何控制导航栏的滚动

iScroll

iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件

文档教程
http://caibaojian.com/iscroll-5/
下载地址
https://github.com/cubiq/iscroll
简单的使用（这里以横向导航栏滚动为例子），具体效果可以看上面推荐的网站
1. 我们尽可能保持DOM结构的简洁
2. IScroll是一个类，每个需要使用滚动功能的区域均要进行初始化
3. 查看文档的基本功能可知，默认情况下只有纵向滚动条可以使用。如果你需要使用横向滚动条，需要将scrollX 属性值设置为 true
4. 当然，isScroll有更强大的作用，我们使用它是为了解决我们的需求和提高我们的开发效率

HTML

<div id="wrapper">
    <ul>
    	<li class=""><a href="javascript:;">热门推荐</a></li>
    	<li class="active"><a href="javascript:;">潮流女装</a></li>
    	<li class=""><a href="javascript:;">品牌男装</a></li>
    	<li class=""><a href="javascript:;">内衣配饰</a></li>
    	<li class=""><a href="javascript:;">家用电器</a></li>
    	<li class=""><a href