H5隐藏滚动条

￡神魔★判官ぃ 2022-10-07 11:46 327阅读 0赞

移动M端开发时，会遇到ios滚动条没办法隐藏，我们不要把滚动容器放入box内，box高度 (hidden)= 滚动容器高度 (scroll)- 滚动条高度(scrollbar) ,超出box高度隐藏，这样就能到达隐藏滚动条的效果啦

css:

.column-detail-wrap{
        .vanTabStyle{
          padding-top: 20px;
        }
        .overScrollHiden{
          height:25px;
          margin-top: 20px;
          overflow:hidden;
          .categoriesTabs{
            overflow-x: scroll;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            height: 60px;
            width: 100vw;
            .categoriesTab{
              height: 25px;
              background: #F6F7F8;
              border-radius: 2px;
              font-size: 13px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #2B303C;
              @include flexCenter;
              padding: 0 10px;
              margin-right: 10px;
            }
            .categoriesTab:first-child{
              margin-left:20px;
            }
            .categoriesTab:last-child{
              margin-right:20px;
            }
            .active{
              background:#000;
              color:#fff;
            }
          }
        }
        
      }

html

注意：

overScrollHiden 样式不能 display:flex 不然隐藏滚动条无效