HTML页面两侧齿轮滚动条实现及滚动联动旋转效果需求

要实现页面滚动时左右齿轮反向旋转的效果，不用纠结原生滚动条的改造——浏览器原生垂直滚动条默认只在右侧，没法直接弄出左右两个。换个思路，用固定定位的齿轮元素，监听页面滚动事件来控制旋转角度就行，具体实现如下：

完整代码示例 #

HTML #

<!-- 页面内容容器，需足够长以支持滚动 -->
<div class="page-content">
  <p>页面内容示例</p>
  <p>页面内容示例</p>
  <p>页面内容示例</p>
  <p>页面内容示例</p>
  <p>页面内容示例</p>
  <p>页面内容示例</p>
  <p>页面内容示例</p>
  <p>页面内容示例</p>
  <p>页面内容示例</p>
  <p>页面内容示例</p>
  <!-- 重复添加足够多内容让页面可滚动 -->
</div>

<!-- 左右齿轮元素 -->
<div class="gear gear-left">⚙️</div>
<div class="gear gear-right">⚙️</div>

CSS #

/* 页面内容样式，确保高度足够触发滚动 */
.page-content {
  height: 2000px;
  padding: 20px;
}

/* 齿轮基础样式 */
.gear {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  font-size: 48px;
  user-select: none; /* 禁止选中，避免滚动时误操作 */
}

.gear-left {
  left: 20px;
}

.gear-right {
  right: 20px;
}

JavaScript #

let lastScrollTop = 0;
const leftGear = document.querySelector('.gear-left');
const rightGear = document.querySelector('.gear-right');

window.addEventListener('scroll', function() {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const isScrollDown = scrollTop > lastScrollTop; // 判断滚动方向：向下为true，向上为false

  // 计算旋转角度，数值越小转得越慢，可按需调整
  const rotateAngle = scrollTop / 10;

  // 左侧齿轮：向下顺时针，向上逆时针
  leftGear.style.transform = `translateY(-50%) rotate(${isScrollDown ? rotateAngle : -rotateAngle}deg)`;
  // 右侧齿轮：向下逆时针，向上顺时针
  rightGear.style.transform = `translateY(-50%) rotate(${isScrollDown ? -rotateAngle : rotateAngle}deg)`;

  lastScrollTop = scrollTop; // 更新上一次滚动位置
});

关键点说明 #

1. 固定定位齿轮：用position: fixed把齿轮固定在页面左右两侧，保持位置不随滚动偏移
2. 滚动方向判断：通过对比当前滚动位置和上一次滚动位置，确定是向上还是向下滚动
3. 旋转角度控制：将滚动距离转化为旋转角度，比例可自行调整，实现滚动速度与齿轮转速的匹配
4. 方向反转逻辑：左右齿轮根据滚动方向设置相反的旋转方向，满足需求

你之前尝试修改overflow-y和flow属性无效，是因为浏览器原生滚动条的位置是固定的——垂直滚动条仅在右侧，水平滚动条仅在底部，无法自定义到左侧。这种自定义联动效果，用JS控制元素旋转才是正确的实现思路。

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