代码之家 › 专栏 › 技术社区 › Ninja Warrior 11

以特定div为目标,甚至可以在其外部滚动

html jquery javascript

Ninja Warrior 11 · 技术社区 · 6 年前

如果我将鼠标指向div标记内,则可以滚动,但是如果我将鼠标指向div框外,则无法滚动内容。是否可以将鼠标指针指向任何特定div?

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

3 回复 | 直到 6 年前

Hikarunomemory Bhavana 6 年前

你可以这样做。

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>

MT-FreeHK 6 年前

你可以自己登记。以便您可以滚动 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>