滚动条隐藏处理：兼容火狐和其他浏览器

已于 2023-07-28 11:06:58 修改
阅读量616 收藏
点赞数 1
分类专栏： 浏览器兼容性 文章标签： 兼容性 滚动条 火狐
于 2023-07-28 11:02:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59850169/article/details/131976031
版权

一般使用场景：同一容器内有双滚动条场景，大容器整体滚动，内部小容器局部滚动。

例：隐藏容器classes-list的滚动条（注：scrollbar-* 的相关属性都蛮有趣的，感兴趣的可以都看看效果，毕竟要兼容浏览器的话有些就得特殊处理，有些浏览器的滚动条是真的丑！！比如火狐）

拾一·
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
火狐浏览器滚动条兼容问题
grootbaby
02-20 5688
在日常开发中，我们经常会用到 overflow: scroll; 但浏览器自带的默认滚动条很难看，因此我们会需要美化它 方法一：自定义美化 谷歌 chrome 浏览器美化滚动条方法：（网上有很多种美化方法，此为一种） .scrollbar { overflow: auto; float: left; border: none; } .scrollbar::-w...
强制显示、隐藏(IE\Mozilla)浏览器的滚动条实现代码
09-25
浏览器的滚动条在一些特殊的展示中，是不需要的，所以必须把它隐藏掉,本文介绍一些隐藏或者显示IE的水平或者垂直滚动条的实现代码，需要了解的朋友可以参考下
vue自定义浏览器滚动条(兼容大部分浏览器含ie)_vue tree组件 下拉滚动条
01-09
vue自定义浏览器滚动条(已兼容ie)
CSS - 隐藏浏览器自带滚动条（Chrome | Safari | Firefox | IE | Edge）
王佳斌
05-10 8460
前言 无论横纵滚动条全部隐藏。 有时候，我们需要隐藏浏览器的默认滚动条，无论内容是否超出都不显示。 一、Chrome | Safari 谷歌与苹果自带浏览器，隐藏办法如下代码。 *::-webkit-scrollbar { display: none; } 二、Firefox 火狐浏览器，隐藏办法如下代码。 * { scrollbar-width: none; } 三、IE | Edge IE 与微软浏览器，隐藏办法如下代码。 * { -ms-overflow-style: none; }
去除火狐浏览器滚动条
weixin_45828167的博客
07-21 263
去除火狐浏览器滚动条
火狐浏览器滚动条如何隐藏
weixin_30824599的博客
07-29 3263
有时候不想让滚动条显示，然后用如下css设置了滚动条宽度为0： 　　.sidebar::-webkit-scrollbar{ 　　width: 0!important;　　} 但是会发现火狐浏览器还是会显示滚动条：在网上搜索了一小圈之后，发现的相对比较合心意的解决办法如下： 　　overflow-y: scroll; 　　scrollbar-color: t...
浏览器隐藏滚动条
当历史只剩罪恶，唯有推倒重来，我们开创文明，我们传承文明，周而复始，生生不息。
04-08 1838
　overflow-y: scroll; 　　scrollbar-color: transparent transparent; 　　scrollbar-track-color: transparent; 　　-ms-scrollbar-track-color: transparent;
IE、Chrome、Firefox浏览器隐藏滚动条（IE、火狐、谷歌浏览器）
weixin_46022934的博客
12-21 7477
一、背景和效果图如下： 1.背景 2.设置属性前效果图： 2.设置后效果图： 二、直接通过CSS修改样式，保存滑动功能 1.全局设置滚动条如下（谷歌Chrome） Css代码如下 效果图如下 2.给某一个元素设置如下（谷歌Chrome） Css代码如下 效果图如下 三、这里其他浏览器的方法 1.IE去除滚动条样式（IE10以上内核） 2.火狐除滚动条样式（Gecko 内核） 总结
隐藏滚动条，火狐浏览器隐藏滚动条
ccc0720的博客
02-17 2247
火狐浏览器 scrollbar-width: none; 其他浏览器 ::-webkit-scrollbar { width: 0 !important; }
隐藏浏览器自带滚动条方法
yuxuanbeibei的专栏
09-28 2646
有时候，无论内容是否超出都不显示，我们需要隐藏浏览器的默认滚动条
浏览器滚动条隐藏
最新发布
weixin_51929096的博客
12-18 424
隐藏滚动条
自定义滚动条（兼容所有浏览器）
07-25
兼容各种浏览器，多种滚动条样式，兼容各种浏览器，多种滚动条样式
FireFox火狐浏览器与IE兼容问题 - 透明滤镜 DIV滚动条
09-25
IE与火狐浏览器兼容相关问题集锦，做网站的朋友可以参考下。
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
10-20
在本文中，我们将探讨如何使用原生JavaScript来实现自定义浏览器滚动条，使其兼容IE、火狐和Chrome等主流浏览器。通常，CSS可以用来改变Chrome浏览器的滚动条样式，但对IE和火狐的支持有限。因此，为了实现跨浏览器...
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
11-23
然而，不同浏览器之间可能存在兼容性问题，特别是在Firefox和Chrome之间。在本文中，我们将深入探讨这个问题，并提供解决方案。 首先，理解页面元素的坐标获取至关重要。在处理滚动和定位时，通常我们会用到`...
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome.docx
01-18
JavaScript 自定义浏览器滚动条兼容 IE、火狐和 chrome 本文主要共享了使用原生 JavaScript 实现自定义浏览器滚动条兼容 IE、火狐和 chrome 的思路与方法。通过 JavaScript 实现自定义浏览器滚动条，可以实现跨...
谷歌、火狐、ie浏览器更改滚动条样式
m0_66911948的博客
02-08 3223
【代码】谷歌、火狐、ie浏览器更改滚动条样式。
前端 CSS - 如何隐藏右侧的滚动条 -关于出现过多的滚动条导致界面不美观
Muxiu
08-30 1208
CSS 配置：下面两个一起写进进去，适配 IE、火狐、谷歌浏览器。
关于隐藏火狐浏览器原生滚动条总结
qq_35675325的博客
10-09 424
网上寻找的方法，经测试可以用 1 scrollbar-color: transparent transparent pc端滚动条隐藏 2 scrollbar-width: none; 隐藏移动端滚动条 以下是网上找的方法，自己测试不能用，不知道其他人是怎么个情况 -ms-overflow-style: none; scrollbar-track-color: transparent !important; -ms-scrollbar-track-color: transpar..
css控制盒子可以滚动，且滚动条隐藏，还要兼容火狐浏览器，具体代码实现你给我的写上去的不生效
06-09
抱歉，我之前给你的代码没有生效，可能是因为我没有考虑到你的具体需求和浏览器兼容性。以下是一个可以让盒子滚动且滚动条隐藏的 CSS 代码，同时也兼容火狐浏览器： ```css /* 隐藏滚动条 */ ::-webkit-scrollbar { display: none; } /* 兼容火狐浏览器隐藏滚动条 */ scrollbar-width: none; -webkit-scrollbar-width: none; /* 控制盒子可以滚动 */ overflow: auto; ``` 这个代码块中，`overflow: auto` 表示当内容超出盒子大小时，自动出现滚动条进行滚动。`::-webkit-scrollbar` 表示用于控制 WebKit 浏览器的滚动条样式，`scrollbar-width` 和 `-webkit-scrollbar-width` 则是用于控制 Firefox 浏览器的滚动条样式。这些样式中的 `display: none` 则表示隐藏滚动条。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值