问题
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 Looks like iOS (unlike Android) requires
<div style="-webkit-overflow-scrolling: touch;">
for smooth scrolling of DIVs: https://weblog.west-wind.com/posts/2013/Jun/01/Smoothing-out-div-scrolling-in-Mobile-WebKit-Browsers
回答1:
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:
Details:
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.
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.
However, this property applies only for iOS devices. Android works well even without it.
Usage:
We must append this property to the dropdown element that holds the suggestions - .select2-results__options.
Add the following code after the select2 css styles:
.select2-results__options {
-webkit-overflow-scrolling: touch;
}
Demo:
https://codepen.io/andreivictor/pen/NYvvXP
(the following demo contains two select2 instances for a better comparison of the scroll effects)
Tested on:
- iPhone 6 Plus (iOS 10.3.2)
- iPhone 8 (iOS 11.2.5)
- iPad Mini 3 (iOS 10.3.2)
来源：https://stackoverflow.com/questions/48313498/select2-produces-rough-scrolling-on-mobile