带有指针事件和鼠标滚动的 Chrome 错误？

Question

小提琴重现：调整大小直到出现垂直滚动条：http : //jsfiddle.net/yxf1v60x/2/embedded/result/

预期行为：鼠标滚轮在黄色区域上使用时滚动。

观察到的行为：在 Chrome 中不起作用，在 Firefox 中工作正常。

---

HTML代码：

<div class="parent"><input /><div class="child"><div class="subChild"><input /></div></div></div>

CSS代码：

html,body{

  overflow:hidden;
  height: 100%;
  width: 100%;
}
.parent {
  pointer-events:none;        
  position: absolute;
  z-index:10;
  top:0px;
  left:0;
  right:0;
  bottom:0px;
  background-color:#ff0000;
  height: auto;
  overflow-y:auto;
}
.child {
    pointer-events:auto;
    position: absolute;
    z-index:11;
    top:50px;
    left:0;
    right:0;
    bottom: 0;
    max-height: 100%;
    background-color:#0000FF;
}
.subChild{
    height: 500px;
    background-color:yellow;
    width: 100%;
  }
}

---

所以我不确定这里发生了什么：指针事件显然适用于黄色区域，因为相关的输入元素是可点击的。通过键盘滚动也可以（尝试向上/向下翻页，重点放在黄色区域）。

a) 这是 Chrome 的错误吗？

b) 我可以在保持父子绝对定位的同时避免它吗？我不希望在父元素上有指针事件。

Answer 1

发生了什么：该overflow-y属性及其滚动功能位于pointer-events: none父级上。

Firefox 似乎以这种方式处理指针事件：

如果元素的子元素之一的指针事件显式设置为允许该子元素成为鼠标事件的目标，则当事件沿着父链传播时，任何针对该子元素的事件都将通过父元素，并触发父元素上的事件侦听器。父母酌情。
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

虽然 Chrome不会在具有pointer-events: none. 这实际上可能是一个错误，您可以/应该尝试报告它。接得好！

将属性移动overflow-y到容器可能是解决方案，只要在父级上滚动就可以，因为父级pointer-events: none会阻止其自身的所有操作，同时将鼠标事件传递到可滚动容器。

html,
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
}

.parent {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background-color: #f00;
}

.child {
  position: absolute;
  z-index: 11;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: 100%;
  pointer-events: auto;
  background-color: #00f;
}

.subChild {
  width: 100%;
  height: 500px;
  background-color: yellow;
}

<div class="container">
  <div class="parent">
    <input />
    <div class="child">
      <div class="subChild">
        <input />
      </div>
    </div>
  </div>
</div>