当使用 sherpa 等第三方 sdk 动态挂载嵌入式元素（如地图组件）时，浏览器（尤其是 chrome/edge）常因自动聚焦或内部 scrollintoview 行为导致页面跳转至该元素位置——firefox 因行为差异暂不复现。本文提供根本性解决方案：用 iframe 隔离第三方脚本，彻底阻断其对主文档滚动的干扰。
该问题的本质并非前端逻辑错误，而是第三方 SDK（如 Sherpa Widget）在 mount() 过程中主动调用了滚动相关 API（例如 element.focus()、scrollIntoView() 或 window.scrollTo()），且这些调用发生在 DOM 就绪后、用户无感知的时机。值得注意的是：
- $(document).ready() 和 sdkLoaded 事件均晚于浏览器默认聚焦/滚动行为的触发点；
- jQuery 的 scrollTop 强制回滚无法覆盖 SDK 内部高频、同步的滚动指令；
- Chrome/Edge 默认启用更激进的“可聚焦元素自动滚动”策略，而 Firefox 未实现该行为，故表现不一致。
✅ 推荐方案：使用沙箱化 iframe 封装第三方组件
将 Sherpa 组件完全隔离在独立上下文中，使其无法访问父页面 window、document 或触发主文档滚动：
<!-- 主页面：移除直接引入的 widget.js --> <div id="what">What</div> <br>some content...<br> <iframe src="/sherpa-embed.html" width="100%" height="500" frameborder="0" sandbox="allow-scripts allow-same-origin" ></iframe>
新建 sherpa-embed.html（同域下）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sherpa Embed</title>
<style>body { margin: 0; padding: 0; }</style>
</head>
<body>
<div id="sherpa-trip-element"></div>
<!-- 在 iframe 内独立加载 SDK -->
<script src="https://sdk-sandbox.joinsherpa.io/widget.js?appId=sxM5NjIzNz"></script>
<script>
const elementConfig = {
language: 'en-US',
trip: { originAirport: "RIX", destinationAirport: "TLL" },
placement: '',
features: { showFilters: true, showMapLegend: true }
};
// 确保 SDK 加载完成后再挂载
window.addEventListener('sherpa:loaded', () => {
sherpa.V2.createElement('map', elementConfig).mount('#sherpa-trip-element');
});
</script>
</body>
</html>⚠️ 关键注意事项
- sandbox 属性必须包含 allow-scripts（运行 JS）和 allow-same-origin（允许同源通信，便于后续扩展）；若跨域，请改用 postMessage 双向通信；
- 确保 sherpa-embed.html 与主站同域（或配置 CORS），否则 sandbox="allow-same-origin" 无效；
- 不要再在主页面重复引入 widget.js 或绑定 onSherpaEvent —— 所有第三方逻辑应严格限定在 iframe 内；
- 若需响应 iframe 内事件（如用户点击地图），通过 window.parent.postMessage() 向外通信，并在主页面监听 message 事件。
? 延伸建议
若 iframe 方案受限（如 SEO 或样式穿透需求），可尝试临时禁用滚动检测（仅作临时缓解）：
// 在主页面 document.head 中注入（早于 widget.js 加载）
const style = document.createElement('style');
style.textContent = `
* { scroll-behavior: auto !important; }
html { scroll-behavior: auto !important; }
`;
document.head.appendChild(style);但此法治标不治本，仍可能被 SDK 内联样式或 JS 覆盖。iframe 是目前最稳定、符合 Web 标准的隔离方案。
