当使用第三方嵌入式 sdk（如 sherpa 地图组件）时，页面常在组件挂载后自动滚动至该元素位置，尤其在 chrome 和 edge 中明显，而 firefox 行为正常；根本原因在于 sdk 内部存在未受控的 `focus()` 或 `scrollintoview()` 调用，且缺乏挂载完成回调，导致常规 dom 就绪钩子（如 `$(document).ready`）无法及时干预。
这种“意外滚动”并非由你的代码直接触发，而是第三方 SDK（如 widget.js）在初始化或挂载过程中主动调用了类似 element.focus()、element.scrollIntoView({ block: 'nearest' }) 或 window.scrollTo() 的行为。值得注意的是：
- 你尝试在 $(document).ready() 中强制滚动回顶部（如 scrollTop: $('#what').offset().top），但此时 Sherpa 组件可能尚未挂载，或其内部聚焦逻辑发生在更晚的异步阶段（例如 sdkLoaded 事件之后），因此你的滚动操作被后续 SDK 行为覆盖；
- defer 加载的脚本虽保证执行顺序，但不提供挂载完成通知，mount() 是异步操作，无 Promise 或回调支持，无法精准锚定干预时机。
✅ 推荐解决方案：使用 iframe 隔离嵌入内容
将 Sherpa 组件封装进独立的 <iframe> 中，是目前最可靠、兼容性最强的规避方案。iframe 提供了完整的渲染上下文隔离，外部页面无法被其内部脚本的 focus() 或滚动操作影响：
<!-- 替换原 div，使用 iframe --> <iframe src="/sherpa-embed.html" width="100%" height="600" frameborder="0" title="Sherpa Trip Map" loading="lazy" ></iframe>
并在 sherpa-embed.html 中放置精简的嵌入逻辑：
<!-- /sherpa-embed.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sherpa Embed</title>
<style>body { margin: 0; }</style>
</head>
<body>
<div id="sherpa-trip-element"></div>
<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 就绪后挂载（无需 jQuery）
window.addEventListener('sherpa:loaded', () => {
if (window.$sherpa?.V2) {
$sherpa.V2.createElement('map', elementConfig).mount('#sherpa-trip-element');
}
});
</script>
</body>
</html>⚠️ 注意事项：
- 确保 sherpa-embed.html 与主站同源（或配置 CORS/allow 属性），否则 iframe 可能受限；
- 若需与父页面通信（如响应用户操作），可使用 postMessage() 实现安全跨 iframe 通信；
- 避免在 iframe 内使用 window.scrollTo(0,0) 或 document.body.focus()，以防内部滚动污染；
- 不建议通过 scroll-behavior: smooth 或 scroll-anchor 等 CSS 方案 hack，因无法阻止底层 focus 触发的强制滚动。
总结：面对无源码、无回调、且存在隐式滚动行为的第三方嵌入 SDK，iframe 隔离是最符合 Web 标准、最稳定可控的工程实践。它不仅解决滚动问题，还提升了安全性与性能（支持 loading="lazy"），应作为嵌入式第三方组件的默认集成模式。
