css - 通过画布将滚动事件传递到下面的 div

Question

无论指针位于灰色区域（容器 div）还是红色区域（顶部的画布元素），我都希望文本垂直滚动。目前画布阻止滚动事件在下面传播。是否有唯一的 CSS 解决方案？

请参阅codepen和下图。

这是我的代码：

<div class="container">
  <div class="content">
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
  </div>
  <canvas class="overlay">
  </canvas>
</div>

.container {
    background: #CCCCCC;
    width: 200px;
    height: 200px;
    position: relative;
    border: 4px black solid;
}
.content {
    width: 100%;
    height: 100%;
    overflow: scroll;
}
.overlay {
    border:1px solid black;
    background: rgba(255,0,0,0.5);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left:0;
    height: 150px;
    width: 150px;
}

Answer 1

你可能会避免它，而不是解决问题。在以下示例中，我pointer-events:none仅在wheel. 这将允许您滚动画布。但是，只要您单击container我正在删除画布的内联样式。或者我可以写test.style.pointerEvents = "initial"

test.addEventListener("wheel", ()=>{
  test.style.pointerEvents = "none";
  console.log("w")
})

container.addEventListener("click",(evt)=>{test.style.cssText = "";
                                      console.log(oMousePos(test, evt))})

function oMousePos(elmt, evt) {
      var ClientRect = elmt.getBoundingClientRect();
                return { //objeto
                x: Math.round(evt.clientX - ClientRect.left),
                y: Math.round(evt.clientY - ClientRect.top)
      }
}

.container {
    background: #CCCCCC;
    width: 200px;
    height: 200px;
    position: relative;
    border: 4px black solid;
}
.content {
    width: 100%;
    height: 100%;
    overflow: scroll;
}
.overlay {
    border:1px solid black;
    background: rgba(255,0,0,0.5);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left:0;
    height: 150px;
    width: 150px;
  pointer-events:auto;
}

<div class="container" id="container">
  <div class="content">
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
  </div>
  <canvas class="overlay" id="test">
  </canvas>
</div>

Answer 2

你是如此接近。

您需要在课程上设置position为，然后您需要添加到您的课程中。这就是诀窍。fixed.containerpointer-events: none;.overlay

见下文：

.container {
    background: #CCCCCC;
    width: 200px;
    height: 200px;
    position: fixed;
    border: 4px black solid;
}
.content {
    width: 100%;
    height: 100%;
    overflow: scroll;
}
.overlay {
    border:1px solid black;
    background: rgba(255,0,0,0.5);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left:0;
    height: 150px;
    width: 150px;
    pointer-events: none;
}

<div class="container">
  <div class="content">
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
  </div>
  <canvas class="overlay">
  </canvas>
</div>