小程序去掉默认滚动条

最新推荐文章于 2024-05-25 15:26:52 发布
最新推荐文章于 2024-05-25 15:26:52 发布
阅读量1.1k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 微信小程序 文章标签： 小程序 滚动条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37896578/article/details/88874306

在这里插入图片描述

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;

Tips：【小程序云开发】中高级前端面试题库（源码：小程序中联系我哟）。
---------- 创作不易，感谢大家，请多多支持！
在这里插入图片描述

微信小程序 - 完美去除 ＜scroll-view＞ 滚动条，保证 100% 去掉隐藏苹果 ios 系统、安卓滚动条（解决 ios 苹果真机scroll-view无法隐藏滚动条）详细示例代码，保证可用
资深程序员
05-28 6618
微信小程序scroll-view滚动条，微信小程序去除隐藏去掉scroll-view滚动条，微信小程序scroll-view苹果ios系统手机去除滚动条，微信小程序scroll-view如何去掉滚动条，微信小程序scroll-view隐藏滚动条，微信小程序scroll-view无法去掉ios苹果系统的滚动条，微信小程序隐藏scroll-view滚动条在苹果ios系统不生效，微信小程序scroll-view在苹果ios系统下有滚动条怎么去除隐藏，微信小程序scroll-view去掉ios苹果系统滚动条，微
微信小程序 - 详细实现 scroll-view 滚动视图区域强力隐藏去除滚动条，兼容“安卓/苹果“手机系统真机完美去掉横向和纵向滚动条效果，解决苹果ios真机无法隐藏去掉滚动条问题，隐藏横纵滚动条！
资深程序员
08-18 1万+
微信小程序，vue2，vue3，可滚动视图区域组件，scroll-view，滚动条，去除，隐藏，横向滚动条，纵向滚动条，安卓手机，苹果ios手机，无法去除隐藏滚动条，苹果安卓滚动条隐藏，ios苹果无法隐藏，没效果无效，真机出现滚动条如何隐藏，在安卓机上出现横向滚动条的解决办法，滚动视图隐藏横向滚动条，有滚动条怎么办，就是隐藏不掉，微信小程序去除隐藏去掉scroll-view滚动条，苹果ios系统手机去除，如何去掉滚动条，无法去掉ios苹果系统的滚动条，最好用的方法，依旧不行，苹果ios系统不生效，css去除
微信小程序-去除页面滚动条
jack00809的博客
03-07 6753
实现代码是 /* ::-webkit-scrollbar { width: 0; height: 0; color: transparent; display: none; } */ 但是今天使用的时候突然不能生效了，之前是可以的。 研究了一下，发现没有给父级元素设置属性。 .store-page { //父元素 width: 100vw; height: 100vh; overflow-x: ...
微信小程序去除默认滚动条展示
天马3798
10-05 2744
微信小程序去除默认滚动条展示，设置成全局样式，展示即可。
微信小程序之----去掉小程序的滚动条
一颗程序猿
11-21 3453
代码 .v1::-webkit-scrollbar { width: 0; height: 0; color: transparent; } 效果对比
微信小程序 之 去掉滚动条样式
New个对象喝咖啡
07-26 523
想要实现的效果：保留滚动效果，但是要去掉滚动条。
微信小程序 scroll-view隐藏滚动条详解
01-03
在书写网页的时候，往往会为了页面的美观，而选择去掉滚动区域默认的滚动条，而在这里，就是为小程序去掉滚动条的其中的一种方法： scroll-view.wxml: scroll-view.wxss scroll-view.js  最终显示效果如下; ...
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
10-17
总之，微信小程序scroll-view组件的横向滚动实践踩坑及其滚动条的隐藏，需要开发者在实践中不断尝试和总结经验。通过上述方法的实践应用，可以有效地解决开发过程中遇到的问题。对于小程序的样式调整和功能实现，...
小程序、h5移动端隐藏滚动条代码
闫瑞锋的博客
12-24 789
【代码】小程序、h5移动端隐藏滚动条代码。
微信小程序去除滚动条 (安卓、ios都有效)
weixin_45389051的博客
02-22 1107
【代码】微信小程序去除滚动条 (安卓、ios都有效)
微信小程序scroll-view去掉滚动条
开发路上的AZhe
07-23 377
只需在app.wxss或者本页的wxss里面加一句： /* 隐藏滚动条 */ ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } 加这个就可以了，但这代表什么意思呢？ ::-webkit-scrollbar：代表滚动条整体部分 参考文档：https://blog.youkuaiyun.com/qq_32067045/a...
微信小程序---scroll-view 设置scroll-x或者scroll-y如何去掉滚动条
heavenz19的博客
05-09 3046
第二种方法：添加（ enhanced :show-scrollbar=“false”）
小程序页面去除滚动条
Heartnottowake的博客
06-28 419
如果发现不能生效，那就给父元素加个高度。
轻松在uni-app中去掉编译后微信小程序的滚动条-告别无用属性&最终解决方案
m0_52952413的博客
02-02 3446
首先如果你使用的是页面级滚动，即使uni-app中的pages.json中有相关配置，在编译到小程序中也是没有效果的，因为小程序原生不支持，如下：那么在uni-app页面滚动是不是scroll-view，答案是的，但是我们没办法在顶层设置，因为官方没有暴露相关api，那么要想去掉滚动条，我们就只能在自己的页面使用scroll-view视图组件，取代全局的滚动视图。下面上简易代码效果图：如果你的组件不是占满全屏，比如有头部导航。
小程序去掉滑动滚动条
lithlong的博客
05-19 674
小程序去掉滑动滚动条 //去除滚动条 ::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
小程序隐藏滚动条
xxx_datou的博客
09-02 203
直接在全局样式或者App.vue添加下列代码 //隐藏滚动条 ::-webkit-scrollbar { width: 0; height: 0; color: transparent; display: none; }
微信小程序隐藏滚动条的方法
热门推荐
烟溪彭于晏的博客
07-27 1万+
当小程序页面展示内容超过屏幕高度或宽度，我们想要看到全部内容，这时候就必须用到页面滚动。可是，我们发现滚动页面的滚动条特别的突兀和丑陋，而且参考大部分的小程序都是将滚动条去掉了。如果仍然无效，减少height的值，例如设为height99vh。scroll-view高度大于page高度仍会出现滚动条的。scroll-view高度不要设置为相对高度，如100%。否则，page页面的滚动条又会出现了！当展示内容超过页面高度，会触发page默认的滚动条。scroll-view，隐藏滚动条的方法也很简单。...
微信小程序隐藏右侧滚动条
qq_38822390的博客
12-12 2567
微信小程序隐藏右侧滚动条 当页面元素列表过多的时候，右侧会默认出现一个很难看的滚动条，这个时候就需要写代码将这个滚动条隐藏起来了。 其实方法很简单;只需要在wxss里面添加这样的一段代码即可 ::-webkit-scrollbar{ width: 0; height: 0; color: transparent; } 原文作者：祈澈姑娘；技术博客：https://www.ji...
uniapp、微信小程序隐藏页面滚动条
qq_62787048的博客
05-25 969
scroll-view横向滚动 去掉滚动条
最新发布
07-05
在微信小程序中使用 `scroll-view` 组件实现横向滚动并隐藏滚动条，可以通过以下方式来完成： ### 横向滚动的实现 为了启用 `scroll-view` 的横向滚动功能，需要将组件的 `scroll-x` 属性设置为 `true`。同时，为了让内容能够正确地横向排列，需确保内部元素使用 `inline-block` 布局，并且容器本身没有固定宽度限制。 #### WXML 配置 ```xml <scroll-view class="scroll-view_H" scroll-x="{{true}}" style="white-space: nowrap;"> <view class="scroll-view-item_H" wx:for="{{items}}" wx:key="id"> <!-- 每个横向滚动项的内容 --> </view> </scroll-view> ``` #### WXSS 样式 ```css .scroll-view_H { white-space: nowrap; } .scroll-view-item_H { display: inline-block; width: 100%; /* 可根据实际需求调整 */ height: 300rpx; /* 设置合适的高度 */ } ``` 通过上述配置，可以实现一个基本的横向滚动布局。 --- ### 隐藏滚动条的方法 尽管 `scroll-view` 提供了滚动功能，但在 Android 设备上可能会显示默认的滚动条，这在某些设计场景下可能并不美观。可以通过自定义样式来隐藏滚动条，具体方法如下： #### 使用伪元素 `::-webkit-scrollbar` 由于微信小程序基于 WebKit 内核，因此可以使用 WebKit 特有的伪元素 `::-webkit-scrollbar` 来控制滚动条的外观。以下是隐藏滚动条的 CSS 代码示例： ```css /* 隐藏横向滚动条 */ ::-webkit-scrollbar { width: 0; height: 0; color: transparent; display: none; } ``` 这段代码会将滚动条的宽度和高度都设置为 0，并将其颜色设置为透明，最终达到隐藏滚动条的效果。 --- ### 兼容性与注意事项 - **仅适用于 WebKit 浏览器**：由于 `::-webkit-scrollbar` 是 WebKit 浏览器特有的伪元素，因此只在支持 WebKit 内核的设备（如大部分 Android 手机）上有效。 - **iOS 设备默认无滚动条**：在 iOS 设备上，系统通常不会显示滚动条，因此无需额外处理。 - **避免影响其他组件**：如果希望仅对特定的 `scroll-view` 组件隐藏滚动条，可以在该组件上添加自定义类名，并针对该类名编写样式规则。 #### 示例：针对特定组件隐藏滚动条 ```xml <scroll-view class="custom-scroll" scroll-x="{{true}}"> <!-- 滚动内容 --> </scroll-view> ``` ```css .custom-scroll::-webkit-scrollbar { width: 0; height: 0; color: transparent; display: none; } ``` 这样可以确保只有带有 `custom-scroll` 类的 `scroll-view` 组件会隐藏滚动条，而不会影响其他组件。 --- ### 总结 通过设置 `scroll-x` 属性为 `true` 并结合 `inline-block` 布局，可以轻松实现 `scroll-view` 的横向滚动功能。为了隐藏滚动条，可以使用 `::-webkit-scrollbar` 伪元素来移除默认的滚动条样式，从而提升用户体验。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卜卦丶cc

你的鼓励是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值