Question

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

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

观察到的行为：在Chrome中不起作用，在Firefox中运行良好。

HTML code：

<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会阻止所有操作，同时传递鼠标事件到可滚动容器。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Chrome错误与指针事件和鼠标滚动？

1 个答案: