惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

T
The Blog of Author Tim Ferriss
WordPress大学
WordPress大学
博客园 - Franky
The Cloudflare Blog
T
Tailwind CSS Blog
宝玉的分享
宝玉的分享
小众软件
小众软件
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Apple Machine Learning Research
Apple Machine Learning Research
月光博客
月光博客
B
Blog
Y
Y Combinator Blog
V
V2EX
有赞技术团队
有赞技术团队
M
MIT News - Artificial intelligence
博客园 - 司徒正美
IT之家
IT之家
G
Google Developers Blog
C
Check Point Blog
Engineering at Meta
Engineering at Meta
Microsoft Security Blog
Microsoft Security Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
GbyAI
GbyAI
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻

博客园 - KidYang

微信、支付宝个人收款码不能用于经营收款 - z 微信平台开发 微信小程序图表控件 微信小程序网络排查指引 小程序字体转换 - 转 小程序播放语音之wx.createInnerAudioContext() - 转 微信小程序scroll-view左右横向滑动 用vscode开发微信小程序,建议安装的插件 微信小程序wxs格式化日期 在 ios 端显示NaN问题及日期格式化工具 小程序涉及npm、vue的一些基础资料 visual studio 关于 Updates were rejected because the remote contains work that you do 小程序使用字体相关 大量Timer_MinBytesPerSecond,Timer_ConnectionIdle错误 - 转 微信小程序隐藏时动画效果 - 转载 System.Security.Cryptography.RSA.FromXmlString 系统找不到指定的文件和X509读取证书文件系统找不到指定的文件异常 - 转载 sqlserver 发送http请求 chrome浏览器直接打印 - z 解决webapi首次启动速度慢的问题 - z 使用第三方库(Senparc)完成小程序支付 - z
小程序隐藏scroll-view滚动条的实现 - 转
KidYang · 2020-05-12 · via 博客园 - KidYang

以下两种方法都可以

/*隐藏滚动条*/

::-webkit-scrollbar{

  width: 0;
  
  height: 0;
  
  color: transparent;

}
/*隐藏滚动条*/

::-webkit-scrollbar{

  display: none;

}

如果不行,还有以下方法:

传送门

实现思路就是,在scroll-view外边再包一个容器,它的高度小于scroll-view的高度,这样就会截掉滚动条,达到隐藏了滚动条的效果。

// scss
.scroll-view-container { // 包裹scroll-view的容器
  height: $fakeScrollHeight;
  overflow: hidden; // 这个设置了就能截掉滚动条啦
  scroll-view {
   width: 100%;
   white-space: nowrap;
  }
 }

 .tab-container { // 我这里是用.tab-container来撑开scroll-view的高度,所以高度在它上面设置,加上padding,那么它就会比外层容器(.scroll-view-container)要高
  display: inline-block;
  width: 26%;
  height: $fakeScrollHeight;
  padding-bottom: $scrollBarHeight;
 }