Rails搜索框输入时<main>内容上移问题求助

以下是几个可行的排查和解决方向：

• 修正事件监听类型
  你之前用的onChange事件仅在输入框失去焦点时触发，实时输入场景应该监听input事件。同时，通过记录并恢复滚动位置来抵消异常滚动：

  document.querySelector('[name="s"]').addEventListener('input', function() {
    const main = document.querySelector('main');
    const currentScroll = main.scrollTop;
    // 若存在实时DOM更新，延迟恢复滚动位置确保生效
    setTimeout(() => {
      main.scrollTop = currentScroll;
    }, 0);
  });
  

• 禁用浏览器自动滚动聚焦行为
  部分浏览器会自动将聚焦元素滚动到可视区域，可通过CSS阻止锚定滚动：

  main {
    overflow-anchor: none;
  }
  

  也可以在输入框聚焦时阻止默认滚动行为：

  document.querySelector('[name="s"]').addEventListener('focus', function(evt) {
    evt.preventDefault();
  });
  

• 排查动态DOM更新导致的布局偏移
  如果输入时通过Turbo Stream或AJAX实时更新<main>内的内容，容器高度变化会触发滚动。可以在更新前后维护滚动位置：

  let mainScrollPos = 0;
  // 输入时记录滚动位置
  document.querySelector('[name="s"]').addEventListener('input', function() {
    mainScrollPos = document.querySelector('main').scrollTop;
  });
  // Turbo渲染完成后恢复滚动位置
  document.addEventListener('turbo:render', function() {
    const main = document.querySelector('main');
    main.scrollTop = mainScrollPos;
  });
  

• 固定

  的滚动容器
  通过CSS将<main>设置为独立滚动容器，避免页面整体滚动影响：

  body {
    overflow: hidden;
    height: 100vh;
  }
  main {
    height: calc(100vh - 80px); /* 替换为实际头部+footer的高度 */
    overflow-y: auto;
  }
  

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