不废话，直接上代码

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

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

  1. libcurl使用easy模式阻塞卡死等问题的完美解决---超时设置

    libcurl使用时疑难问题: 在使用libcurl时, jwisp发现, curl_easy_perform是阻塞的方式进行下载的, curl_easy_perform执行后,程序会在这里阻塞等待下 ...

  2. (桥接)完美解决linux设置静态ip。

    网上找来找去都是一些隔靴挠痒的操作,这里引自https://blog.csdn.net/yefeng0810/article/details/81150605.感谢大佬的博客.

  3. Python黑科技：6行代码轻松搭建FTP服务器

    Python 黑科技 六行代码轻松搭建个人FTP服务器 什么是FTP服务器? FTP (File Transfer Protocol) 是一个用于客户端与服务器之间文件的协议.利用FTP我们就能做到在 ...

  4. 解决WordPress设置错误的url网站不能访问的问题

    通过WordPress后台首选项更改了网站url地址之后,网站就会出现访问不了的情况,一般来说,网站后台也登陆不上去了,我从网上寻找到了四种方法,这四种方法前三种都是需要登陆到后台的,但实际上出错后, ...

  5. iOS 两行代码解决数据持久化

    在实际的iOS开发中,有些时候涉及到将程序的状态保存下来,以便下一次恢复,或者是记录用户的一些喜好和用户的登录信息等等. 这就需要涉及到数据的持久化了,所谓数据持久化就是数据的本地保存,将数据从内存中 ...

  6. 完美解决C#Webbrowser控件设置Cookie问题

    完美解决C#Webbrowser控件设置Cookie问题由于个人项目需求,需要把从抓包里面的Cookie数据写入到webbrowser空控件里,经过百度白百般折腾,结果还是失败,搜索到的答案基本上都是 ...

  7. 完美解决了span的宽度设置

    下 面代码的CSS定义完美解决了span的宽度设置问题.由于浏览器通常对不支持的CSS属性采取忽略处理的态度,所以最好将display:inline -block行写在后面,这样在Firefox里面, ...

  8. 黑科技！仅需 3 行代码，就能将 Gitter 集成到个人网站中，实现一个 IM 即时通讯聊天室功能？

    欢迎关注个人微信公众号: 小哈学Java, 文末分享阿里 P8 高级架构师吐血总结的 <Java 核心知识整理&面试.pdf>资源链接!! 个人网站: https://www.ex ...

  9. GIAC2019 演讲精选 | 面向未来的黑科技——UI2CODE闲鱼基于图片生成跨端代码

    一直以来, 如何从‘视觉稿’精确的还原出 对应的UI侧代码 一直是端侧开发同学工作里消耗比较大的部分,一方面这部分的工作 比较确定缺少技术深度,另一方面视觉设计师也需要投入大量的走查时间,有大量无谓的 ...

随机推荐

  1. 机器学习（六）--------神经网络(Neural Networks)

    无论是线性回归还是逻辑回归都有这样一个缺点,即:当特征太多时, 计算的负荷会非常大. 比如识别图像,是否是一辆汽车,可能就需要判断太多像素. 这时候就需要神经网络. 神经网络是模拟人类大脑的神经网络, ...

  2. 【目标检测】关于如何在 PyTorch1.x + Cuda10 + Ubuntu18.0 运行 CenterNet 源码

    这几天一直在尝试运行CenterNet的源码,但是出现各种问题,本已经打算放弃,中午吃完饭又不甘心,打算重新安装环境再来一遍,没想到竟然成功了.所以,坚持下去,黑夜过后便是黎明. 注意:gcc/g++ ...

  3. System.InvalidOperationException: 'Cannot create more than one System.Windows.Application instance in the same AppDomain.'

    System.Windows.Application is a singleton: its constructor must only be invoked once (including App. ...

  4. Linux查看日志常用命令(转载)

    转自: https://www.cnblogs.com/kbkiss/p/7567725.html -------------------------------------------------- ...

  5. asp.net mvc4 bundle添加带min的js问题

    今天在用ScriptBundle的时候发现js文件有min的,无法bundle进去,具体我也不知道怎么回事. @Tony Tan 回复:bundles.IgnoreList可以设置 去除min.js的 ...

  6. 删除Win10远程桌面中的无用的IP列表

    运行中,输入regedit,然后找到这个位置(也可在任务管理器的地址栏中,直接输入下面的地址),便可删除远程桌面中列出的一些无用的IP地址. 计算机\HKEY_CURRENT_USER\Softwar ...

  7. redis的对象

    简介:redis并没有直接使用前面所提到的基本数据结构,而是基于基本的数据结构构造了一个对象系统.这个系统包含了字符串对象,列表对象,哈希对象,集合对象,有序集合对象五种类型的对象.每种对象都用到了至 ...

  8. php对象复制、clone、浅复制与深复制实例详解

    php对象复制.clone.浅复制与深复制实例详解 一.用clone(克隆)来复制对象$obj1 = new Object();$obj2 = clone $obj1;clone方法会触发对象里定义的 ...

  9. maven 学习---Maven快照

    大型软件应用程序通常由多个模块组成,这是多个团队工作于同一应用程序的不同模块的常见场景.例如一个团队工作负责应用程序的前端应用用户接口工程(app-ui.jar:1.0)),同时他们使用数据服务工程( ...

  10. Android内部存储与外部存储的文件操作类

    public class SDCardHelper { // 判断SD卡是否被挂载 public static boolean isSDCardMounted() { // return Enviro ...