uni-app设置show-scrollbar=false，在iOS上无法隐藏滚动条

uni-app设置show-scrollbar=false，在iOS上无法隐藏滚动条

代码如下：

<scroll-view class="top-tab" :style="swiperTop" :scroll-left="scrollLeft" scroll-with-animation="true" scroll-x="true"  show-scrollbar="false">  
    <block v-for="(item,index) in tabList" :key="index">  
        <view class="tab-item" v-bind:id="'tabNum'+index" @click="swichTab(index)">  
            <view :class="[curTab == index ? 'item-on' : 'item']">  
                <view class="item-txt">{{item.name}}</view>  
                <view class="cur-line"></view>  
            </view>  
        </view>  
    </block>  
    <view class="tab-item tab-item-more" @click="gotoCategory()">  
        更多  
    </view>  
</scroll-view>
开发环境 版本号 项目创建方式

更多关于uni-app设置show-scrollbar=false，在iOS上无法隐藏滚动条的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

nvue 支持这个属性,vue 不支持

更多关于uni-app设置show-scrollbar=false，在iOS上无法隐藏滚动条的实战教程也可以访问 https://www.itying.com/category-93-b0.html


scroll-view 在android 上无法显示滚动条怎么回事呢

那在Vue页面如何取消滚动条呢

回复 6***@qq.com: 解决了吗?

在元素下样式控制:
:-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; -webkit-appearance: none; background: transparent; }

在iOS平台上，show-scrollbar="false"确实可能无法完全隐藏滚动条，这是WebKit内核的默认行为。针对这个问题，可以尝试以下解决方案：

  1. 使用CSS强制隐藏滚动条：
.top-tab::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}
  1. 或者直接在scroll-view的style中添加内联样式：
<scroll-view style="-webkit-overflow-scrolling: touch; overflow: -moz-scrollbars-none; -ms-overflow-style: none; overflow-x: scroll; scrollbar-width: none;">
  1. 如果仍然无效，可以尝试在App.vue中全局设置：
::-webkit-scrollbar {
  display: none;
}
回到顶部