如何防止div元素滾動？

Question

我有一個包含p元素的div元素。 我控制了div的滾動位置（設置scrollTop屬性）和p的onclick事件。 問題在於，當我點擊ap然后按下向下箭頭或向上箭頭鍵時，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上的native preventDefault。

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