小程序 隐藏滚动条

已于 2022-01-19 09:09:04 修改
阅读量319 收藏
点赞数
分类专栏： javascript 微信小程序 文章标签： 小程序 css3 css
于 2022-01-18 14:09:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43921510/article/details/122558957
版权
本文介绍如何在小程序中隐藏滚动条，并提供了解决input placeholder错位问题的方法，通过直接修改input的样式，如添加placeholder-class或style，可以有效地调整placeholder的位置和颜色。
摘要由CSDN通过智能技术生成 
.contentout{
   
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: auto;
}

/* pages/main/quality/RectificationNotice/edit.wxss */
.body{
   
  height: 100%;
  width
最低0.47元/天 解锁文章
痛苦的键盘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
微信小程序scroll-view隐藏滚动条的方法详解
11-20
效果图： 1.scroll-view 中的需要滑动的元素不可以用 float 浮动使其一行展示； 2.包裹scroll-view的元素如果用 display:flex; 是没有滚动效果的； 3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排； 4.包裹 scroll-view 的元素要加上样式–> overflow:hidden;white-space:nowrap; 5.有时候为了美观要隐藏滚动条，需要在样式里加上 核心代码： 在wxss里加入以下代码 ::-webkit-scrollbar{ width: 0; he
微信小程序隐藏滚动条的方法
热门推荐
烟溪彭于晏的博客
07-27 1万+
当小程序页面展示内容超过屏幕高度或宽度，我们想要看到全部内容，这时候就必须用到页面滚动。可是，我们发现滚动页面的滚动条特别的突兀和丑陋，而且参考大部分的小程序都是将滚动条去掉了。如果仍然无效，减少height的值，例如设为height99vh。scroll-view高度大于page高度仍会出现滚动条的。scroll-view高度不要设置为相对高度，如100%。否则，page页面的滚动条又会出现了！当展示内容超过页面高度，会触发page默认的滚动条。scroll-view，隐藏滚动条的方法也很简单。...
uniapp，解决h5、app、微信小程序端滚动条无法隐藏问题
最新发布
m0_71513265的博客
07-02 790
1.默认情况下内容超出屏幕的高度会产生滚动条，如下图所示。2.在pages.json文件中加入，以下代码发现无法解决，滚动条依然存在。
uniapp局部的下拉刷新以及组件出现的问题
weixin_43167546的博客
09-28 5299
局部的下拉刷新 文章目录局部的下拉刷新一.scroll-view实例二.属性说明:三.出现的问题 一.scroll-view实例 可滚动视图区域, 用于区域滚动. 区域滚动的性能不及页面滚动 <scroll-view class="scroll" scroll-y="true" :refresher-enabled='refresherEnabled' @refresherpulling="onPulling"
微信小程序隐藏scroll-view滚动条只需要添加show-scrollbar=“{{false}}“ enhanced=“{{true}}“即可，亲测有效！
番茄Salad
10-18 2888
微信小程序只需要在scroll-view上面添加show-scrollbar=“{{false}}” enhanced="{{true}}"即可解决。UniApp则修改成:show-scrollbar=“false” enhanced=“true”微信小程序的scroll-view在ios上没有显示滚动条，但是如果在安卓设备上会显示一个滚动条。
uniapp、微信小程序隐藏页面滚动条
qq_62787048的博客
05-25 511
微信小程序设置滚动条过程详解
10-16
在`app.wxss`全局样式文件中，可能有如下的CSS规则，用于隐藏滚动条： ```css ::-webkit-scrollbar { width: 0px; height: 0px; color: #transparent; } ``` 这段代码设置了滚动条的宽度和高度为0，并将其颜色...
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
10-17
主要介绍了详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
微信小程序 scroll-view隐藏滚动条详解
01-03
一：scroll-view隐藏滚动条 在书写网页的时候，往往会为了页面的美观，而选择去掉滚动区域默认的滚动条，而在这里，就是为小程序去掉滚动条的其中的一种方法： scroll-view.wxml: scroll-view.wxss scroll-view.js...
小程序滚动条隐藏
solocao的专栏
04-04 819
其实大家的写法估计都是如下： ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } 我在安卓手机上测试过，目前没有问题。
微信小程序scroll-view隐藏滚动条的2种小技巧
weixin_43877368的博客
03-26 2116
1、需要隐藏滚动条的视图容器(官方文档都有)
滚动条详解：跨平台iOS、Android、小程序滚动条隐藏及自定义样式综合指南
JINGWHALE
04-21 2254
随着用户界面体验提升的要求，滚动条自定义样式以及滚动条隐藏精致化的需求日渐增加，本文详细介绍了小程序、iOS、Android平台滚动条的隐藏方法，以及滚动条一般自定义样式的方法。在保持界面整洁、避免内容溢出的同时，确保用户能够访问所有信息，提升浏览体验。
小程序隐藏滚动条
Quan的博客
11-16 1014
页面代码  &lt;scroll-view scroll-x class="my_scroll"&gt; &lt;view class='my_scroll_box' wx:for="{{newmenu}}" wx:for-item="i" wx:key="{{i.id}}" data-id="{{i.id}}" catchtap='formbtn'&gt;
uniapp 微信小程序 隐藏滚动条
weixin_59685936的博客
07-07 770
uniapp 微信小程序 隐藏滚动条
微信小程序隐藏scroll-view滚动条
Not_affect的博客
08-12 1295
隐藏scroll-view滚动条样式。
让微信小程序页面隐藏滚动条
Julie_Go的专栏
06-04 4063
需求是隐藏页面的纵向滚动条 小程序提供了视图容器scroll-view ，可滚动视图区域。
微信小程序隐藏滚动条的方法，以及禁止上下滑动的方法
inticaler的博客
03-22 4251
::-webkit-scrollbar { display: none; width: 0; height: 0; color: transparent; } ::-ms-scrollbar { display: none; width: 0; height: 0; color: transparent; } ::-moz-scrollbar { display: none; width: 0; height: 0; .
微信小程序-如何隐藏滚动条？【亲测有效】
**My Coding Family**
04-30 6063
微信小程序-scroll-view如何隐藏滚动条？亲测有效。
小程序去掉滚动条
起小点
07-17 679
1.方案一 ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } 2.方案二 ::-webkit-scrollbar { display: none; } 其实实现原理就是把滚动条宽度变小或者让滚动条隐藏。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

痛苦的键盘

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

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

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

打赏作者

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

抵扣说明：

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

余额充值