旋转时输入类型范围在移动设备上不起作用

Question

我目前正坐在一个有趣的问题上：

我有一个输入类型范围，使用css转换属性旋转270deg。

在桌面浏览器上，这种方法很好但在移动设备上，当我尝试使用范围推子时，屏幕会滚动。

我首次尝试修复此问题是使用输入焦点和模糊事件来禁用页面的滚动功能，但这些事件似乎并未在移动设备上触发。

有没有人已经处理过这个问题？

我做了一个重复问题的傻瓜：

https://embed.plnkr.co/FrdJZqeB8zqQxjN7zS8u/

如果您不在移动浏览器上，只需启用Chrome检查器左上角的设备浏览器

由于

编辑：我不能选择-webkit-appearance: slider-vertical; css属性，因为我需要将css样式应用于我的推子：<input type="range"> style not applies to thumb when it is vertical

编辑：

找到一个适合我的解决方案，正如thepio提出的那样：

var element = document.getElementById('range-input');
element.addEventListener('touchmove', function(event){
    //event.preventDefault();
});

有趣的是，这只适用于没有event.preventDefault（）行

的情况

Answer 1

为什么不使用垂直滑块？

input[type=range] {
  -webkit-appearance: slider-vertical;
  width: 5px;
  height: 200px;
}

<input type="range" orient="vertical" id="range-input">