嵌入表单引发页面反复滚动，如何阻止该异常滚动行为？

你之前用window.onbeforeunload的方法完全不对症——这个事件是页面即将卸载时触发的，和表单加载过程中的滚动异常没有关系。下面是几个针对性的解决方案：

1. 尝试给第三方脚本添加defer属性 #

defer会让脚本在DOM完全解析完成后再执行，避免脚本操作未渲染完成的页面导致滚动跳变。修改你的脚本标签：

<script src="https://us.smartthing.org/download/file.php?jsformat=1&amp;olx=1&amp;f=-js.html&amp;c=jfarthing@emilyk.org&amp;k=iE5RQ9H1VAAuapC" defer></script>

注意：defer只对外部脚本有效，且脚本会按顺序执行，不会阻塞DOM解析。

2. 临时锁定页面滚动，脚本加载完成后解锁 #

通过CSS锁定滚动，等第三方脚本加载完毕后恢复，避免加载过程中的滚动干扰：

/* 在<head>里添加样式 */
body.lock-scroll {
  overflow: hidden;
  height: 100vh;
  position: fixed;
  width: 100%;
}

// 在<body>末尾添加脚本
document.body.classList.add('lock-scroll');
const thirdPartyScript = document.querySelector('script[src="https://us.smartthing.org/download/file.php?jsformat=1&amp;olx=1&amp;f=-js.html&amp;c=jfarthing@emilyk.org&amp;k=iE5RQ9H1VAAuapC"]');

thirdPartyScript.onload = function() {
  // 恢复滚动
  document.body.classList.remove('lock-scroll');
  // 还原到之前的滚动位置
  const savedScrollY = parseInt(localStorage.getItem('savedScrollY') || '0');
  window.scrollTo(0, savedScrollY);
};

// 保存原滚动位置
localStorage.setItem('savedScrollY', window.scrollY.toString());

3. 拦截异常滚动行为 #

监听滚动事件，当检测到异常的滚动跳变时，强制恢复原位置：

// 在<head>里添加（或DOM加载完成后执行）
let lastScrollPosition = window.scrollY;
window.addEventListener('scroll', (e) => {
  // 设定阈值：如果滚动变化超过50px，判定为异常滚动
  if (Math.abs(window.scrollY - lastScrollPosition) > 50) {
    window.scrollTo(0, lastScrollPosition);
    e.preventDefault();
    e.stopPropagation();
  }
  lastScrollPosition = window.scrollY;
}, { passive: false });

4. 阻止表单元素自动聚焦 #

很多滚动异常是第三方脚本自动聚焦了内部表单元素导致的，通过捕获焦点事件阻止这种行为：

document.addEventListener('focus', (e) => {
  // 匹配第三方表单的元素（可根据实际DOM结构调整选择器）
  if (e.target.closest('[class*="SmartDONORCOVEROLX"]')) {
    e.preventDefault();
  }
}, { capture: true });

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