webextension开发：Firefox扩展弹窗鼠标滚轮控制横向滚动失效求助

问题核心原因 #

• document.getElementsByClassName('wrapper') 返回的是匹配类名的元素集合（HTMLCollection），不是单个DOM元素，直接访问 .scrollLeft 属于无效操作
• 缺少必要的CSS样式配置，容器未开启横向滚动能力
• Firefox高版本默认将wheel事件设为被动模式（passive），直接调用preventDefault会被拦截失效

修正方案 #

第一步：补充必要CSS配置

body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  /* 适配Firefox扩展弹窗最大宽度限制 */
  width: 600px;
}
.wrapper {
  /* 宽度匹配你要展示的1000px图片尺寸 */
  width: 1000px;
  overflow-x: auto;
  /* 隐藏滚动条如果有需要可以加这行 */
  /* scrollbar-width: none; */
}

第二步：修正JS代码

// 确保DOM加载完成后再执行逻辑，也可以直接把脚本放在body末尾
document.addEventListener('DOMContentLoaded', () => {
  const scroller = document.body;
  // 取集合中的第一个wrapper元素
  const wrapper = document.getElementsByClassName('wrapper')[0];

  scroller.addEventListener("wheel", (evt) => {
    evt.preventDefault();
    // 可调整系数1.2来控制滚动灵敏度，数值越大滚动越快
    wrapper.scrollLeft += evt.deltaY * 1.2;
  // 显式设置passive为false，允许调用preventDefault
  }, { passive: false });
})

可选优化 #

如果需要更顺滑的滚动效果，可以把scrollLeft赋值替换为scrollTo方法：

wrapper.scrollTo({
  left: wrapper.scrollLeft + evt.deltaY * 1.2,
  behavior: 'smooth'
})

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