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
);

如何防止div元素滚动？

1 个答案: