Question

如果我将鼠标指向div标签，则可以进行滚动，但是如果将鼠标指向div框之外，则无法滚动内容。鼠标指针移到哪里可以定位到特定的div？

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

Answer 1

您可以执行以下操作。

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>

Answer 2

您可以自行注册活动。这样您就可以在div之外滚动所需的div。

如果您的页面有多个滚动条，那么这些操作将很麻烦。

顺便说一句，要使其更加美观，您需要添加动画，否则动画将“离散”移动，如下所示。

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>

Answer 3

是否有可能将鼠标指针移到特定的div？

并非如此……您可能要做的是将页面的其他部分设置为position: fixed或position: sticky。这样，主体内容将滚动，但某些部分将保留在同一位置。 Stack Overflow本身使用顶部标题和左侧边栏来完成此操作。

定位特定的div甚至在其外部滚动

3 个答案: