黑科技！两行代码完美解决：同时设置overflow-x:hidden,overflow-y:visible无效的问题...

最新推荐文章于 2023-04-23 23:26:59 发布
最新推荐文章于 2023-04-23 23:26:59 发布
阅读量946 收藏
点赞数 1
原文链接：http://www.cnblogs.com/ImaY/p/11101937.html
版权

不废话，直接上代码

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        padding: 0;
        margin: 0;
        height: 800px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .parent {
        width: 80vw;
        height: 200px;
        background-color: aqua;
        display: flex;
        align-items: center;
      }
      .wrapper {
        width: 100%;
        display: flex;
        align-items: center;
        overflow-x: hidden;
        overflow-y: visible;
        padding: 500px 0; /*极为重要的两行代码 */
        margin: -500px 0; /* 具体值可以根据实际情况调整 */
      }

      .imgDiv {
        padding-left: 50px;
      }

      .child {
        width: 70px;
        height: 100px;
      }

      .child:hover {
        transform: scale(4, 4);
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="wrapper">
        <div class="imgDiv">
          <img
            class="child"
            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
          />
        </div>
        <div class="imgDiv">
          <img
            class="child"
            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
          />
        </div>
        <div class="imgDiv">
          <img
            class="child"
            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
          />
        </div>
        <div class="imgDiv">
          <img
            class="child"
            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
          />
        </div>
        <div class="imgDiv">
          <img
            class="child"
            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
          />
        </div>
        <div class="imgDiv">
          <img
            class="child"
            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
          />
        </div>
        <div class="imgDiv">
          <img
            class="child"
            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
          />
        </div>
        <div class="imgDiv">
          <img
            class="child"
            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
          />
        </div>
        <div class="imgDiv">
          <img
            class="child"
            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
          />
        </div>
        <div class="imgDiv">
          <img
            class="child"
            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
          />
        </div>
        <div class="imgDiv">
          <img
            class="child"
            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
          />
        </div>
        <div class="imgDiv">
          <img
            class="child"
            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
          />
        </div>
        <div class="imgDiv">
          <img
            class="child"
            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
          />
        </div>
        <div class="imgDiv">
          <img
            class="child"
            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
          />
        </div>
        <div class="imgDiv">
          <img
            class="child"
            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
          />
        </div>
        <div class="imgDiv">
          <img
            class="child"
            src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
          />
        </div>
      </div>
    </div>
  </body>
</html>

参考链接：

https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue/39554003#39554003

转载于:https://www.cnblogs.com/ImaY/p/11101937.html

weixin_30920597
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
overflow-x和overflow-y其中一个设置为visible时的奇怪现象
weixin_30345055的博客
03-19 696
当overflow-x和overflow-y其中一个设置为visible时，如果另一个不是visible，那么它会被自动重置为auto 看看效果先： 第一次遇到这个问题时，我还以为是chrome的一个bug，结果测试了一下，所有浏览器都是这样的， 看一下效果 .div1 { width: 100px; height: 100px; backgro...
overflow-x:visible和overflow-y：auto失效
weixin_38138887的博客
09-28 5151
最近在项目中有这么一个需求，在一个div中，里面有多个子div，同时，最外层的div要求y轴要需要的时候有滚动条，同时外层div初始的时候，宽度是由里面的div的内容撑开。基于以上的限制，现在的一个需求就是：在div中，有一个按钮，点击按钮的时候，会弹框显示内容（弹框的定位是绝对定位，所以无法撑开外层div的宽度），现在弹框的宽度比外层div的宽度更宽。但是因为其他原因，给外层div设置了over...
禁止页面滚动--html和body同时设置overflow:hidden;
dengzhi7732的博客
01-04 448
页面弹出遮罩层等模块时，一般会禁止页面滚动，简单的操作是设置 html 或 body {overflow:hidden;}。 有次在设置时，将 html 和 body 都设置为{overflow:hidden;}，这样带来了一个后果，页面会回到顶部（scrollTop=0）。 目前不知道原因，蓝瘦 转载于:https://www.cnblogs.com/shiveringape/p/...
display，overflow同时使用时，overflow失效
纸风筝的博客
01-12 733
最外层div 1可根据 IsVisible[x]的值动态影藏或显示，div 2 overflow属性为'hidden' ，限定了div 2 的高度开发中发现此例中display，overflow放在同一div中，将导致overflow的hidden属性失效。所以将两属性分别置于两个div下，display处于最外层。 <div id= '1' style={{ display: Is...
【Flutter】Debug篇1：Flutter解决Text外溢，overflow
LCQ_CG的博客
10-05 1331
Fluter Text自动换行
CSS中overflow-y: visible;不起作用的原因分析及解决方法
09-22
小编最近遇到这样的需求，移动端的h5页面，要求有一排可选择的卡片, 超出容器部分可以左右滑动，同时每张卡片...接下来通过本文给大家介绍CSS中overflow-y: visible;不起作用的原因分析及解决方法，需要的朋友参考下吧
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
09-25
CSS3中的box模型扩展了对元素内容显示方式的控制能力，其中overflow-x和overflow-y属性是两个非常重要的属性，它们分别控制元素内容在水平方向和垂直方向溢出时的表现形式。通过这两个属性，开发者可以精细地调整...
css中overflow、overflow-x、overflow-y使用
最新发布
qq_43235503的博客
04-23 3957
css中overflow、overflow-x、overflow-y使用
关于overflow-x失效的探讨
小D科技的博客
08-17 7531
最近开发微信小程序遇到个问题 ：overflow-x无效。。。无论怎样设置子元素的浮动样式，都没有效果，简直无敌了！感觉像是学习了假的css。         HTML如下： &lt;view class="video-tabBar"&gt; &lt;view class="changeTab"&gt; &lt;text class="selected"&gt;WEB..
overflow-x与overflow-y的冲突
weixin_44001906的博客
03-13 1055
如果其中一个特性值被设置成了 ‘scroll’ 或 ‘auto’，而另一个特性指定值为 ‘visible’，那么 ‘visible’ 会被设置成 ‘auto’。 当一个元素的 ‘overflow-x’ 或 ‘overflow-y’ 指定值为 ‘hidden’，另一个特性的指定值为 ‘visible’ 时， 该元素最终渲染使用的 ‘overflow-y’ 或 ‘overflow-x’ 值不同。IE6 IE7 IE8 使用 ‘hidden’，其它浏览器使用 ‘auto’。 ...
overflow-x和overflow-y设置冲突问题解决方案
weixin_44501030的博客
04-19 7073
问题情景还原： 对一个元素设置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和 overflow-y混合使用时出现的问题
weixin_44051815的博客
05-19 8093
overflow-x 和 overflow-y混合使用 我们在平时解决’坍塌‘，’浮动‘等情况时，会很自然的想到使用overflow: hidden;但是将overflow-x 和 overflow-y混合使用时，则会出现一些难以把控的情况，请看代码； <!DOCTYPE html> <html lang="en"> <head> <meta ch...
对同一元素设置overflow-x:hidden,overflow-y:visible;属性值不生效
热门推荐
wuyou1336的博客
01-03 1万+
问题 在一次开发过程中，对一个元素设置CSS overflow-x: hidden; and overflow-y: visible; ，理想状况下，在X轴超出部分隐藏，Y轴超出部分显示。然而，元素属性并没有生效。 原因 根据W3C的说法，如下 The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their
overflow:hidden单行和多行文本溢出隐藏需要注意
tomorrownan的博客
05-31 2032
1.单行文本溢出 单行文本隐藏样式使溢出部分使用省略号显示，需要下面3个属性同时设置： overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 完整代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"...
css超出文本溢出隐藏，多行溢出隐藏变三个点
qq_42148925的博客
02-05 592
#单行溢出隐藏 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; #多行溢出隐藏 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 多行溢出隐藏的关键点是如果css不行点话其实关键点是放在wxml里面点style里面 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值