Select2在手机上产生粗略滚动 [英] Select2 produces rough scrolling on mobile
问题描述
我正在测试iPhone上的Select2 jQuery组件，而我所做的只是打开他们的演示网站:
I'm testing the Select2 jQuery component on an iPhone, and all I did was open their demo website:
https://select2.org/getting-started/basic-usage
如果在电话上测试其状态"示例，则滚动不会响应压力并且不会平滑消失.这是一个粗略的滚动条.当您移动拇指时，线条不会淡入淡出.
If you test their State example on a phone, scrolling doesn't respond to pressure and doesn't fade smoothly. It's a rough line scroll. When you move your thumb, the lines don't fade in and out.
另一方面，在桌面上滚动/渐变效果很好.它可以很好地响应鼠标滚轮滚动.
On the other hand, on a desktop the scrolling/fading works great. It responds gracefully to mouse-wheel scrolls.
想知道有人注意到了吗?
Just wondering has anyone noticed this?
EDIT看起来像iOS(与Android不同)
EDIT Looks like iOS (unlike Android) requires
<div style="-webkit-overflow-scrolling: touch;">
平滑滚动DIV: https://weblog.west-wind.com/posts/2013/Jun/01/Smoothing-out-div-scrolling-in-Mobile-WebKit-Browsers
推荐答案
阅读您的答案，目前还不清楚如何将-webkit-overflow-scrolling: touch;属性添加到select2元素，所以我决定提供更多内容.详细的答案:
Reading your answer, it is not very clear how to add the -webkit-overflow-scrolling: touch; property to the select2 element, so I've decided to give a more detailed answer:
根据规范( https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling )，CSS属性-webkit-overflow-scrolling控制触摸设备是否对给定元素使用基于动量的滚动.
According to specs (https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling), the -webkit-overflow-scrolling CSS property controls whether or not touch devices use momentum-based scrolling for a given element.
touch值表示完成滚动手势并将手指从触摸屏上移开之后，内容会继续滚动一段时间.
A touch value means that the content continues to scroll for a while after finishing the scroll gesture and removing your finger from the touchscreen.
但是，此属性仅适用于iOS设备.即使没有Android，Android也能很好地运行.
我们必须将此属性附加到包含建议的下拉元素-.select2-results__options.
We must append this property to the dropdown element that holds the suggestions - .select2-results__options.
在select2 css样式之后添加以下代码:
Add the following code after the select2 css styles:
.select2-results__options {
-webkit-overflow-scrolling: touch;
}
演示:
https://codepen.io/andreivictor/pen/NYvvXP
(以下演示包含两个select2实例，以便更好地比较滚动效果)
(the following demo contains two select2 instances for a better comparison of the scroll effects)
- iPhone 6 Plus(iOS 10.3.2)
- iPhone 8(iOS 11.2.5)
- iPad Mini 3(iOS 10.3.2)
这篇关于Select2在手机上产生粗略滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
