可滚动div内设置appearance:none的input range移动端模拟拖动失效问题

问题表现 #

在尺寸小于内层div的外层div中设置了overflow:scroll，实现内层div横向滚动，input range滑块组件是内层div的子元素。为自定义滑块样式，在CSS中为input range添加了appearance:none属性去除默认样式。
此时出现以下异常：

• Chrome/Chromium/Brave浏览器开发者工具的移动端模拟模式下操作时，99%的概率拖动滑块会触发外层div整体滚动，无法独立拖动滑块；关闭移动端模拟模式则功能正常，保留移动端模拟但移除appearance:none属性滑块也可正常操作，但自定义样式会失效。
• Firefox浏览器下只要开启移动端模拟，无论是否设置appearance:none，滑块都无法正常使用。

复现代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
  <meta charset="UTF-8">
  <style>
    #outerframe {
      height: 310px;
      width: 300px;
      border: 2px solid red;
      padding: 8px;
      margin: auto;
      overflow: scroll;
    }

    #scrollarea {
      height: 300px;
      width: 400px;
      border: 1px dashed green;
      padding: 16px;
    }

    input[type=range] {
      appearance: none;
      background: linear-gradient(90deg, #aaa, #ccf1ff 30%, #ccf1ff 70%, #aaa);
      outline: none;
      opacity: 0.7;
      border-radius: 4px;
      height: 14px;
      width: 200px;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.5) inset, 0 -5px 4px rgba(0, 0, 0, 0.5) inset;
      vertical-align: middle;
      margin: 16px;
    }

    input[type=text] {
      width: 50px;
    }
  </style>
  <title>Testing range in scroll</title>
</head>
<body>
  <div id="outerframe">
    <div id="scrollarea">
      <input type="range" id="rangescroll">
      <input type="text" value="50">
    </div>
  </div>

  <script>
    scrollarea.firstElementChild.addEventListener('input', evt => {
      evt.target.nextElementSibling.value = evt.target.value;
    })
  </script>
</body>
</html>

可行修复方案 #

• 方案一：在touchstart事件触发时给外层div添加overflow-hidden类，touchend事件触发时移除该类
• 方案二：在input range的touchstart事件监听中return false阻止默认事件

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