在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>

参考资料

• 无

感谢阅读，欢迎评论^-^

打赏我吧^-^