编辑内容可编辑的div时防止页面滚动

Question

Consider the following example, as demonstrated here: http://jsfiddle.net/Up38n/

<div contenteditable="true" style="background-color: #ccf;">
    <p>This div is editable.</p>
</div>
<div style="background-color: #ccf; width: 2000px;">
    <p>This is a wide div that causes scrollbars.</p>
</div>

Click to edit the first paragraph, and then hold down the right arrow key. Initially the text cursor will move to the right as expected. However, when the text cursor hits the end of the paragraph, the whole page will scroll to the right and you will no longer be able to see what you're editing.

Is there a way to prevent this behavior so that the arrow keys don't scroll the page while editing a div?

Answer 1

You can temporarily disable the scroll for the document:

$(document).on('scroll touchmove mousewheel', function(e){
  e.preventDefault();
  e.stopPropagation();
  return false;
});

And when done, enable it again:

$(document).unbind('scroll touchmove mousewheel');