离子范围输入可防止滚动

Question

我的应用程序中有一堆垂直堆叠的滑块。当我点击滑块以向下或向上滚动时，它会更改滑块值而不是滚动。

See a demo of the issue

以下是社区成员之间的讨论，但我发现没有任何帮助：

1. This reported issue与此问题相同，但不知何故，作者确信使用angular-js-slider库并且看起来它适用于作者。我试过这个库，问题仍然是一样的。

2. Reported issue包含所有输入元素而不仅仅是范围输入。可能这解决了其他输入类型的问题，如"text"但不适用于范围输入。

任何人都可以帮忙吗？

Answer 1

在网络上，滚动绝对不是问题，但在移动设备上，滑块的整个水平跨度都可以作为滚动屏障。

由于我在移动环境中寻找解决方案，因此禁用任何鼠标事件的轨道对我来说已经足够了，这可以通过pointer-events实现，至少在chrome上实现。

input[type=range] {
  pointer-events: none;
}

input[type=range]::-webkit-slider-thumb {
  pointer-events:auto;
}

此处发布的答案为contributed earlier here。