CSS隐藏滚动条样式，经测试ios+安卓均有效果

最新推荐文章于 2024-05-11 14:26:19 发布

坚持努力才最重要

最新推荐文章于 2024-05-11 14:26:19 发布

阅读量317

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_44996006/article/details/131980885

版权

本文介绍了使用CSS的::-webkit-scrollbar伪元素来隐藏滚动条的方法，该方法在iOS和安卓设备上都有效。通过设置`display:none`，`scrollbar-width:none`以及`-ms-overflow-style:none`，可以实现滚动条在各种浏览器中的不可见效果。

摘要由CSDN通过智能技术生成

CSS隐藏滚动条样式，经测试ios+安卓均有效果

   ::-webkit-scrollbar {
      display: none;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

坚持努力才最重要

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

uniapp [全端兼容] - 详细实现scroll-view滚动视图区域强力隐藏去除滚动条，兼容“安卓/苹果“手机系统真机完美去掉横向和纵向滚动条效果，解决苹果ios真机无法隐藏去掉滚动条问题！

王佳斌

04-01

3549

uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，可滚动视图区域组件，scroll-view，滚动条，去除，隐藏，横向滚动条，纵向滚动条，安卓手机，苹果ios手机，无法去除隐藏滚动条，苹果安卓滚动条隐藏，ios苹果无法隐藏，没效果无效，真机出现滚动条如何隐藏，在安卓机上出现横向滚动条的解决办法，滚动视图隐藏横向滚动条，有滚动条怎么办，就是隐藏不掉，微信小程序去除隐藏去掉scroll-view滚动条，苹果ios系统手机去除，如何去掉滚动条，无法去掉io

小程序如何隐藏滚动条

Shimeng_1989的博客

07-11

3038

小程序如何隐藏滚动条/隐藏scroll-view滚动条

参与评论您还未登录，请先登录后发表或查看评论

css隐藏移动端滚动条并且ios上平滑滚动的方法

09-22

主要介绍了css隐藏移动端滚动条并且ios上平滑滚动的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

如何隐藏三大内核浏览器的滚动条，并且保持可滚动

qq_38971393的博客

03-25

144

隐藏浏览器滚动条

小程序隐藏滚动条，兼容安卓和ios

qq_32555123的博客

05-23

249

::-webkit-scrollbar{ display: none; }

CSS实现横线滚动（隐藏滚动条）

drakseason的博客

08-08

892

通常这种效果是swiper实现，但是需要引入第三方组件，占用不必要的资源，但是通过CSS可以简单实现该功能。然后再用CSS的伪元素隐藏滚动条，实现效果。

如何让苹果手机H5横向滚动条不显示

风烟

02-03

1442

在ios上我们H5有时候会有横向滚动的样式，但是横向滚动有时候不好看，我们需要禁止掉他们。设置-webkit-scrollbar高度为0即可 &::-webkit-scrollbar { height: 0; } 参考文章::-webkit-scrollbar

vue，css实现元素隐藏或取消滚动条

哆啦A梦的百宝袋的博客

01-13

8159

vue和html适用的实现元素隐藏或取消滚动条，原理是css的功能。

纯css隐藏移动端滚动条解决方案（ios上流畅滑动）

weixin_30649859的博客

09-22

533

html代码展示（直接复制代码保存至本地文件运行即可）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, ma...

详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现

10-17

但是，在实际开发中，开发者经常遇到一些问题，比如如何使scroll-view实现横向滚动，以及如何隐藏滚动条，来达到美观的效果。一、微信小程序scroll-view横向滚动实践踩坑 1. 默认情况下，scroll-view组件是不支持...

微信小程序scroll-view的滚动条设置实现

10-15

iOS 系统对滚动条的支持有限，有时甚至完全隐藏滚动条。对于这种情况，开发者可能需要寻找其他方法，如使用自定义组件来模拟滚动条效果，以达到预期的设计要求。在实际开发中，还可能遇到 `scroll-view` 的其他...

css隐藏移动端滚动条（兼容ios）

Amouzy的博客

02-25

3648

尝试过很多类似 .container ::-webkit-scrollbar {display: none;}操作会发现，这些在苹果浏览器根本就不起效果。既要隐藏滚动条、滑动流畅，还要兼容ios，可尝试以下思路：父元素设置内容溢出隐藏，使含滚动条元素的滚动条挤出可视区域，即实现了对滚动条的隐藏。示例代码： html: <div class="compatible-ios"> <ul> <li>第一个哈哈</li> <

css 滚动条隐藏 ios解决办法

嘿喵财运旺旺

06-23

5501

overflow-x: scroll; // 设置滚动 -webkit-overflow-scrolling: touch; //让滚动更流畅，其实就是滚动有延缓，不设置只要手指离开就立刻停止，感觉体验商是一种不流畅上面只要加了-webkit-overflow-scrolling: touch就会出现滚动条，如果只是PC或安卓那恭喜你添加下面代码完美解决 /*HTML5 元素...

css实现隐藏横向滚动条,兼容微信、ios

最新发布

Boom9494的博客

05-11

206

如何实现横向滚动(兼容safari，微信，浏览器)

滚动条详解：跨平台iOS、Android、小程序滚动条隐藏及自定义样式综合指南

JINGWHALE

04-21

2973

随着用户界面体验提升的要求，滚动条自定义样式以及滚动条隐藏精致化的需求日渐增加，本文详细介绍了小程序、iOS、Android平台滚动条的隐藏方法，以及滚动条一般自定义样式的方法。在保持界面整洁、避免内容溢出的同时，确保用户能够访问所有信息，提升浏览体验。

【CSS】css如何让滚动条不显示（CSS隐藏滚动条）

liuzhenhe1988的专栏

06-27

5979

css如何让滚动条不显示（CSS隐藏滚动条）

html ios 滚动条隐藏,纯css隐藏移动端滚动条解决方案（ios上流畅滑动）

weixin_36353180的博客

06-03

737

h插新，都次过是宗现制的前搭待个断前能绿和tml代码展示(直接复制代码保存至本地文件运行直分调浏器代，刚求的一学础过功互有解小久宗点差维含数如数即可)：移动端隐藏滚动条解决方案* {padding: 0;margin: 0;}.container {height: 50px;-webkit-box-sizing: border-box;box-sizing: border-box;overflow...

CSS 兼容各浏览器隐藏滚动条，保持滚动效果

RainHg的博客

10-27

801

CSS 隐藏滚动条，兼容各大浏览器，但保持滚动效果

css 去除滚动条 兼容多端和微信小程序

06-02

可以使用CSS样式来去除滚动条。下面是一些常见的方法： 1. 使用CSS的overflow属性来隐藏滚动条： ``` body { overflow: hidden; } ``` 这种方法会隐藏整个页面的滚动条。 2. 为滚动区域的父元素添加样式，使用CSS的::-webkit-scrollbar伪类来隐藏滚动条： ``` .parent { overflow: auto; -webkit-overflow-scrolling: touch; /* 兼容iOS设备 */ } .parent::-webkit-scrollbar { display: none; } ``` 这种方法只会隐藏指定区域的滚动条。需要注意的是，不同的浏览器和设备可能对滚动条的样式支持不同，因此需要根据实际情况进行调整。在微信小程序中，可以使用scroll-view组件来实现滚动区域，并通过设置scroll-x和scroll-y属性来控制滚动方向。可以在组件的style属性中添加样式来隐藏滚动条： ``` <scroll-view class="scroll-view" scroll-x="true" scroll-y="true"> ... </scroll-view> .scroll-view::-webkit-scrollbar { display: none; } ```