滚动事件addEventListener使用passive改进了滚动性能根据规范，passive选项的默认值始终为false。但是，这引入了处理某些触摸事件（以及其他事件）的事件侦听器可能会在尝试处理滚动时阻塞浏览器的主线程，从而导致滚动处理期间的性能可能显着降低。为了防止这个问题，一些浏览器（特别是Chrome和Firefox）已经为文档级节点Window、Document和Document的touchstart(en-US)和touchmove(en-US)事件设置了passive选项的默认值.body更改为true。这可以防止调用事件侦听器，因此无法阻止在用户滚动时呈现页面。varelem=document.getElementById('elem');elem.addEventListener('touchmove',functionlistener(){/*做某事*/},{passive:true});复制到剪贴板添加passive参数后，touchmove事件不会阻止页面滚动（同样适用于鼠标滚轮事件）您可以通过将passive的值显式设置为false来覆盖此行为，如下所示：/*Featuredetection*//*特征检测*/varpassiveIfSupported=false;try{window.addEventListener("test",null,Object.defineProperty({},"passive",{get:function(){passiveIfSupported={passive:true};}}));}catch(err){}window.addEventListener('scroll',function(event){/*做点什么*///不能使用event.preventDefault();//不能使用event.preventDefault()},passiveIfSupported);在支持addEventListener()的选项参数的旧浏览器上，尝试使用它会阻止useCapture参数被正确用于特征检测。您无需担心基本滚动（en-US）事件的被动值。事件侦听器无法阻止页面呈现，因为它们无法取消。问题-ios滚动不流畅？方案体，添加-webkit-overflow-scrolling:touch -webkit-overflow-scrollingauto：使用正常滚动，当手指离开触摸屏时，滚动会立即停止。touch：使用带回弹效果的滚动，当手指离开触摸屏后，内容会继续保持滚动效果一段时间。持续滚动的速度和持续时间与滚动手势的强度成正比。它还创建了一个新的堆栈上下文。在移动端，当你使用overflow-y:scroll属性时，你会发现滚动效果很僵硬，很慢。这时候可以使用-webkit-overflow-scrolling:touch属性让滚动条的滚动回弹效果和ios原生的滚动条一样流畅。问题-ios偶尔会滚动，最底部的内容被固定的选项卡菜单栏挡住。尝试通过添加-webkit-overflow-scrolling:touch来解决父元素的滚动容器（未转载），但这种解决方法，ios(13.1.3)默认会在最外层出现滚动条。如果不需要出现滚动条，需要在最外层手动添加样式隐藏滚动条-webkit-scrollbar{display:none;}在父元素底部添加paddingBottom，外层会添加一些空白默认情况下，不友好的问题——ios滚动到指定位置，部分组件呈现空白，滚动后正常显示，或者部分元素滚动后呈现截断。ios11（13.1.3），当页面点击上方的关键字或在下方的输入框中输入关键字时，可能会出现查询的结果卡片。多次查询后，从顶部点击关键字，直接滚动到最新的结果卡时，结果卡渲染异常（部分/全部元素无法渲染），来回滚动后出现该元素。尝试解决方案当滚动到底部位置时，添加定时器（递归）取消父元素的溢出：隐藏（递归）强制子元素的内容渲染（递归）到父元素的滚动容器中elementAdd-webkit-overflow-scrolling:touch（转载）添加wil-change:scroll-position（转载）父元素和子元素添加最小高度（重复出现，出现频率降低）滚动前设置父元素-webkit-overflow-scrolling:touch,滚动结束后设置-webkit-overflow-scrolling:touch（同一个组件不出现，当两个组件交替出现时重新出现无效）父元素设置backface-visibility:hidden;变换：translate3d(0,0,0);（复现）父元素取消z-index设置，添加-webkit-overflow-scrolling:auto；（当相同组件或不同组件交替出现时，将不再出现）总结-webkit-overflow-scrolling:touch添加该属性可能会引起一些奇怪的bug。以上可能是由于图层z-index的设置或者组件元素不一致（我试过用同一个组件，但是取消了单个结果的旋转点切换，重现），造成视觉遮挡渲染的问题.以上几种情况是根据当时bug重现的不同表现进行的排查步骤，最终还是要根据不同的情况进行修复。问题-ios容器列表一开始无法向上滑动加载更多数据，需要下拉刷新才能触发向上滑动加载更多。当设置overflow-y:auto将滚动容器的高度降低一定像素时，可以重现问题，但需要注意降低的容器高度，否则会导致最后一个列表元素的部分内容被遮蔽。
