为HTML <input type="range">元素添加鼠标滚轮步进滚动效果

嘿，这个思路真的很巧妙！用垂直方向的range input来模拟独立于窗口滚动的滚动条，完全可以实现你的需求，我来帮你把这个方案完善得更实用～

核心思路 #

通过自定义样式把range input改成垂直滚动条的样子，然后监听它的input事件，将滑块的位置转换为窗口滚动的百分比，进而触发窗口滚动或自定义事件。如果需要双向同步，还可以监听窗口的scroll事件来同步滑块位置。

完整实现代码 #

HTML #

<!-- 独立滚动条 -->
<input class="slider" type="range" min="0" max="100" step="0.1" value="0">

<!-- 示例长内容，用来测试滚动 -->
<div class="page-content">
  <h2>Section 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <h2>Section 2</h2>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <h2>Section 3</h2>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
  <h2>Section 4</h2>
  <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
  <h2>Section 5</h2>
  <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</div>

CSS #

/* 垂直滚动条样式 */
.slider {
  /* 实现垂直方向的range input */
  -webkit-appearance: slider-vertical; /* 适配WebKit浏览器 */
  writing-mode: bt-lr; /* 适配IE */
  width: 10px;
  height: 350px;
  position: fixed;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #e0e0e0;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
}

/* 美化滑块 */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #2196F3;
  transition: background-color 0.2s;
}

.slider::-webkit-slider-thumb:hover {
  background-color: #1976D2;
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #2196F3;
  border: none;
  transition: background-color 0.2s;
}

.slider::-moz-range-thumb:hover {
  background-color: #1976D2;
}

/* 示例内容样式 */
.page-content {
  height: 2500px;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

JavaScript #

const slider = document.querySelector('.slider');

// 计算页面可滚动的总高度
const getTotalScrollHeight = () => {
  return document.documentElement.scrollHeight - window.innerHeight;
};

// 初始化滑块的max值为100（代表百分比），适配不同页面高度
slider.max = 100;

// 滑块拖动时触发窗口滚动和自定义事件
slider.addEventListener('input', () => {
  const scrollPercentage = parseFloat(slider.value) / 100;
  const targetScrollTop = scrollPercentage * getTotalScrollHeight();
  
  // 同步窗口滚动（平滑滚动可选）
  window.scrollTo({
    top: targetScrollTop,
    behavior: 'smooth'
  });
  
  // 触发自定义事件，可在其他地方监听做业务逻辑
  window.dispatchEvent(new CustomEvent('independentScrollTriggered', {
    detail: {
      scrollPercent: scrollPercentage,
      scrollTop: targetScrollTop,
      sliderValue: slider.value
    }
  }));
});

// 可选：窗口滚动时同步滑块位置（双向绑定）
window.addEventListener('scroll', () => {
  const currentScrollTop = window.pageYOffset;
  const scrollPercentage = (currentScrollTop / getTotalScrollHeight()) * 100;
  // 避免频繁更新滑块值，提升性能
  if (Math.abs(parseFloat(slider.value) - scrollPercentage) > 0.1) {
    slider.value = scrollPercentage;
  }
});

// 监听自定义事件示例：滚动到特定区域时高亮导航
window.addEventListener('independentScrollTriggered', (e) => {
  console.log('独立滚动条触发事件：', e.detail);
  
  // 这里可以添加你的业务逻辑，比如：
  // if (e.detail.scrollPercent > 0.2 && e.detail.scrollPercent < 0.4) {
  //   document.querySelector('#section2-nav').classList.add('active');
  // } else {
  //   document.querySelector('#section2-nav').classList.remove('active');
  // }
});

关键细节说明 #

1. 垂直方向实现：通过-webkit-appearance: slider-vertical和writing-mode: bt-lr实现跨浏览器的垂直range input。
2. 灵活的滚动比例：用百分比（0-100）作为滑块的范围，而非固定数值，适配不同长度的页面。
3. 自定义事件：通过dispatchEvent触发自定义事件，你可以在任何地方监听这个事件，实现导航高亮、内容懒加载等业务逻辑。
4. 性能优化：窗口滚动同步滑块时，添加差值判断，避免频繁更新滑块值导致的性能问题。

这个方案完全独立于原生窗口滚动条，你可以根据需求调整滑块的样式、位置，甚至扩展更多功能～

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