Передайте события прокрутки через canvas в div ниже

Question

Я хочу, чтобы текст прокручивался по вертикали, независимо от того, находится ли указатель сверху серой области (контейнерный блок) или красной области (элемент canvas сверху).В настоящее время холст предотвращает распространение событий прокрутки ниже.Есть ли решение только для 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 в классе .container, а затем вам нужно будет добавить pointer-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>