CSS实现浏览器隐藏滚动条

最新推荐文章于 2024-04-30 07:25:25 发布
最新推荐文章于 2024-04-30 07:25:25 发布
阅读量1.3k 收藏
点赞数 2
分类专栏： CSS 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/swmfizl/article/details/104037488
版权

CSS实现浏览器隐藏滚动条

谷歌/Safari浏览器隐藏滚动条

  • 1.谷歌/Safari浏览器隐藏滚动条css代码
  • 2.谷歌/Safari浏览器滚动条隐藏前演示
  • 3.谷歌/Safari浏览器滚动条隐藏后演示

1.谷歌/Safari浏览器隐藏滚动条css代码

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

2.谷歌/Safari浏览器滚动条隐藏前演示

在这里插入图片描述
在这里插入图片描述

3.谷歌/Safari浏览器滚动条隐藏后演示

在这里插入图片描述
在这里插入图片描述

火狐浏览器隐藏滚动条

  • 1.火狐浏览器隐藏滚动条css代码
  • 2.火狐浏览器滚动条隐藏前演示
  • 3.火狐浏览器滚动条隐藏后演示

1.火狐浏览器隐藏滚动条css代码

* {
	scrollbar-width: none;
}

2.火狐浏览器滚动条隐藏前演示

在这里插入图片描述

3.火狐浏览器滚动条隐藏后演示

在这里插入图片描述

IE/Edge浏览器隐藏滚动条

  • 1.IE/Edge浏览器隐藏滚动条css代码
  • 2.IE/Edge浏览器滚动条隐藏前演示
  • 3.IE/Edge浏览器滚动条隐藏后演示

1.IE/Edge浏览器隐藏滚动条css代码

* {
	-ms-overflow-style: none;
}

2.IE/Edge浏览器滚动条隐藏前演示

在这里插入图片描述
在这里插入图片描述

3.IE/Edge浏览器滚动条隐藏后演示

在这里插入图片描述
在这里插入图片描述

