不废话，直接上代码

<!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. 分布式 master/slave 框架

    https://helix.apache.org/ https://stackoverflow.com/questions/16401412/apache-helix-vs-yarn https:// ...

  2. .NET Core 2.1 以下的控制台应用程序生成 EXE，且使用命令行参数动态运行控制器应用程序的示例

    文章: https://stackoverflow.com/questions/44038847/vs2017-compile-netcoreapp-as-exe 引用 <ItemGroup&g ...

  3. 【题解】Informacije [COCI2012]

    [题解]Informacije [COCI2012] 传送门:官方题面 [题目描述] 有一个长度为 \(n\) 的 序列 \(a\)(由 \([1,n]\) 中的数组成,且每个数只会出现一次),现给出 ...

  4. docker安装kafka

    文本摘自此文章 .kafka需要zookeeper管理,所以需要先安装zookeeper. 下载zookeeper镜像 $ docker pull wurstmeister/zookeeper .启动 ...

  5. Ubuntu1404配置jdk-12.0.2并安装Android Studio教程

    最近在学习Android Studio 移动应用程序开发,但Android Studio好像对win10不太友好,所以小帅想在Ubuntu上安装Android Studio.为此小帅还去网上找了相关教 ...

  6. element-ui MessageBox组件源码分析整理笔记（十二）

    MessageBox组件源码,有添加部分注释 main.vue <template> <transition name="msgbox-fade"> < ...

  7. HTTP 2.0 之压测工具 Jmeter

    年后,德国总部工业平台要做中国本地化,德国的同事过来给我们展示日志的时候,无意间看到了他们应用日志里的 HTTP/2,下意识到,原来他们都已经提供Http 2.0的服务了. 那么问题来了,除了h2lo ...

  8. sikuli 搜索例子

    #coding:utf-8kw = input(u"请输入您要搜索的关键字:")#openAPP('‪C:\Users\ceshi\AppData\Local\Google\Chr ...

  9. 关于setImageURI out of memory的一些解决办法

    http://stackoverflow.com/questions/477572/strange-out-of-memory-issue-while-loading-an-image-to-a-bi ...

  10. 【转】Spring的IOC原理(通俗易懂)

    1. IoC理论的背景 我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由Ñ个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑. 如果我们打开机械式手表的后盖,就会看到与上 ...