黑科技！两行代码完美解决：同时设置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"><imgclass="child"src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"/></div><div class="imgDiv"><imgclass="child"src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"/></div><div class="imgDiv"><imgclass="child"src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"/></div><div class="imgDiv"><imgclass="child"src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"/></div><div class="imgDiv"><imgclass="child"src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"/></div><div class="imgDiv"><imgclass="child"src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"/></div><div class="imgDiv"><imgclass="child"src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"/></div><div class="imgDiv"><imgclass="child"src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"/></div><div class="imgDiv"><imgclass="child"src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"/></div><div class="imgDiv"><imgclass="child"src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"/></div><div class="imgDiv"><imgclass="child"src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"/></div><div class="imgDiv"><imgclass="child"src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"/></div><div class="imgDiv"><imgclass="child"src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"/></div><div class="imgDiv"><imgclass="child"src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"/></div><div class="imgDiv"><imgclass="child"src="https://img1.gamersky.com/upimg/pic/2019/05/27/201905271412133676.jpg"/></div><div class="imgDiv"><imgclass="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

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

libcurl使用easy模式阻塞卡死等问题的完美解决---超时设置
libcurl使用easy模式阻塞卡死等问题的完美解决---超时设置参考文章: (1)libcurl使用easy模式阻塞卡死等问题的完美解决---超时设置 (2)https://www.cnblog ...
如何在Word里的字母上方添加特殊符号——“拼音指南”+“切换域代码”完美解决！
有时候我们为了在行文中加入一些希腊文字表示特定变量,同时要求在希腊文字上方插入一些特殊符号,为了解决随之出现的行间距变大问题,我们可以使用"拼音指南"+"切换域代码&qu ...
html百度转到顶部 fixed,科技常识：完美解决安卓端百度浏览器屏蔽fixed悬浮元素的问题...
今天小编跟大家讲解下有关完美解决安卓端百度浏览器屏蔽fixed悬浮元素的问题 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关完美解决安卓端百度浏览器屏蔽fixed悬浮元素的问题的相关资料 ...
完美解决 w10 设置个性化 wifi 无法打开的问题
1.系统文件扫描与修复命令若想要扫描并修复系统文件,可以直接在命令提示符窗口里输入[sfc /scannow]命令,该修复过程可能会比较长,请耐心等待. 修复完即可打开无需重启. 本人也是查看了网上 ...
imac 27寸安装 win 7 黑屏问题，完美解决办法！
才买的imac,为了玩星际2 beta装win7时没想到黑屏了!真是让人无语.在国外的网站看到也有人说这样的问题.其实是 win7的显卡和和imac 27的ati 不符不要去试安全模式之 ...
ACMNO.27 Python的两行代码解决 C语言-字符逆序写一函数。使输入的一个字符串按反序存放，在主函数中输入输出反序后的字符串。输入一行字符输出逆序后的字符串
题目描述写一函数,使输入的一个字符串按反序存放,在主函数中输入输出反序后的字符串. 输入一行字符输出逆序后的字符串样例输入 123456abcdef 样例输出 fedcba654321 来源 ...
【黑科技】百度快速收录快速提升网站权重
说起网站收录,网站权重,这些都所有站长共同关心的话题.最快的排名方法就是做好网站任何的细节优化,只有做好细节提升访客体验,才是网站优化本该做的事情,也才是长久之计.因此,快速排名是很多人比较关注的问题 ...
七夕新浪漫，让AI黑科技带你们提前看看爱情的结晶
关注公众号,发现CV技术之美七夕不知道如何表白?送花吃饭太没新意又太露骨? 今天小编给大家介绍一个AI黑科技,能够完美融合任意两张人脸,并带有丰富的表情,让你不仅凡尔赛地炫个技,还能巧妙风趣地表个白 ...
解决WordPress设置错误的url网站不能访问的问题
通过WordPress后台首选项更改了网站url地址之后,网站就会出现访问不了的情况,一般来说,网站后台也登陆不上去了,我从网上寻找到了四种方法,这四种方法前三种都是需要登陆到后台的,但实际上出错后, ...

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

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

最新文章

热门文章