有没有办法阻止 contentEditable 元素在光标到达底部时滚动？

例如，我有一个 contentEditable div，我可以在其中输入内容。当文本到达 div 底部时，浏览器会自动滚动 div，以便文本末尾和光标仍然可见。

如何防止 div 滚动，以便输入的文本超出 div 的底部，从而在键入时不再看到光标？

我想要实现的行为就像在 Photoshop 中一样：当您创建一个文本框并输入太多内容时，光标会继续越过框的底部，并且您看不到正在输入的内容。如果展开该框，您将看到所有隐藏的文本。

编辑 2/7/2012 9:27am:这就是我现在所拥有的，但它看起来有点问题，因为滚动位置是在 keyup 事件之后调整的：http://jsfiddle.net/trusktr/hgkak/6/ http://jsfiddle.net/trusktr/hgkak/6/因此，在 keyup 事件之前，光标会暂时置于视图中（对于每次击键）。我希望没有跳跃，并且当有多余的文本而视图没有跳跃时，光标保持在绿色 div 的末尾下方（跳跃对我来说似乎是一个业余黑客：D）

让我们尝试一下 hack：

• 首先我们尝试阻止或恢复任何滚动
• 每当用户按下一个键时，我们就会转动该元素的overflow财产给visible避免内容滚动，但同时通过设置其隐藏元素opacity到 0。之后我们立即切换overflow回到hidden并再次显示该元素。
• 为了避免闪烁，我们创建可编辑元素的克隆（使用overflow: hidden）并显示该元素，同时隐藏原始元素。

我们开始吧（为了方便 DOM 使用 jQuery）：

$(function() {

    var editableElement = $('#editable'), clonedElement;

    // Revert any scrolling                    
    editableElement.on("scroll", function(event) {
        editableElement.scrollTop(0);

        // Try to prevent scrolling completely (doesn't seem to work)
        event.preventDefault();
        return false;
    });

    // Switch overflow visibility on and off again on each keystroke.
    // To avoid flickering, a cloned element is positioned below the input area
    // and switched on while we hide the overflowing element.
    editableElement.on("keydown", function() {

        // Create a cloned input element below the original one
        if (!clonedElement) {
            var zIndex = editableElement.css('zIndex');
            if (isNaN(parseInt(zIndex, 10))) {
                zIndex = 10;
                editableElement.css({zIndex: zIndex});
            }    

            clonedElement = editableElement.clone();
            clonedElement.css({
                zIndex: zIndex-1,
                position: 'absolute',
                top: editableElement.offset().top,
                left: editableElement.offset().left,
                overflow: 'hidden',
                // Set pseudo focus highlighting for webkit
                // (needs to be adapted for other browsers)
                outline: 'auto 5px -webkit-focus-ring-color'
            });
            editableElement.before(clonedElement);
        } else {
            // Update contents of the cloned element from the original one
            clonedElement.html(editableElement.html());
        }

        // Here comes the hack:
        //   - set overflow visible but hide element via opactity.
        //   - show cloned element in the meantime
        clonedElement.css({opacity: 1});
        editableElement.css({overflow: 'visible', opacity: 0});

        // Immediately turn of overflow and show element again.
        setTimeout(function() {
            editableElement.css({overflow: 'hidden', opacity: 1});
            clonedElement.css({opacity: 0});
        }, 10);

    });
});

Check 这个jsFiddle http://jsfiddle.net/green/GRvgd/来玩上面的代码。

请注意，这可能不是一个完整的解决方案（我只在 Safari、Chrome 和 Firefox 上尝试过），但对于经过测试的浏览器来说，它似乎有效。您可能需要微调和完善您的实现（例如焦点突出显示）。在 jsFiddle 示例中，我还关闭了拼写检查以避免标记闪烁。