雲栖号資訊：【 點選檢視更多行業資訊】
在這裡您可以找到不同行業的第一手的上雲資訊，還在等什麼，快來！
實作手淘金剛區類目清單的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
原文釋出時間：2020-04-03
本文作者：E.wall
本文來自：“
掘金”，了解相關資訊可以關注“
”