当前位置: 首页 > Web前端 > JavaScript

页面滚动的默认行为有哪些(一)

时间:2023-03-27 18:21:12 JavaScript

浮层滚动驱动底部滚动如果不想底部滚动,可以使用preventDefault来阻止浏览器的默认行为通过监听touchstart、touchmove、touchend事件,判断滑动在滚动元素内。滚动,否则阻止默认的滚动行为。在参考文章1中,作者抽象出一个简单的方法(附源码,供参考)$.smartScroll(container,selectorScrollable);使用新的css属性overscroll-behavior设置滚动到边界的行为PS:overscroll-behavior是一个较新的css属性,目前需要考虑兼容性和限制。例如,当“滚动区域”内容不多,没有出现滚动条时,该属性不能阻止默认滚动。(参考文章3)MobileWebscrollingperformanceoptimization:Passiveeventlisteners被动事件监听器在2016年的GoogleI/O上??被提出来提高页面滑动的流畅度。关于Passive更详细的背景和描述,请参考参考文章2,这里简单介绍一下。我们在滑动页面时触发了触摸相关的事件。开发者可以通过preventDefault来阻止滑动行为。浏览器需要等待绑定事件执行完毕(假设需要200ms)才知道,“哦~所以你没有阻止默认行为,好的,我马上滚”,这就造成了延迟在滑动的平滑度上。passive的作用是开发者可以提前告诉浏览器,如果我不调用preventDefault来阻止事件的默认行为,浏览器可以快速产生事件行为,从而提高页面性能。大多数主流浏览器现在都提供对passive的原生支持。在最新的DOM规范中,事件绑定的第三个参数变成了一个对象:target.addEventListener(type,listener[,options]);在options中传递passive:true是明确告诉浏览器该事件不会调用preventDefault来阻止默认的滑动行为。参考资料1.web移动端浮层滚动防止窗体滚动JS/CSS处理(张新旭)2.移动Web滚动性能优化:被动事件监听器(知乎)3.overscroll-behavior的使用与局限(CSDN)