uni-app scroll-view在pc微信浏览器的滚动条会自动隐藏，已经设置了组件的属性和深层的css，还是这样

uni-app scroll-view在pc微信浏览器的滚动条会自动隐藏，已经设置了组件的属性和深层的css，还是这样

开发环境 版本号 项目创建方式
Windows win11 HBuilderX

产品分类：uniapp/H5

浏览器平台：微信内置浏览器

浏览器版本：4.0.6

操作步骤：

  1. 自动检测微信浏览器

我们使用 isWechatBrowser() 函数来检测当前环境是否为微信浏览器：

import { isWechatBrowser } from './wechatBrowserUtils'  

const isWechat = isWechatBrowser()

2. 强制显示滚动条

CSS 样式强制

/* 微信浏览器滚动条强制显示 */
body.wechat-browser .table-scroll-container {  
  overflow: scroll !important;  
  -webkit-overflow-scrolling: touch !important;  
}  

body.wechat-browser .table-scroll-container::-webkit-scrollbar {  
  display: block !important;  
  width: 12px !important;  
  height: 16px !important;  
  visibility: visible !important;  
  opacity: 1 !important;  
}

JavaScript 动态处理

// 添加滚动事件监听，确保滚动条始终可见  
tableContainer.addEventListener('scroll', function (this: HTMLElement) {  
  // 强制重绘滚动条  
  this.style.overflow = 'hidden'  
  setTimeout(() => {  
    this.style.overflow = 'scroll'  
  }, 10)  
})

3. 自定义滚动条优化

/* 微信浏览器自定义滚动条样式 */
body.wechat-browser .custom-scrollbar-container {  
  height: v-bind('(props.customScrollbarHeight + 2) + "px"');  
}  

body.wechat-browser .custom-scrollbar-thumb {  
  top: 1px;  
  height: calc(100% - 2px);  
}

更多关于uni-app scroll-view在pc微信浏览器的滚动条会自动隐藏，已经设置了组件的属性和深层的css，还是这样的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

先保证普通 index.html 能始终展示滚动条，排除宿主环境的特定规则

更多关于uni-app scroll-view在pc微信浏览器的滚动条会自动隐藏，已经设置了组件的属性和深层的css，还是这样的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在PC微信浏览器中，scroll-view的滚动条自动隐藏是微信浏览器自身的特性导致的。虽然你尝试了CSS强制显示和JavaScript动态处理，但可能忽略了几个关键点：

  1. PC微信浏览器基于Chromium内核，但做了特殊定制，对::-webkit-scrollbar的支持不完全

  2. 建议在scroll-view组件上直接设置属性：

<scroll-view 
  scroll-y 
  show-scrollbar 
  :scroll-with-animation="false"
  class="scroll-container"
>
  1. CSS优化方案：
.scroll-container {
  overflow: auto !important;
}
.scroll-container::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 8px;
}
.scroll-container::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,.3);
  border-radius: 4px;
}
回到顶部