javascript - Rikta in sig på en specifik div för att scrolla även utanför den

Om jag pekar musen inom div-taggen fungerar rullningen, men jag kan inte rulla innehållet om jag pekar musen utanför div-rutan. Är det möjligt att rikta in sig på en specifik div var muspekaren än går?

<div style="max-height: 100px;overflow-y: scroll;">
  TEST<br><br><br><br><br><br><br><br><br><br>
</div>

Svar #1

Du kan göra något liknande detta.

const target = document.getElementById("target");

document.addEventListener("wheel", function(e){
  // prevent the default scrolling event
  e.preventDefault();

  // scroll the div
  target.scrollBy(e.deltaX, e.deltaY);
})

#target{
  height: 100px;
  overflow-y: scroll;
}

<div id="target">
  TEST<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

Svar #2

Du kan registrera händelsen själva. Så att ni kan scrolla den div ni vill utanför div.

Detta kommer att vara tråkigt för dig att hantera om din sida har flera rullningslistor.

Förresten, för att göra det lite snyggare behöver du lägga till animation annars kommer det att röra sig 'diskret' som visas här.

document.getElementById("scroll").addEventListener("wheel", e=>e.preventDefault());
document.getElementById("main").addEventListener("wheel", e=>myFunction(e));

function myFunction(e) {
    document.getElementById("scroll").scrollTop += 0.2 * e.deltaY;
}

<div id="main" style="height:300px">
<div id="scroll" style="max-height: 100px;overflow-y: scroll;">
  TEST<br><br><br><br><br><br><br><br><br><br>
</div>
</div>