自定义contenteditable粘贴事件后内容溢出无法自动滚动如何解决

开发过程中使用<div contenteditable></div>元素时，为清除粘贴内容携带的所有格式，重写了该元素的默认paste事件，初始实现代码如下：

document.querySelector("div[contenteditable]").addEventListener("paste", function(event) {
    event.preventDefault();
    document.execCommand("insertText", false, event.clipboardData.getData("text/plain"));
});

上述代码可正常实现粘贴纯文本、移除原有格式的需求，但存在交互缺陷：当粘贴的内容长度超出当前滚动可视区域范围时，页面不会自动向下滚动，需要用户手动滚动才能查看后续粘贴的内容，问题效果参考演示动图：

尝试实现滚动到光标所在位置的效果时，由于光标不属于常规DOM元素，不清楚具体实现方法，现提供可行解决方案如下：

核心思路是通过原生Selection API获取光标对应的Range对象，直接调用原生滚动方法定位到光标位置，不需要手动计算坐标。

方案1：最小改动修复现有代码 #

不需要替换原有execCommand逻辑，只需要在插入文本后加几行滚动逻辑即可，改动成本最低：

document.querySelector("div[contenteditable]").addEventListener("paste", function(event) {
    event.preventDefault();
    const pasteText = event.clipboardData.getData("text/plain");
    document.execCommand("insertText", false, pasteText);
    
    // 获取当前光标选区
    const currentSelection = window.getSelection();
    if (currentSelection.rangeCount) {
        const cursorRange = currentSelection.getRangeAt(0);
        // 滚动到光标位置，nearest参数对齐原生粘贴的滚动体验
        cursorRange.scrollIntoView({ block: 'nearest' });
    }
});

注意：scrollIntoView的block参数务必传nearest，不要用start/end，否则会出现无论光标在哪都强制滚动到视口顶部/底部的突兀效果，nearest只会在光标超出可视范围时才触发滚动，刚好把光标位置完整露出，和浏览器原生编辑的滚动行为完全一致。

方案2：基于标准API实现（推荐，无废弃API依赖） #

document.execCommand目前已被Web标准标记为废弃，不推荐在新项目中使用，可以直接用Range + Selection API实现纯文本插入，逻辑更可控：

document.querySelector("div[contenteditable]").addEventListener("paste", function(event) {
    event.preventDefault();
    const pasteText = event.clipboardData.getData("text/plain");
    const currentSelection = window.getSelection();
    if (!currentSelection.rangeCount) return;

    // 处理粘贴前选中了文本的场景，先删除选中内容
    currentSelection.deleteFromDocument();
    const cursorRange = currentSelection.getRangeAt(0);
    
    // 插入纯文本节点
    const textNode = document.createTextNode(pasteText);
    cursorRange.insertNode(textNode);

    // 将光标移动到插入内容的末尾，还原正常编辑的光标位置
    cursorRange.setStartAfter(textNode);
    cursorRange.collapse(true);
    currentSelection.removeAllRanges();
    currentSelection.addRange(cursorRange);

    // 自动滚动到光标位置
    cursorRange.scrollIntoView({ block: 'nearest' });
});

• 兼容所有现代浏览器，无API废弃风险
• 覆盖粘贴前选中内容的边界场景，和原生编辑行为完全对齐
• 滚动体验自然，无多余跳动

内容的提问来源于stack exchange，提问作者Nemalp