移动端软键盘关闭导致scrollIntoView失效问题求助

问题根源 #

移动端Chrome中，点击搜索结果时软键盘自动收起，这个过程会触发浏览器视口高度重新计算，而该计算是异步完成的。你的scrollIntoView是同步执行的，此时浏览器还没完成视口调整，导致滚动位置计算错误，最终滚动失效。

解决思路 #

• 延迟执行滚动操作
  给浏览器足够时间完成软键盘收起和视口更新，用setTimeout包裹scrollIntoView，延迟时间建议100-300ms（可根据实际情况调整）：

  function searchBarSelectProduct(itemCode) {
    // Hide the results container
    let searchResultContainerElement = document.getElementById("searchBarResultsContainer");
    searchResultContainerElement.classList.add("hidden");
  
    // Unhide the item entry further down the page, then ScrollIntoView 
    let itemCard = document.getElementById("itemCard-" + itemCode);
    itemCard.classList.remove("hidden");
    
    // 延迟执行滚动，等待视口稳定
    setTimeout(() => {
      itemCard.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});
    }, 200);
  }
  

• 监听视口变化事件触发滚动
  利用visualViewport API（专门针对移动端视口变化），在视口尺寸稳定后执行滚动，比单纯延迟更精准：

  function searchBarSelectProduct(itemCode) {
    let searchResultContainerElement = document.getElementById("searchBarResultsContainer");
    searchResultContainerElement.classList.add("hidden");
  
    let itemCard = document.getElementById("itemCard-" + itemCode);
    itemCard.classList.remove("hidden");
  
    // 监听视口resize事件，完成后执行滚动
    const handleViewportResize = () => {
      itemCard.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});
      // 执行后移除监听，避免重复触发
      window.visualViewport.removeEventListener('resize', handleViewportResize);
    };
  
    window.visualViewport.addEventListener('resize', handleViewportResize);
    // 兜底：立即执行一次，防止未触发resize的情况
    handleViewportResize();
  }
  

• 主动让输入框失焦后再滚动
  主动调用输入框的blur()方法触发软键盘收起，再配合延迟执行滚动，确保流程可控：

  function searchBarSelectProduct(itemCode) {
    // 主动让搜索栏失焦，触发软键盘收起
    document.getElementById("searchBar").blur();
  
    let searchResultContainerElement = document.getElementById("searchBarResultsContainer");
    searchResultContainerElement.classList.add("hidden");
  
    let itemCard = document.getElementById("itemCard-" + itemCode);
    itemCard.classList.remove("hidden");
  
    setTimeout(() => {
      itemCard.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});
    }, 200);
  }
  

• 等待元素渲染完成后滚动
  如果目标元素之前是display:none状态，刚移除hidden类后可能还没完成渲染，用requestAnimationFrame等待元素重绘完成，再配合延迟：

  function searchBarSelectProduct(itemCode) {
    let searchResultContainerElement = document.getElementById("searchBarResultsContainer");
    searchResultContainerElement.classList.add("hidden");
  
    let itemCard = document.getElementById("itemCard-" + itemCode);
    itemCard.classList.remove("hidden");
  
    // 等待元素完成渲染
    requestAnimationFrame(() => {
      setTimeout(() => {
        itemCard.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});
      }, 100);
    });
  }
  

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