编辑 contenteditable div 时防止页面滚动

Question

考虑以下示例，如下所示：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>

单击以编辑第一段，然后按住右箭头键。最初，文本光标将按预期向右移动。但是，当文本光标到达段落末尾时，整个页面将向右滚动，您将无法再看到正在编辑的内容。

有没有办法防止这种行为，以便在编辑 div 时箭头键不会滚动页面？

Answer 1

您可以暂时禁用文档的滚动：

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

完成后，再次启用它：

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