css:overflow-x: overlay对火狐浏览器无效

最新推荐文章于 2023-05-31 21:08:39 发布
最新推荐文章于 2023-05-31 21:08:39 发布
阅读量2.5k 收藏
点赞数
分类专栏： css 前端开发 文章标签： css 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lilycheng1986/article/details/122126232
版权

前面我们使用了overflow-x: overlay设置了滚动天不占位置

css：overlay使滚动条不占据位置_1111111111-CSDN博客_css滚动条不占位置

但是后来发现这个设置对狐火浏览器无效，根本就不显示滚动条了。

解决方案是再加一个overflow: auto设置，保证在火狐浏览器里也能显示滚动条，只是无法像谷歌浏览器里那样overlay而已，能显示总比不显示要好呀。

<a-col flex="auto" style="border: 0;overflow: auto;overflow-x: overlay;" id='right' @scroll='handleScrollScroll()'>

粉末的沉淀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
simple-css-overlay:简单的 CSS 叠加
06-24
在"simple-css-overlay-master"这个项目中，你可能会找到一个实际的示例，展示如何将这些概念应用于实践。通过查看源代码和调整样式，你可以更好地理解 CSS 叠加层的工作原理，并能将其应用于自己的网页设计中。这...
leetcode的reputation-LeetCode-OBS-Overlay:LeetCode-OBS-Overlay
06-30
leetcode 的声誉 力扣 OBS 统计 获取 LeetCode 的实时更新。 可用于 OBS 自动更新屏幕统计信息以解决问题和帐户信息。 可以监控哪些 LeetCode 数据？ 个人资料： 用户名 GitHub 网址 积分 星级 ...
css:overflow-x: overlay火狐浏览器不生效没有滚动条出现
qq_45067263的博客
05-26 2203
项目场景： overflow-x: overlay是为了解决表格出现滚动条，会多出一小块位置，但是火狐浏览器对此不生效 解决方案： overflow-x: overlay; overflow: auto; 在 overflow-x: overlay;的基础上加个 overflow: auto;适配，但是多出来的那一块还会存在，但是首要问题是解决没有滚动条，多出来的一点无所谓，因为仅限火狐会有 ...
css overflow 失效
sayyy的专栏
02-14 377
略
overflow-x: overlay属性学习（用了fixed属性后，由于滚动条的高度导致表格错位）
qq_40608283的博客
12-03 1983
遇到问题是这样的：用了fixed属性后，由于滚动条的高度导致表格错位。 解决方案：overflow-x:overlay; /deep/ .el-table--scrollable-x .el-table__body-wrapper { height: calc(100% - 40px); overflow-y: auto; overflow-x: overlay; } 划重点： auto时滚动条会占用宽度, 布局会发生变化 overlay时滚动条会覆盖在内容上, 会遮挡一..
display与overflow同时使用时，overflow会失效如何解决
肥晨开发的学习之路
01-17 981
前两天在写业务的时候发现，如果使用了display，overflow的部分功能就会失效。 想要效果： 但是使用了display和overflow后。。。 代码： overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; 效果： 刚开始不理解，后来发现两个...
解决遮罩下方元素禁止滚动
WWW_wwwww的博客
02-01 1404
打开遮罩前 document.body.style.position = 'fixed' document.body.style.overflow = 'hidden' 关闭遮罩前 注意：当打开遮罩层时，底部的页面会返回最顶部 document.body.style.overflow = 'scroll' document.body.style.position = 'relative' window.scrollTo({ top: 10000 }) //我这边默认将页面滚动到最底部 当关闭遮罩层时将
np-hardass-overlay:NP-Hardass的个人叠加
04-12
包裹描述笔记 管理自我加密驱动器工具和启动前身份验证映像我是此ebuild的作者和维护者 戴尔笔记本电脑风扇调节器从foo-overlay复制 基于多维数据集的沙盒游戏从Sabayon复制，修复了icedtea-bin
webpack-hot-client-overlay:webpack-hot-client的覆盖
05-19
webpack-hot-client-overlay 这是一个早期的原型，提供了与webpack-hot-client一起使用的浏览器内覆盖。笔记这主要是webpack-hot-middleware等效代码的直接复制粘贴端口。 目前，它打算足够我用于我自己的目的，如果...
React-Loader-Overlay-Sample:React-Loader-Overlay-Sample
05-13
React-Loader-Overlay-Sample 使用react-loader覆盖微调器样品。 ＃内置 React装载机 React 通量 React路由器 设置 npm install 运行项目 npm start
ie7设置overflow属性失效解决方法
weixin_39330484的博客
07-12 593
在项目中遇到 IE7 浏览器设置 overflow:hidden , overflow: auto; 都无效 ！ 父元素设置固定宽高属性并加 overflow属性 (意图使超出部分能够隐藏或者滚动)， 子元素设置了position:relative 或position:absolute属性 ，ie7浏览器下超出父元素的子元素区域部分不能被隐藏掉！ 解决方法： 给元素也加上position:rel...
css中overflow-x:scroll和overflow-y:visible不能同时生效的问题
zyh314的博客
05-11 1302
起因: 工作中遇到需要overflow-x:scroll和overflow-y:visible同时生效的问题 原因: W3C的解释: The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visib
overflow-y: overlay
qq_25103439的博客
03-14 4997
只适应于chrome浏览器,固定高度时,想溢出时出现滚动条,不溢出隐藏滚动条.
overflow的overlay属性值
热门推荐
one_four_two的博客
11-26 1万+
当overflow的值为overlay时，行为与auto相同，但滚动条绘制在内容之上而不是占用空间。 仅在基于WebKit（例如，Safari）和基于Blink的（例如，Chrome或Opera）浏览器中受支持。 注意：这是一个实验性质的属性值，不建议在生产环境使用 ...
前端 笔记
大帅哥
09-10 222
预处理器 /deep/ 与 ::v-deep 1、/deep/ 项目中用到了预处理器scss、sass、less操作符 >>> 可能会因为无法编译而报错。可以使用 /deep/，但是vue-cli3可能会导致编译报错。这个时候用::v-deep 2、::v-deep ::v-deep 在预处理器scss、sass、less 比较通用 ......
CSS浏览器兼容性问题
weixin_38797742的博客
09-10 376
CSS浏览器兼容性问题 1、浏览器CSS样式初始化 最简单的初始化方法就是：使用通配符（*），重置所有的初始样式。 *{ margin: 0; padding: 0; } /* 10px=1rem */ html { overflow-y:scroll; font-size:62.5%; } a{ text-decoration:none; } a:hover { text-decoration:none; } img { border-style: n
css中overflow属性失效，页面始终不能滚动显示溢出的内容
weixin_51248307的博客
01-10 3237
如果overflow设置正确，出现这种问题大抵是因为position属性的设置为了fixd，这导致页面中的内容相对于页面是一定的，包括溢出的内容，他也在页面的某一个位置。而页面滚动本质上页面这个panel没有变，变的是显示的内容，所以既然元素是fix的，那滚动就相当于要破坏这个fixd，所以导致overflow失效。
css关键词：inherit、initial、overlay、revert、unset解释
jinse29的博客
03-04 1万+
写样式好久，这几个属性既陌生又熟悉，可能这几个属性能在关键时刻以四两拨千斤之力解决我们困扰了好久的问题，今天终于腾出时间来系统整理汇总下，如有不对，请多指正~ 以overflow为例，在控制台样式随机打出overflow时候，浏览器对该属性做了一下提示 ...
少见又好用的css属性
weixin_42574100的博客
05-31 304
overlay属性 img图片变形如何处理 object-fit
overflow-y: overlay; 滑轮样式
最新发布
08-09
overflow-y: overlay; 是一个CSS属性，它用于控制容器的垂直溢出内容的处理方式。当容器内的内容溢出容器的高度时，可以使用此属性来决定显示滚动条的样式。 该属性的值"overlay"表示在滚动时，滚动条以覆盖其他...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值