Select2 在移动设备上产生粗略滚动答案

【问题标题】：Select2 produces rough scrolling on mobileSelect2 在移动设备上产生粗略滚动
【发布时间】：2018-04-22 04:15:15
【问题描述】：

我正在 iPhone 上测试 Select2 jQuery 组件，我所做的只是打开他们的演示网站：

如果您在手机上测试他们的 State 示例，滚动不会响应压力并且不会平滑消失。这是一个粗略的线卷轴。移动拇指时，线条不会淡入淡出。

另一方面，在桌面上滚动/淡出效果很好。它优雅地响应鼠标滚轮滚动。

只是想知道有没有人注意到这一点？

EDIT 看起来像 iOS（不像 Android）需要

<div style="-webkit-overflow-scrolling: touch;">

【问题讨论】：

我在 Android 7.0 上测试过，运行良好
@beaver 看起来 Androids 默认启用 webkit touch，所以你不会明白：weblog.west-wind.com/posts/2013/Jun/01/…。但在 iOS 中，我们缺少 <div style="-webkit-overflow-scrolling: touch;">

【解决方案1】：

看了你的回答，不清楚如何将-webkit-overflow-scrolling: touch;属性添加到select2元素，所以我决定给出更详细的答案：

根据规范 (https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling)，-webkit-overflow-scrolling CSS 属性控制触摸设备是否对给定元素使用基于动量的滚动。

touch 值表示在完成滚动手势并将手指从触摸屏上移开后，内容会继续滚动一段时间。

但是，此属性仅适用于 iOS 设备。即使没有它，Android 也能正常运行。

我们必须将此属性附加到包含建议的下拉元素 - .select2-results__options。

在select2 css 样式后添加以下代码：

.select2-results__options {
    -webkit-overflow-scrolling: touch;
}

（以下演示包含两个select2实例，以便更好地比较滚动效果）

【讨论】：

是的。这就是我必须做的。粗略滚动仅在 iPhone 上，-webkit-overflow-scrolling 修复了它。很惊讶 Select2 并没有被广泛报道。
确实，我也很惊讶。在 github 或 select2 论坛 (forums.select2.org) 上没有关于此的未解决问题。这可能是因为我们没有直接在移动设备上对我们的响应式界面进行足够的测试，而我们对桌面浏览器的响应式功能感到满意。