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

推荐订阅源

I
InfoQ
S
SegmentFault 最新的问题
N
Netflix TechBlog - Medium
B
Blog
Jina AI
Jina AI
人人都是产品经理
人人都是产品经理
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
H
Hackread – Cybersecurity News, Data Breaches, AI and More
博客园 - 聂微东
Last Week in AI
Last Week in AI
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
V
V2EX
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
大猫的无限游戏
大猫的无限游戏
U
Unit 42
J
Java Code Geeks
IT之家
IT之家
aimingoo的专栏
aimingoo的专栏
博客园 - 叶小钗
T
The Blog of Author Tim Ferriss
博客园 - 【当耐特】
Hugging Face - Blog
Hugging Face - Blog
WordPress大学
WordPress大学
腾讯CDC

博客园 - 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;
 }