设置overflow-y: hidden；时 x轴即使设置visible，也还是会被裁剪

最新推荐文章于 2024-05-21 10:56:02 发布
最新推荐文章于 2024-05-21 10:56:02 发布
阅读量967 收藏 2
点赞数 1
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35176319/article/details/129166469
版权
当使用overflow-y:hidden处理Y轴溢出时，会意外裁切X轴内容。即使设置overflow-x:visible，问题依然存在。通过使用overflow-y:clip，可以只裁切Y轴超出部分，保持X轴内容可见，有效解决了这个问题。
摘要由CSDN通过智能技术生成

一般只想处理Y轴溢出的部分，会想到给 div 设置 overflow-y: hidden，然而这个设置波及了x轴，导致x轴一处部分也被裁切，即便再显式地设置 overflow-x: visible，都不能补救。
这个时候可以只设置 overflow-y: clip ，问题就解决了

啪了个猫
关注
CSS3 overflow-y 属性
shengyin714959的博客
09-16 95
overflow-y属性指定如果它溢出了元素的内容区是否剪辑顶部/底部边缘内容。使用overflow-x属性来判断左右边缘是否裁剪。默认值：visible继承：no版本：CSS3object。
06-创意产品卡设计
粉丝们务必加入微信粉丝群
04-11 1544
效果 视频演示 纯 CSS 特效，5分钟带你学会创意产品卡设计 视频地址一：https://www.bilibili.com/video/BV1mt4y1m7Nw/ 视频地址二：https://mp.toutiao.com/profile_v3/xigua/content-m...
解决父元素overflow-y:auto，x轴无法溢出的问题
最新发布
weixin_45962094的博客
05-21 663
ie6不支持fixed定位，但是ie11的确是支持的，几乎翻遍了所有相关的解答，都没有人遇到这个问题，于是打开F12一个个元素进行排查，看看到底是哪个属性冲突了。经过排查后，发现问题出在当父元素设置了overflow-y:auto，x轴只能是hidden，无法设置为visiable，所以子元素的溢出会被隐藏，这个机制就是这样，只能曲线救国了。ps：博主还踩了一个巨大的坑，这个方法在谷歌、火狐等浏览器都没有问题，但在ie11上行不通，子元素的溢出还是被隐藏了，fixed定位都不起效。
overflow-y:hidden
seimeii的博客
09-28 1225
overflow-y:hidden
隐藏滚动条overflow-y:hidden 不滚动问题解决
sw_onload的博客
06-23 7514
一般想要页面滚动又不想出现滚动条，网上大多回答是overflow-y:hidden,然而我发现并没卵用，反而造成页面无法滚动。要想真正实现效果，可以给父元素overflow:hidden 然后子元素设置overflow:scroll就能隐藏y轴的滚动条，但是x轴的还会出现。需要注意的是父元素需要设置高度或最小高度，否则会失效 ...
style="overflow-y:hidden"
web
06-03 6291
<br />overflow-y:hidden '表示没有垂直滚动条 overflow-x:hidden '表示没有水平滚动条 scroll:no或overflow-x:hidden;overflow-y:hidden或overflow:hidden '让浏览器窗口永远不出现滚动条
html overflow y 样式,[踩坑] CSS中overflow-y: visible;不起作用
weixin_42357054的博客
06-17 602
场景最近要做的一个需求是移动端的h5页面，要求有一排可选择的卡片, 超出容器部分可以左右滑动，同时每张卡片左上角要有一个删除按钮。如下图：心想：so easy, 在父容器上加一个max-width: 200px; white-space: nowrap; overflow-x: auto;不就搞定了嘛。Demo如下：.container {max-width: 500px;overflow-x: ...
css x轴不滚动_CSS ul 横向滑动并超出屏幕可滑动
weixin_28954623的博客
12-30 1259
大家都知道css中元素中的各条目默认都是纵向排列的，我们需要定义CSS来让其横向排列起来并且超出屏幕可以滑动。因为本人是html小白 查了资料才实现下面GIF图的效果。(有什么更好的方法或者有写的不对的地方 希望大神们多多指出，与君共勉)效果GIF图：密卷.gif方案一：第一步 ul 中的css设置 #list { overflow-x: auto; //设置x轴可滑动 list-style:...
css 不多但够用（大概）
weixin_74448257的博客
10-29 1247
css基础概要
Java学习-14 CSS与CSS3美化页面及网页布局
deemo_hui的博客
09-11 1553
Java学习-14 CSS与CSS3美化页面 1. CSS简介 什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示控制 HTML 元素,从而实现美化HTML网页。 样式通常存储在样式表中，目的也是为了解决内容与表现分离的问题 外部样式表(CSS文件)可以极大提高工作效率 多个样式定义可层叠为一，后者可以覆盖前者样式 样式层叠次序 当同一个 HTML 元素定义了多个样式时，应该使用哪个样式？ 一般而言，所有的样式会根据下面的规则层叠于一个新的虚
开发知识点-CSS样式/Sass/Scss/Less/Stylus预处理器
aming小老弟
11-29 976
1.CSS的基本介绍2.CSS常用属性-盒子CSS介绍3.CSS样式表的基本使用4.CSS选择器-基础选择器5.CSS选择器-高级选择器6.CSS继承性和层叠性1.CSS属性学习-color2.CSS属性学习-font-familyHTML/CSSCSS属性学习3.CSS属性学习-line-height4.CSS属性学习-font-weight5.CSS属性学习-font-style和综合属性1.CSS盒模型。
css隐藏浏览器的x/y轴
it_java_com的博客
08-13 1858
overflow:scroll;//固定长和宽 overflow-y:hidden;//隐藏y轴 overflow-x:hidden;//隐藏x轴
浏览器y轴滚动条占据宽度，导致出现x轴滚动条的解决方案
m0_50290552的博客
09-16 1989
隐藏x轴滚动条
HTML-CSS（十八）overflow溢出隐藏
weixin_44730244的博客
04-23 534
overflow 属性 默认属性值时：visible overflow: hidden; 在边界进行裁剪；经常用于清除浮动带来的高度塌陷，margin传递（子元素加margin，父元素移动，子元素不移动），作为触发BFC的条件 overflow: scroll；溢出就出现滚动条 纵向横向都出现滚动条 当你内容多时，就出现可拖拽的滚动条，而内容少时，就会出现不可拖拽的滚动条 overflow: auto; 纵向出现滚动条 当你内容多时，就出现可拖拽的滚动条，而内容少时，就会不会出现滚动条 overflow
css中overflow-x:scroll和overflow-y:visible不能同时生效的问题
zyh314的博客
05-11 1405
起因: 工作中遇到需要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
CSS溢出-x：可见; 和溢出-y：隐藏； 导致滚动条问题
asdfgh0077的博客
02-01 4423
假设您有一些样式和标记： ul { white-space: nowrap; overflow-x: visible; overflow-y: hidden; /* added w
css滚动条不占用宽度_CSS 中 关于 Overflow，你需要了解的这些知识点
weixin_39819283的博客
11-27 3286
在CSS中，当一个元素的内容太大而无法容纳时，我们可以对其进行控制。该元素的属性是overflow，它是overflow-x和overflow-y属性的简写形式。在本文中，将会介绍这些属性，然后我们将一起深入讨论与overflow相关的一些概念和用例。你准备好了吗？get it!简介要使用overflow属性，我们需要确保将其应用到的元素具有以下特征：块级元素(例如:div、section)，通过...
overflow-x和overflow-y设置冲突问题解决方案
weixin_44501030的博客
04-19 7087
问题情景还原： 对一个元素设置CSS overflow-x: hidden; 和 overflow-y: visible; 理想状况下，在X轴超出部分隐藏，Y轴超出部分显示。然而，overflow-y元素属性并没有生效。 原因分析： 一般来说“overflow-x”和“overflow-y”的计算值与它的指定值相同，但是在特定的情况下两者会有冲突： 如果其中一个指定为“visible”，而另一个是“scroll”或“auto”，那么“visible”就会被设置为“auto’”。在Gecko，Safari，O
黑科技！两行代码完美解决：同时设置overflow-x:hidden,overflow-y:visible无效的问题...
06-07
很高兴能为您解答问题。您所提到的问题可能是由于浏览器对 `overflow` 属性的解析导致的。可以尝试使用以下代码解决该问题： ```css overflow: visible; overflow-x: hidden; ``` 这里将 `overflow` 属性设置为 `visible`，同时将 `overflow-x` 属性设置为 `hidden`，这样就可以同时实现水平方向的隐藏和垂直方向的可见了。 希望能帮到您。如果还有其他问题，请继续提问。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值