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

Question

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

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

在桌面浏览器上，这工作正常，但在移动设备上，当我尝试使用范围推子时，屏幕正在滚动。

我第一次尝试解决此问题是使用输入焦点和模糊事件来禁用页面的滚动功能，但这些事件似乎不会在移动设备上触发。

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

我做了一个 plunkr 来重现这个问题：

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

如果您未使用移动浏览器，只需启用 chrome 检查器左上角的设备浏览器

即可谢谢

编辑：-webkit-appearance: slider-vertical;css属性对我来说不是一个选项，因为我需要将css样式应用于我的推子：<输入类型>样式在垂直时不适用于拇指

编辑：

找到一个适合我的解决方案，正如 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">