移动端去除滚动条兼容IOS

·  阅读 1373

问题

已经设置: .selector::-webkit-scrollbar { display: none }

在浏览器上面横向滚动条已经消除,安卓上面也消失了,但是ios上面仍然有

解决思路

给父元素设置固定高度,并且设置溢出隐藏,给子元素设置大于父元素的高度,把滚动条挤出父元素的范围,
从而达到隐藏滚动条的目的。因此,子元素的滚动条就被剪裁掉了。
复制代码

处理前

image.png

处理后

image.png

样式

.list-floor {
      // margin: 15px 0;
      padding: 32px 0px 32px 47px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      background-color: #ffffff;
      overflow: hidden;
      height: 110px;//父元素高度
      .right-area {
        flex: 1;
        display: flex;
        align-items: center;
        overflow-x: auto;
        overflow-y: hidden;
        height: 200px;//子元素高度
        // &::-webkit-scrollbar {//此写法ios不生效
        // display: none;
        // }
      }
    }
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改