云栖号资讯：【点击查看更多行业资讯】
在这里您可以找到不同行业的第一手的上云资讯，还在等什么，快来！
实现手淘金刚区类目列表的scroll滑动效果，我也不知道这种css效果的专业术语是什么，就先这么叫吧。。。
1、前言
- 在h5开发的过程中，轮播图下面放个类目的list（产品术语叫金刚区）是电商产品中很常见的布局，以前都是一行或两行排完，但是随着类目越来越多，出现了这么几种设计：
(1). 最后一个类目为查看更多，点击跳转去一个新的页面；
(2). 用swiper包裹，将多个类目当轮播图展示；
(3). 类目scroll可滑动展示。最后一种展现设计方式出现的最晚，也是现在较为主流的展现方式，所以今天我们来实现下。
- 实现的方式：借助better-scroll库
- 实现的难点就是一个：对滚动条的处理
- 先看看手淘的效果：
2、BetterScroll
（1）介绍
- better-scroll库是一个很优秀的库，在作者2.0的版本中，我们实现一个基本的滚动只需引入它的核心滚动，体积也很小。更多可以去官网看看。
（2）安装
3、实现
（1）实现效果其实很简单，利用better-scroll暴露出的两个特性、translateX、Math对象
- maxScrollX：最大横向滚动位置，也就是整个宽度的大小，offsetLeft的感觉。
- scroll：监听scroll的方法，告诉你滚到哪里了。
- translateX：定义X轴的值，这里我们用百分比。
- Math.abs：将负数转为正数
（2）用better-scroll提供的方法计算出目前列表滚动位置占整个宽度的百分比比，然后赋予translateX，就可以实现两者实时的同步滚动了。代码：
4、小结
最后看看我们的实现效果（大致框架就是如此，效果*发挥吧）：
- 我们panda-mall首页中也使用了这个常见的布局方式-->首页分类icon滑动
【云栖号在线课堂】每天都有产品技术专家分享！
课程地址：https://yqh.aliyun.com/zhibo立即加入社群，与专家面对面，及时了解课程最新动态！
【云栖号在线课堂 社群】https://c.tb.cn/F3.Z8gvnK