最近在处理移动端页面的时候发现一个场景，当下拉框里面选项比较多出现了滚动条，同时页面也出现滚动条的情况下，在使用的时候两个滚动经常发生错乱，使用上非常不方便，本以为是个不好解决的问题，实际是有简单的解决方案来提升使用体验。
# overscroll-behavior
overscroll-behavior CSS 属性是 overscroll-behavior-x 和 overscroll-behavior-y 属性的合并写法，让你可以控制浏览器中过度滚动时的表现——也就是 DOM 元素滚动到边缘时候的行为。
默认情况下，当触及页面顶部或者底部时（或者是其他可滚动区域），移动端浏览器倾向于提供一种“触底”效果，甚至进行页面刷新。你可能也发现了，当对话框中含有可滚动内容时，一旦滚动至对话框的边界，对话框下方的页面内容也开始滚动了——这被称为“滚动链”。
/* 可以使用下面的一或两个关键字指定 */
overscroll-behavior = [ contain | none | auto ]{1,2}
overscroll-behavior: auto; /* 默认效果，滚动到边缘后继续滚动外部的可滚动容器 */
overscroll-behavior: contain; /* 当前元素内部滚动到边界行为不变，不会在临近滚动区域触发滚动行为 */
overscroll-behavior: none; /* 阻止元素自身默认滚动到边界行为，且不会在临近滚动区域触发滚动行为 */
1
2
3
4
5
6
2
3
4
5
6
用 CSS 属性除了功能外其次关注的就是兼容性了
现在看来兼容性已经极强，而且作为提升体验的属性就算不兼容也不会带来新的问题，完全可以作为第一方案使用。关于该属性更多内容可以参考 MDN 上的 overscroll-behavior (opens new window)。
# 兼容方案
用 overscroll-behavior 已经可以处理绝大多数场景了，如果还需要兼容，自行参考各自兼容处理：