移动端无法拖拽通过transform:rotate实现的Vertical slider滑块问题求助

问题原因 #

通过transform: rotate翻转容器实现垂直滑块后，移动端浏览器的触摸事件坐标与滑块实际交互区域不匹配，导致原生拖拽逻辑失效，仅能响应轨道点击。

方案一：原生CSS实现（无需JS） #

用writing-mode替代旋转，利用浏览器原生垂直排版支持，避免坐标匹配问题：

body {
  text-align: center;
}

#slider-container {
  writing-mode: vertical-lr;
  transform: scale(-1, 1);
  margin-top: 60px;
}

HTML保持原结构不变，这种方式下滑块的交互由浏览器原生处理，移动端拖拽正常。

方案二：Vanilla JS 修复旋转方案的拖拽问题 #

若必须保留rotate实现，可通过监听触摸事件手动计算滑块值：

调整后的CSS #

body {
  text-align: center;
}

#slider-container {
  transform: rotate(-90deg);
  margin-top: 150px;
  width: 200px;
  position: relative;
}

#slider-container input[type="range"] {
  width: 100%;
}

原生JS代码 #

const sliderContainer = document.getElementById('slider-container');
const slider = sliderContainer.querySelector('input[type="range"]');

const min = parseInt(slider.min);
const max = parseInt(slider.max);
const range = max - min;
const sliderWidth = slider.offsetWidth;

// 触摸开始事件
sliderContainer.addEventListener('touchstart', (e) => {
  e.preventDefault();
  const touch = e.touches[0];
  const x = touch.clientX - sliderContainer.getBoundingClientRect().left;
  slider.value = Math.max(min, Math.min(max, min + (x / sliderWidth) * range));
});

// 触摸移动事件
sliderContainer.addEventListener('touchmove', (e) => {
  e.preventDefault();
  const touch = e.touches[0];
  const x = touch.clientX - sliderContainer.getBoundingClientRect().left;
  slider.value = Math.max(min, Math.min(max, min + (x / sliderWidth) * range));
});

逻辑说明 #

• 旋转后滑块的水平方向对应原垂直方向，将触摸的水平坐标转换为滑块取值范围。
• 阻止默认滚动行为避免触摸冲突。
• 计算触摸点相对容器的位置，换算为滑块value并限制在min/max区间内。

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