zoukankan html css js c++ java

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

不废话，直接上代码

<!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

查看全文

相关阅读:
【原创翻译】The Free Lunch Is Over
【原创】基于ZYNQ7000的交叉编译工具链Qt+OpenCV+ffmpeg等库支持总结（二）
【原创】基于ZYNQ7000的交叉编译工具链Qt+OpenCV+ffmpeg等库支持总结（一）
实现内容提供者步骤
 为什么需要内容提供者
 aidl的应用场景
 aidl介绍
 百度音乐盒框架
 通过接口方式调用服务里面的方法
 通过bindservice方式调用服务方法里面的过程

原文地址：https://www.cnblogs.com/ImaY/p/11101937.html