如何让全屏可滚动背景图不受鼠标位置限制实现全局滚动？

方法一：JS事件同步滚动 #

给底部的div绑定鼠标滚轮事件，把滚动动作同步到背景图容器上，就能实现鼠标在底部区域也能滚动背景图。

示例代码：

// 替换成你实际的DOM选择器
const bgContainer = document.querySelector('.bg-container');
const bottomDiv = document.querySelector('.bottom-div');

bottomDiv.addEventListener('wheel', (e) => {
  e.preventDefault();
  // 同步垂直滚动
  bgContainer.scrollTop += e.deltaY;
  // 如果需要横向滚动，加上下面这行
  // bgContainer.scrollLeft += e.deltaX;
});

方法二：CSS调整布局让背景图容器成为全局滚动体 #

通过CSS让背景图容器占满整个视口并成为滚动容器，同时让底部div不拦截滚动事件（如果底部有交互元素，单独给这些元素恢复事件响应）。

示例代码：

/* 背景图容器 */
.bg-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  /* 背景图相关样式，根据你的需求调整 */
  background-image: url('你的背景图路径');
  background-size: cover;
  background-repeat: repeat-y;
}

/* 底部div */
.bottom-div {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #fff;
  /* 让底部div不阻挡滚动事件 */
  pointer-events: none;
}

/* 底部div内需要交互的元素，比如按钮 */
.bottom-div .btn {
  pointer-events: auto;
}

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