不废话，直接上代码

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <style>
  5.       body {
  6.         padding: 0;
  7.         margin: 0;
  8.         height: 800px;
  9.         display: flex;
  10.         justify-content: center;
  11.         align-items: center;
  12.       }
  13.       .parent {
  14.         width: 80vw;
  15.         height: 200px;
  16.         background-color: aqua;
  17.         display: flex;
  18.         align-items: center;
  19.       }
  20.       .wrapper {
  21.         width: 100%;
  22.         display: flex;
  23.         align-items: center;
  24.         overflow-x: hidden;
  25.         overflow-y: visible;
  26.         padding: 500px 0; /*极为重要的两行代码 */
  27.         margin: -500px 0; /* 具体值可以根据实际情况调整 */
  28.       }
  29.  
  30.       .imgDiv {
  31.         padding-left: 50px;
  32.       }
  33.  
  34.       .child {
  35.         width: 70px;
  36.         height: 100px;
  37.       }
  38.  
  39.       .child:hover {
  40.         transform: scale(4, 4);
  41.       }
  42.     </style>
  43.   </head>
  44.   <body>
  45.     <div class="parent">
  46.       <div class="wrapper">
  47.         <div class="imgDiv">
  48.           <img
  49.             class="child"
  50.             src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
  51.           />
  52.         </div>
  53.         <div class="imgDiv">
  54.           <img
  55.             class="child"
  56.             src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
  57.           />
  58.         </div>
  59.         <div class="imgDiv">
  60.           <img
  61.             class="child"
  62.             src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
  63.           />
  64.         </div>
  65.         <div class="imgDiv">
  66.           <img
  67.             class="child"
  68.             src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
  69.           />
  70.         </div>
  71.         <div class="imgDiv">
  72.           <img
  73.             class="child"
  74.             src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
  75.           />
  76.         </div>
  77.         <div class="imgDiv">
  78.           <img
  79.             class="child"
  80.             src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
  81.           />
  82.         </div>
  83.         <div class="imgDiv">
  84.           <img
  85.             class="child"
  86.             src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
  87.           />
  88.         </div>
  89.         <div class="imgDiv">
  90.           <img
  91.             class="child"
  92.             src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
  93.           />
  94.         </div>
  95.         <div class="imgDiv">
  96.           <img
  97.             class="child"
  98.             src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
  99.           />
  100.         </div>
  101.         <div class="imgDiv">
  102.           <img
  103.             class="child"
  104.             src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
  105.           />
  106.         </div>
  107.         <div class="imgDiv">
  108.           <img
  109.             class="child"
  110.             src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
  111.           />
  112.         </div>
  113.         <div class="imgDiv">
  114.           <img
  115.             class="child"
  116.             src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
  117.           />
  118.         </div>
  119.         <div class="imgDiv">
  120.           <img
  121.             class="child"
  122.             src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
  123.           />
  124.         </div>
  125.         <div class="imgDiv">
  126.           <img
  127.             class="child"
  128.             src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
  129.           />
  130.         </div>
  131.         <div class="imgDiv">
  132.           <img
  133.             class="child"
  134.             src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
  135.           />
  136.         </div>
  137.         <div class="imgDiv">
  138.           <img
  139.             class="child"
  140.             src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"
  141.           />
  142.         </div>
  143.       </div>
  144.     </div>
  145.   </body>
  146. </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. C# - VS2019WinFrm程序通过SMTP方式实现邮件发送

    前言 本篇主要记录:VS2019 WinFrm桌面应用程序通过SMTP方式实现邮件发送.作为Delphi转C#的关键一步,接下来将逐步实现Delphi中常用到的功能. 准备工作 搭建WinFrm前台界 ...

  2. SQLAlchemy多表操作

    目录 SQLAlchemy多表操作 一对多 数据准备 具体操作 多对多 数据准备 操作 其它 SQLAlchemy多表操作 一对多 数据准备 models.py from sqlalchemy.ext ...

  3. Asp.Net MVC控制器获取视图传值几种方式

    前台表单(V:视图) @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="v ...

  4. electron——初探

    是什么? Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时 ...

  5. 011.maven 继承与聚合

    聚合:对于聚合模块来说,它知道有哪些被聚合的模块,而对于被聚合的模块来说,它们不知道被谁聚合了,也不知道它的存在: 继承:对于继承关系的父POM来说,它不知道自己被哪些子模块继承了,对于子POM来说, ...

  6. Echarts 柱状图组

    通过Echarts可以实现柱状图组,如下图:是一个学生三次模考成绩对比结果 源码 <!DOCTYPE html> <html> <head> <meta ch ...

  7. 编译一个支持django及mysqlclient连接的alpine镜像

    一切都不难,难的就是在alpine镜像里. 最后,使用了网上编译好mysqlclient的镜像,才搞定. 记录一下. 一,基础镜像Dockerfile https://github.com/tnir/ ...

  8. 如何使用jmockit进行单元测试

    1. Jmockit简介 JMockit 是用以帮助开发人员编写测试程序的一组工具和API,它完全基于 Java 5 SE 的 java.lang.instrument 包开发,内部使用 ASM 库来 ...

  9. JMockit学习笔记

    一.在eclipse下建立JMockit工程 1.下载最新版JMockit(jmockit-1.4.zip): 2.解压后的文件夹包含有:library jars, source files, sam ...

  10. c# 第19节 Arraylist数组

    本节内容: 1:ArrayList是什么 2:ArrayList数组的添加 3:ArrayList的方法 4:ArrayList 的删除 4:ArrayList 的遍历与查找 1:ArrayList是 ...