当父级在移动设备上有“pointer-events: none”时,具有“pointer-events: auto”的子 div 不会收到任何事件。同样的事情在桌面浏览器上完美运行。这是为什么?
这是我的设置:
HTML
<div class="top">
<div class="top-content">
<p>top content</p>
</div>
</div>
<div class="bottom">
<div class="bottom-content-positioning-helper"></div>
<div class="bottom-content">
<p>bottom content</p>
</div>
</div>
CSS
.top {
width: 100%;
height: 300px;
position: absolute;
left: 0;
top: 0;
right: 0;
z-index: 500;
overflow: auto;
}
.top-content {
background-color: red;
width: 100%;
height: 600px;
text-align: center;
}
.bottom {
position: absolute;
top: 150px;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
overflow: auto;
pointer-events: none;
}
.bottom-content-positioning-helper {
background-color: yellow;
width: 100%;
height: 150px;
display: inline-block;
vertical-align: top;
opacity: 0.5;
pointer-events: none;
}
.bottom-content {
background-color: green;
width: 100%;
text-align: center;
display: inline-block;
vertical-align: top;
pointer-events: auto;
}
“顶部”和“底部”的两个父 div 垂直堆叠。两者都有一个嵌套在内部的内容 div,其高度大于其父级。由于 parent 双方也有“溢出:自动”,他们滚动他们的内容。到这里为止没什么特别的。
当滚动“bottom-content”时,它覆盖“top”直到它的中间,然后裁剪任何进一步的滚动。 为了仍然能够在“top”的下半部分使用光标滚动“top-content”(而“bottom-content”在滚动位置 0),“pointer-events: none”和“auto”用于“底部”和“底部内容”。
Please check out my JSFiddle以便更好地了解这里发生的事情。
在桌面浏览器上一切正常。但在手机上完全没有。我测试了一下:
在 iOS 和 android 上的 cordova 应用程序中
在 iOS 上的 chrome 和 safari 上
在 android 上的 chrome
在移动设备上,“bottom-content”没有滚动,因为它没有接收到任何事件。尽管如此,它被明确告知要使用“pointer-events: auto”...
非常感谢任何提示!
最佳答案
好吧,我仍然不知道为什么会这样,但我找到了解决方法。我现在读取“底部”元素上的触摸事件,并通过 javascript 将它们重新应用到 THE SAME 元素的 scrollTop() 属性。这听起来有点奇怪,因为这应该是自己发生的,但它完全有效!而且性能影响很小。
var lastScrollTop = 0;
var startY;
$(".bottom-content").on("touchstart", function(e){
//necessary for mobile browsers
startY = e.originalEvent.touches[0].clientY;
lastScrollTop = $(".bottom").scrollTop();
});
$(".bottom-content").on("touchmove", function(e){
//necessary for mobile browsers
var currentY = e.originalEvent.touches[0].clientY;
var scrollDistance = startY - currentY;
$(".bottom").scrollTop(scrollDistance + lastScrollTop);
e.preventDefault();
});
Here's the updated JSFiddle.确保再次在桌面和移动设备上检查它!
关于android - 指针事件 : "auto" in child element not reversing parents "none" on mobile,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35207568/