微信小程序在组件中去除scrool-view滑动条

最新推荐文章于 2023-08-02 22:01:25 发布

无赖君

最新推荐文章于 2023-08-02 22:01:25 发布

阅读量569

点赞数

CC 4.0 BY-SA版权

文章标签：微信小程序

本文链接：https://blog.youkuaiyun.com/qq_40182011/article/details/92066579

本文介绍了一种在微信小程序中隐藏滚动条的方法，通过使子元素可滚动且略宽于视窗，父元素限制横向滚动，从而巧妙地隐藏了滚动条。此技巧适用于需要美观界面但又不想显示滚动条的场景。

如果搜索去除scrool-view滑动条大部分答案是

::-webkit-scrollbar{

  width: 0;

  height: 0;

  color: transparent;

}

然而微信的组件无法使用选择器。导致忽略整个样式文件。

实现方法在官方给了一条野路子：https://developers.weixin.qq.com/community/develop/doc/00006473cf08f8c29da606b2d56c00

即：尝试子元素可滚动，宽度比视窗宽度略宽，右边有 padding。然后父元素限制横向滚动，宽度为视窗宽度，overflow hidden。就是说你最外层的<view>宽度比手机窗口宽度要大一点（加个padding-left），多出来的这一点宽度用来放滚动条，所以就起到了隐藏的作用，再设置一个不可左右滑动就可以了。

大概就是这样：