点击搜索时如何阻止列表发生滚动？

常见原因及对应解决方案 #

1. 表单提交触发默认行为导致滚动

如果你的搜索是通过表单提交触发的，浏览器默认的表单提交会引发页面刷新/跳转，进而导致滚动。只需在表单提交事件中阻止默认行为：

const searchForm = document.querySelector('form');
searchForm.addEventListener('submit', (e) => {
  e.preventDefault();
  // 执行你的搜索逻辑，比如过滤列表数据
  performSearch();
});

2. 浏览器滚动锚定导致自动滚动

搜索后列表内容重绘（比如过滤后元素高度变化）时，浏览器的滚动锚定机制会自动调整滚动位置，引发意外滚动。给列表容器添加CSS属性禁用该行为：

.list-container {
  overflow-anchor: none;
}

3. 元素焦点变化引发滚动

搜索操作若触发元素获取焦点（比如搜索输入框），浏览器会自动滚动到焦点元素位置。可以在事件中阻止焦点带来的滚动，或手动控制焦点：

const searchBtn = document.querySelector('.search-btn');
searchBtn.addEventListener('click', (e) => {
  e.preventDefault();
  // 执行搜索
  performSearch();
  // 若需聚焦输入框，可避免自动滚动：
  // searchInput.focus({ preventScroll: true });
});

4. 手动保存恢复滚动位置

如果以上方法不生效，可在搜索前记录当前滚动位置，搜索完成后恢复：

function performSearch() {
  // 记录滚动位置
  const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
  
  // 执行搜索过滤逻辑，更新列表
  // ...
  
  // 恢复滚动位置
  window.scrollTo(0, currentScroll);
}

根据你的代码场景，优先尝试禁用滚动锚定和阻止表单默认提交的组合方案，基本可以解决点击搜索时的列表滚动问题。

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