Microsoft Edge浏览器滚动后粘贴触发重复scroll事件求助

问题现象 #

在Microsoft Edge浏览器中，滚动div后执行粘贴操作时，scroll事件会被意外触发，但该问题在Chrome浏览器中不会出现。注意：当滚动位置处于div顶部或底部时，此问题不会发生。已通过监听Paste和scroll事件确认该现象。

复现步骤 #

• 复制一段文本
• 滚动目标div（确保滚动位置不在顶部或底部）
• 按下Ctrl+V将文本粘贴到div内除第一个和最后一个之外的任意input框中

复现代码 #

HTML #

<div id="scrollDiv">
  In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
  <br><br>
  <input onPaste="onPaste(event)" /> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
  <input onPaste="onPaste(event)" /> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
  <input onPaste="onPaste(event)" /> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
  <input onPaste="onPaste(event)" /> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
  <input onPaste="onPaste(event)" /> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
  <input onPaste="onPaste(event)" /> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
  <input onPaste="onPaste(event)" /> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
  <input onPaste="onPaste(event)" /> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
  <input onPaste="onPaste(event)" /> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
  <input onPaste="onPaste(event)" /> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
  <input onPaste="onPaste(event)" /> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
  <input onPaste="onPaste(event)" /> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
  <input onPaste="onPaste(event)" /> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
  <input onPaste="onPaste(event)" /> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
  <input onPaste="onPaste(event)" /> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
  <input onPaste="onPaste(event)" /> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'
</div>

CSS #

div {
  border: 1px solid black;
  width: 500px;
  height: 400px;
  overflow: scroll;
}

原始JS（可复现问题） #

let scrollDiv = document.getElementById("scrollDiv");

function onScrollFunc(event) {
  console.log("Scrolling", event);
}
scrollDiv.addEventListener("scroll", onScrollFunc);

function onPaste(event) {
  console.log("PASTED", event);
}

解决方案 #

这是Edge浏览器的行为bug，粘贴时浏览器可能会尝试调整滚动位置（即使视觉上无变化），从而误触发scroll事件。可以通过记录滚动位置，判断是否真的发生滚动来过滤无效触发：

修改后的JS代码 #

let scrollDiv = document.getElementById("scrollDiv");
// 保存上次滚动的位置
let lastScrollTop = scrollDiv.scrollTop;
let lastScrollLeft = scrollDiv.scrollLeft;

function onScrollFunc(event) {
  // 仅当滚动位置真的变化时，才执行业务逻辑
  if (scrollDiv.scrollTop !== lastScrollTop || scrollDiv.scrollLeft !== lastScrollLeft) {
    console.log("Scrolling", event);
    // 更新记录的滚动位置
    lastScrollTop = scrollDiv.scrollTop;
    lastScrollLeft = scrollDiv.scrollLeft;
  }
}
scrollDiv.addEventListener("scroll", onScrollFunc);

function onPaste(event) {
  console.log("PASTED", event);
}

方案说明 #

通过对比滚动容器的scrollTop和scrollLeft当前值与历史值，只有当两者不一致时，才判定为真实的滚动操作，执行对应的逻辑。这样就能彻底过滤掉Edge中粘贴操作导致的无实际滚动的scroll事件触发。

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