极客观点
项目管理
HarmonyOS
题目描述
当pointer-event设置为none的时候：滚动穿透不彻底
题目来源及自己的思路
1.在Chrome模拟器下，会出现在不同分辨率下可触发滚动区域的不同；
2.当元素在可视区域最左边的时候，元素滚动没问题
3.模拟器设置100%的时候也没有问题
4.当打开Chrome模拟器，切换到「自适应」下，比如说指定：1920*1080下的尺寸下，这时候如果显示比例为100%的时候，滚动区域不会有问题，如果切换别的显示比例，滚动区域就会有问题，存在部分区域被遮挡，无法触发滚动
相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta content="no" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<title>滚动测试</title>
<style>
.container {
position: absolute;
left: 50%;
top: 10%;
width: 300px;
height: 700px;
/* overflow: hidden; */
/* background: yellowgreen; */
}
.shadow {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
/* float: left; */
width: 300px;
height: 700px;
background: rgba(0,0,0,0.1);
z-index: 2;
pointer-events: none;
}
.scroll-container {
position: relative;
width: 300px;
height: 700px;
z-index: 1;
overflow-y: scroll;
pointer-events: auto;
}
.content {
height: 900px;
background: red;
}
</style>
</head>
<body>
<div class="container">
<div class="shadow"></div>
<div class="scroll-container">
<div class="content">
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
<p>测试文字</p>
</div>
</div>
</div>
</body>
</html>你期待的结果是什么？实际看到的错误信息又是什么？
虽然已经换了别的方法来解决，但是不知道造成这个的问题的原因是什么？
html5
chrome
你得清楚的描述出来这个DEMO出现的问题点是什么。
具体是哪些“别的情况”下。
如果说你的
Chrome设备模拟器的情况下缩放200%时出现的无法滚动问题的话。看起来像是chromium内核的一个BUG（MSEdge可复现，FireFox是无法复现这个问题的）。没有正确获取到目标DOM节点，看起来像是pointer-events: none没有完全生效（点击穿透是有有效的）。这个BUG暂时还没有看到反馈，可能是因为你这个场景太奇怪了，不过你倒是可以去反馈一下。