H5实现横向滚动的方法总结

小程序中有横向滚动的swiper,H5中目前得手动实现。

实现方法如下:

外层需要设置:

 overflow: scroll;white-space: nowrap;

内层需要设置:
display: inline-block; 
 <div class="noticeListBox">
       <div class="noticeList" v-for="(item,index) in 10">
              
       </div>
</div>

.noticeListBox {
    width: 100%;
    box-sizing: border-box;
    overflow: scroll;
    white-space: nowrap;
}

.noticeListBox::-webkit-scrollbar {
    display: none;
}

.noticeList{
  display: inline-block;      
}

posted @ 2019-09-28 14:54  茶记忆  阅读(8887)  评论(0编辑  收藏  举报