钟 力
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用CSS隐藏元素滚动条的示例代码
11-21
如何隐藏滚动条，同时仍然可以在任何元素上滚动？ 首先，如果需要隐藏滚动条并在内容溢出时显示滚动条，只需要设置overflow：auto样式即可。想要完全隐藏滚动条只需设置overflow：hidden即可，但是这样一来将导致元素内容不可滚动。时至今日，还没有任何一条CSS规则可以使元素可以隐藏滚动条的同时依然可以滚动内容，只能通过针对特定浏览器设置滚动条样式来实现。 Firefox浏览器 对于Firefox，我们可以将滚动条宽度设置为none： scrollbar-width: none; /* Firefox */ IE浏览器 对于IE，我们需要使用-ms-prefix属性定义滚动条样式：
CSS3自定义滚动条样式的示例代码
12-13
滚动条是个很常见的东东，不过某些浏览器自带的滚动条确实不太好看啊，下面可以作为学习，探讨下自定义滚动条的实现，这样你的滚动条就可以美美的啦。但是，也只能玩玩，因为只针对webkit内核的浏览器啊啊啊啊啊！ ...
怎麽把＂滚动条＂隐藏？
weixin_34143774的博客
01-19 1041
问题釐清 什麽是＂滚动条＂？ 滚动条指的是下图右侧被红线框起来的部分： 只要网页内容大于视窗，滚动条就会出现。 一般来说，只要不是body层次的滚动条，那用overflow: hidden;就能解决滚动条出现的问题，但此时页面也会变得无法捲动。 目前网路上已经有诸多可隐藏非body层次的滚动条又可捲动页面的教学，所以本文主要聚焦于如何隐藏浏览器（也就是body层次）的滚动条。 解决方法 针对不同...
CSS 技巧
thingir的博客
01-20 412
CSS中的一些小技巧
新版edge浏览器右侧栏怎么关闭？
qq_46025307的博客
01-02 982
新版edge浏览器右侧栏通过快捷键 ctrl+shift+/ 关闭
滚动条如何设置样式和滚动条悬浮显示与隐藏
weixin_44784401的博客
04-13 1万+
滚动条如何设置样式和滚动条悬浮显示与隐藏
CSS - 隐藏浏览器自带滚动条（Chrome | Safari | Firefox | IE | Edge）
王佳斌
05-10 7986
前言 无论横纵滚动条全部隐藏。 有时候，我们需要隐藏浏览器的默认滚动条，无论内容是否超出都不显示。 一、Chrome | Safari 谷歌与苹果自带浏览器，隐藏办法如下代码。 *::-webkit-scrollbar { display: none; } 二、Firefox 火狐浏览器，隐藏办法如下代码。 * { scrollbar-width: none; } 三、IE | Edge IE 与微软浏览器，隐藏办法如下代码。 * { -ms-overflow-style: none; }
IE、Chrome、Firefox浏览器隐藏滚动条（IE、火狐、谷歌浏览器）
weixin_46022934的博客
12-21 6529
一、背景和效果图如下： 1.背景 2.设置属性前效果图： 2.设置后效果图： 二、直接通过CSS修改样式，保存滑动功能 1.全局设置滚动条如下（谷歌Chrome） Css代码如下 效果图如下 2.给某一个元素设置如下（谷歌Chrome） Css代码如下 效果图如下 三、这里其他浏览器的方法 1.IE去除滚动条样式（IE10以上内核） 2.火狐除滚动条样式（Gecko 内核） 总结
隐藏滚动条的多种方式
QIAO_hh的博客
04-20 3180
隐藏滚动条的多种方式
隐藏浏览器滚动条但内容可以滚动的3种解决方式（简单清晰）
热门推荐
zhouzuoluo的博客
12-05 1万+
第一种：使用纯css样式属性隐藏滚动条  ：火狐浏览器的css写法不兼容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt
强制显示、隐藏(IE\Mozilla)浏览器的滚动条实现代码
12-13
强制隐藏滚动条: 复制代码代码如下: html { overflow: hidden; } 隐藏IE的水平滚动条: 复制代码代码如下: html { overflow-x: hidden; } 隐藏IE的垂直滚动条: 复制代码代码如下: html { overflow-y: hidden;
vue中使用css预处理器scss解决body隐藏滚动条问题
02-22
主要就是用了css的伪类元素::-webkit-scrollbar和本身盒子的overflow属性来进行控制，但是会出现一个问题，其余属性（例如：-mz- 、 scroll-width）主要是为了适配主流浏览器下均不出现滚动条。设置好就完成了。
tailwind-scrollbar:Tailwind CSS的滚动条插件
04-28
Tailwind CSS的滚动条插件 为Firefox和基于Webkit的浏览器中的滚动条添加样式实用程序。安装yarn add -D tailwind-scrollbar 或者npm install --save-dev tailwind-scrollbar 将其添加到Tailwind配置的plugins数组中...
谷歌，火狐，Edge通过css样式隐藏滚动条
qq_42173653的博客
10-12 1244
1.谷歌 html::-webkit-scrollbar { display: none; } 2.火狐 html{ scrollbar-width: none; } 3.Edge html{ -ms-overflow-style:none; } 欢迎大家补充
CSS隐藏滚动条
清颖的博客
09-01 7188
亲测有效，css实现隐藏滚动条。网上一搜就是3种方法实现隐藏滚动条，实际试了我这边没起作用。真正实现方法请看正文。
浏览器滚动条隐藏
weixin_51929096的博客
12-18 381
隐藏滚动条
隐藏浏览器自带滚动条方法
yuxuanbeibei的专栏
09-28 2548
有时候，无论内容是否超出都不显示，我们需要隐藏浏览器的默认滚动条
隐藏页面滚动条
MtangEr的博客
08-03 143
【代码】隐藏页面滚动条。
CSS三个标题及对应内容的tab切换
最新发布
codedadi的博客
04-30 588
标题1标题2标题3
Css 各浏览器滚动条隐藏
05-16
可以使用以下 CSS 样式来隐藏滚动条： ``` /* 隐藏滚动条 */ ::-webkit-scrollbar { display: none; } /* 兼容 Firefox */ scrollbar-width: none; -moz-scrollbar:none; ``` 这将隐藏所有浏览器的滚动条。但需要注意的是，这可能会影响用户体验。建议在使用时进行评估。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值