如何防止 div 元素滚动？

Question

我有一个包含 p 元素的 div 元素。 我控制了 div 的滚动位置（设置 scrollTop 属性）和 p 的 onclick 事件。 问题在于，当我单击 p 然后按向下箭头或向上箭头键时，div 在我滚动后会自动滚动。 div 没有焦点，没有设置 onkeydown 或 onkeypress 事件...

这是一个代码示例，您可以在其中应用您的解决方案。在我点击一个 p 之后，我需要阻止 div 在按键事件上滚动（向上和向下箭头）。

<div style="height: 60px; overflow: auto; border: 1px solid black">
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
<p>Line 4</p>
<p>Line 5</p>
<p>Line 6</p>
</div>

Answer 1

浏览器会为您滚动。你想要的是在它们到达浏览器之前捕获导致滚动的事件，然后取消它们。

您可以捕获 keydown/keyup/keypress 事件，并在事件处理程序中执行（假设为 jQuery）

$("div p").on("keydown", function(event) {
    event.stopPropagation();
    event.preventDefault();
});

见http://api.jquery.com/on

如果您不想使用 jQuery，请在 https://developer.mozilla.org/en-US/docs/DOM/event.preventDefault 处查看原生 preventDefault，它的工作原理类似于

document.getElementById('someId').addEventListener(
    'keyup', function(evt) { evt.preventDefault(); }, false
);