点击 layui select 触发页面滚动，是因为其 focus() 调用导致浏览器自动将聚焦元素滚动至视口中心；最轻量解法是用 requestAnimationFrame 在滚动前重置 scrollTop。
点击 layui select 下拉框时页面滚动，本质是下拉菜单（.layui-form-select dl）弹出后触发了浏览器默认的「聚焦滚动到可视区」行为，尤其在选项较多、菜单位置靠近视口边缘时更明显。这不是 bug，而是原生 select 和 layui 渲染逻辑共同导致的焦点管理副作用。
为什么 click select 会触发页面滚动？
layui 的 form.render('select') 会在点击时动态创建并显示下拉列表 dl，然后调用 focus() 到当前 select 元素上。浏览器为保障可访问性，会自动将聚焦元素滚动至视口中心——哪怕你只是点了一下，没做任何选择。
- 该行为在 Chrome/Firefox 中稳定复现，Safari 更激进（甚至轻微 hover 都可能触发）
- 如果
select在表格内、模态框中或靠近页面底部，滚动会非常明显且干扰操作 - 禁用
tabindex或移除focus()会破坏键盘导航和屏幕阅读器支持，不可取
最轻量解法：阻止 focus 后的自动滚动
不改 layui 源码、不破坏 a11y，只需在 form.on('select()') 外围加一层防滚动钩子：
form.on('select(status)', function(data) {
// 立即保存当前滚动位置
const scrollTop = $(window).scrollTop();
// 延迟一帧，在浏览器执行滚动前重置
requestAnimationFrame(() => {
$(window).scrollTop(scrollTop);
});
});
- 必须用
requestAnimationFrame，setTimeout可能错过时机 - 仅对触发
select事件的特定下拉框生效，不影响其他组件 - 若页面有横向滚动，同理加
scrollLeft保护
进阶控制：禁用下拉菜单自身的 focus 行为
真正源头在 layui 内部对 select 元素的 focus() 调用。可通过 patch 方式拦截（适用于全局统一处理）：
// 在 layui.use('form', ...) 之前执行
const originalFocus = HTMLElement.prototype.focus;
HTMLElement.prototype.focus = function(...args) {
if (this.tagName === 'SELECT' && $(this).closest('.layui-form-select').length) {
// 跳过 select 下拉触发时的 focus，保留键盘 tab 进入时的 focus
if (!event || event.type !== 'click') return originalFocus.apply(this, args);
return;
}
return originalFocus.apply(this, args);
};
- 该 patch 不影响用户按 Tab 键进入下拉框，只屏蔽鼠标点击引发的 focus
- 注意：此写法依赖全局
event对象，在严格模式或某些封装环境里需改用事件监听器中判断 - 若使用 webpack/vite，建议放在入口 JS 最顶部，确保早于 layui 加载
真正难处理的不是“怎么停滚动”，而是“怎么在不停滚动的同时不伤可访问性”。所有直接 preventDefault() 或移除 tabindex 的方案，都会让键盘用户无法用 ↑↓ 键操作下拉，也断掉屏幕阅读器的语义链——这点在政企系统里常被忽略，但上线后容易被合规审计卡住。
