编辑内容可编辑的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');