乐趣区

关于html5:h5-兼容性ios-滚动问题及可能的方

jiezi

滚动事件

addEventListener 应用 passive 改善的滚屏性能

依据标准，passive 选项的默认值始终为 false。然而，这引入了解决某些触摸事件（以及其余）的事件监听器在尝试解决滚动时阻止浏览器的主线程的可能性，从而导致滚动解决期间性能可能大大降低。

为防止出现此问题，某些浏览器（特地是 Chrome 和 Firefox）已将文档级节点 Window，Document 和 Document.body 的 touchstart (en-US)和 touchmove (en-US)事件的 passive 选项的默认值更改为 true。这能够避免调用事件监听器，因而在用户滚动时无奈阻止页面出现。


var elem = document.getElementById('elem');
elem.addEventListener('touchmove', function listener() {/* do something */}, {passive: true});
Copy to Clipboard

增加 passive 参数后，touchmove 事件不会阻塞页面的滚动（同样实用于鼠标的滚轮事件）
您能够通过将 passive 的值显式设置为 false 来笼罩此行为，如下所示：


/* Feature detection */
/* 特色检测 */
var passiveIfSupported = false;

try {window.addEventListener("test", null, Object.defineProperty({}, "passive", {get: function() {passiveIfSupported = { passive: true}; } }));
} catch(err) {}

window.addEventListener('scroll', function(event) {
  /* do something */
  // can't use event.preventDefault();
  // 不能应用 event.preventDefault()}, passiveIfSupported );

在不反对 addEventListener()的 options 参数的旧浏览器上，尝试应用它会阻止应用 useCapture 参数而不正确应用特色检测。

您无需放心根本 scroll (en-US) 事件的 passive 值。因为无奈勾销，因而事件监听器无奈阻止页面出现。

问题 -ios 滚动卡顿不晦涩？

解决方案

  1. body、部分滚动容器增加 -webkit-overflow-scrolling:touch

-webkit-overflow-scrolling

auto：应用一般滚动, 当手指从触摸屏上移开，滚动会立刻进行。
touch：应用具备回弹成果的滚动, 当手指从触摸屏上移开，内容会持续放弃一段时间的滚动成果。持续滚动的速度和继续的工夫和滚动手势的强烈水平成正比。同时也会创立一个新的堆栈上下文。
在挪动端上，在你用 overflow-y:scroll 属性的时候，你会发现滚动的成果很很僵硬，很慢，这时候能够应用 -webkit-overflow-scrolling:touch 这个属性，让滚动条产生滚动回弹的成果，就像 ios 原生的滚动条一样晦涩。

问题 -ios 偶现滚动时最底部的内容被固定的 tab 菜单栏遮挡

尝试解决方案

  1. 父级元素的滚动容器增加 -webkit-overflow-scrolling:touch（未复现），然而这种计划，ios(13.1.3)最外层会默认呈现滚动条，如不需呈现滚动条的，需手动在最外层增加暗藏滚动条的款式
-webkit-scrollbar {display: none;}
  1. 父级元素的底部增加paddingBottom, 外层默认会增多一部分空白，不敌对

问题 -ios 滚动到指定地位，呈现局部组件渲染空白，滚动后失常显示, 或滚动后局部元素渲染被截断

ios 11（13.1.3），当页面点击顶部的关键字或底部输入框输出关键字时，可呈现查问的后果卡片，屡次查问后，从顶部点击关键字间接滚动到最新的后果卡片时，后果卡片呈现渲染异样（局部 / 全副元素渲染不出），来回滚动后，元素呈现。

尝试解决方案

  1. 滚动到底部地位时，加一个定时器（复现）
  2. 勾销父级元素的overflow:hidden（复现）
  3. 强制渲染子元素的内容（复现）
  4. 父级元素的滚动容器增加 -webkit-overflow-scrolling:touch（复现）
  5. 增加wil-change:scroll-position（复现）
  6. 父级元素及子元素增加最小高度（复现，呈现频率升高）
  7. 父元素滚动前设置-webkit-overflow-scrolling:touch, 滚动完结后设置-webkit-overflow-scrolling:touch（同一种组件未呈现，2 种组件交替呈现时复现、有效）
  8. 父元素设置backface-visibility: hidden;transform: translate3d(0,0,0); (复现)

  9. 父元素勾销 z-index 设置，同时增加-webkit-overflow-scrolling:auto;（同一种组件或不同种组件交替呈现时，均不再呈现）

    小结

    -webkit-overflow-scrolling:touch这个属性增加后可能会引起一些奇奇怪怪的 bug，上述是可能是因为层级 z -index 的设置或者是组件元素的不统一（试过用同一种组件，然而勾销了单个后果的轮播点切换，复现），导致在视觉上渲染被遮挡的问题。
    上述的几种状况是根据过后 bug 复现不同的体现而排查的步骤，最终还是得依据不同状况来修复问题。

问题 -ios 容器列表初始不能上滑加载更多数据，需下拉刷新后能力触发上滑加载更多

当设置了 overflow-y:auto 的滚动容器高度缩小肯定的像素时，复现该问题，然而要留神缩小的容器高度，不然会引起最初一个列表元素的局部内容被遮挡。

退出移动版