嵌入元素加载时页面意外滚动问题排查求助

问题原因 #

你遇到的情况是第三方Sherpa SDK在渲染地图组件时，可能自动聚焦了内部可交互元素（如输入框、按钮），或是调用了scrollIntoView()方法，导致页面滚动到该元素位置。原本的jQuery滚动代码执行时机早于SDK渲染完成时间，所以被后续SDK操作覆盖；仅Chrome/Edge出现问题，是因为不同浏览器对元素聚焦的滚动行为处理存在差异。

解决方案 #

1. 延迟滚动操作至SDK渲染完成后执行

修改onSherpaEvent函数，在组件挂载后等待一小段时间再执行滚动，确保SDK渲染操作完成：

const elementConfig = {
  language: 'en-US',
  trip: {
    originAirport: "RIX",
    destinationAirport: "TLL"
  },
  placement: '',
  features: {
    showFilters: true,
    showMapLegend: true,
  }
}

function onSherpaEvent(event) {
  if (event.type === 'sdkLoaded') {
    $sherpa.V2.createElement('map', elementConfig).mount('#sherpa-trip-element');
    // 等待组件渲染完成后执行滚动，可根据实际情况调整延迟时间
    setTimeout(() => {
      $('html, body').animate({
        scrollTop: $('#what').offset().top
      }, 'slow');
    }, 600);
  }
}

2. 阻止SDK内部元素的自动聚焦

监听目标容器内的元素插入事件，取消新添加元素的聚焦状态，避免触发滚动：

$(document).ready(function() {
  $('#sherpa-trip-element').on('DOMNodeInserted', function(e) {
    const insertedElement = e.target;
    // 针对可能触发聚焦的元素类型取消聚焦
    if (['INPUT', 'BUTTON', 'SELECT'].includes(insertedElement.tagName)) {
      insertedElement.blur();
    }
  });
});

3. 监听页面滚动并强制恢复目标位置

如果前两种方法无效，可监听页面滚动事件，当检测到页面滚动到嵌入元素位置时，强制滚回目标区域：

let isScrolling = false;

$(window).scroll(function() {
  if (isScrolling) return;
  
  const targetTop = $('#what').offset().top;
  const sherpaElementTop = $('#sherpa-trip-element').offset().top;
  const currentScrollTop = $(window).scrollTop();

  // 当滚动到嵌入元素附近时，强制滚回目标位置
  if (Math.abs(currentScrollTop - sherpaElementTop) < 150) {
    isScrolling = true;
    $('html, body').animate({
      scrollTop: targetTop
    }, 'slow', () => {
      isScrolling = false;
    });
  }
});

关键说明 #

• 优先尝试第一种方法，它直接调整滚动操作的执行时机，避免和SDK渲染操作冲突。
• 延迟时间可根据组件实际加载速度微调，确保SDK完成渲染后再执行滚动。
• 第二种方法针对聚焦触发的滚动，适合SDK内部存在自动聚焦逻辑的场景。

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