编辑contenteditable div时阻止页面滚动

时间:2014-08-05 16:09:10

标签: javascript jquery html html5 google-chrome

请考虑以下示例,如下所示: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时箭头键不会滚动页面?

1 个答案:

答案 0 :(得分:0)

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

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

完成后,再次启用它:

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