在swiper頁面實現指定區域內容橫向滾動的方案

最新更新時間：2020年05月27日16:31:43

《猛戳-查看我的博客地圖-總有你意想不到的驚喜》

本文內容：頁面部分內容橫向滾動

固定寬高區域中圖片橫向滾動

需要面臨的幾個問題：

• 可滾動區域的內容，滾動的時候swiper頁面禁止左右滑動，dom元素需要添加swiper-no-swiping類名
• 隱藏橫向滾動條，需要增加一箇中間層的dom元素

<style>
.scrollBox{
  display: inline-block;
  width: 200px;/* 寬度固定 */
  height: 30px;
  /* 子元素高度越界隱藏 隱藏橫向滾動條 */
  overflow: hidden;
  .scrollContent{
    height: 100%;
    overflow-y: hidden;
    overflow-x: scroll;
    /* 解決ios上滑動不流暢 ios會出現橫向滾動條 */
    -webkit-overflow-scrolling: touch;
    /* 圖片橫向排列不換行解決ios上滑動不流暢 */
    white-space: nowrap;
    /* 隱藏橫向滾動條 */
    padding-bottom: 20px;
    img{
      display: inline-block;
    }
  }

}

/* 隱藏滾動條 不生效 */
.scrollBox::-webkit-scrollbar {
  display: none;
}
}</style>

<div className={`${styles.scrollBox} swiper-no-swiping`}>
  {
    imageArr.map((item, index) => {
      return <img key={index} src={item.url} />
    })
  }
</div>

參考資料

• 無

感謝閱讀，歡迎評論^-^

打賞我吧^-^