css实现隐藏横向滚动条,兼容微信、ios

最新推荐文章于 2024-07-06 14:50:03 发布

Boom9494

最新推荐文章于 2024-07-06 14:50:03 发布

阅读量205

点赞数 3

文章标签： css 前端

本文链接：https://blog.csdn.net/Boom9494/article/details/138714511

版权

如何实现横向滚动(兼容safari，微信，浏览器)

<div class="scroll-hidden">
        <div class="scroll-body">
          <div class="scroll-secbody">
            <van-image
              v-for="(item, index) in detail.imgList"
              :key="index"
              class="mr-10 every_content"
              width="100px"
              height="100px"
              fit="cover"
              position="left"
              :src="item.imgUrl"
            >
            <div class="img-title flex align-items-center justify-content-center">{{item.imgName}}</div>
          </van-image>
          </div>
        </div>
      </div>```
  

.scroll-hidden{
  height:100px;
  overflow:hidden;
  .scroll-body{
      overflow-y: hidden;
      overflow-x: auto;
      &::-webkit-scrollbar {
          display: none;
      }
      padding-bottom: 20px;
      .scroll-secbody{
          white-space: nowrap;
          display: flex;   
          .every_content{
              flex-shrink: 0;
              height:150px;
              margin-right: 25px;
              margin-bottom: 10px;
              text-align: center;
          }
          .img-title {
            position: absolute;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.4);
            height: 20px;
            color: #fff;
            width: 100%;
          }
      }
  }
}