【译】IntersectionObserver 正在来到我们的视野

译自:https://developers.google.com/web/updates/2016/04/intersectionobserver?hl=en 比如说,你想跟踪 DOM 树里的一个元素,当它进入可见视口时得到通知。 也许想实现即时延迟加载图片功能,或者你需要知道用户是否真的在看一个广告 banner。 你可以通过绑定 scroll 事件或者用一个周期性的定时器,然后再回调函数中调用元素的 getBoundingClientRect() 获取元素位置实现这个功能。 »

【译】Chrome 52 中的 CSS Containment 属性

译自:https://developers.google.com/web/updates/2016/06/css-containment?hl=en 摘要 新的 CSS Containment 属性让开发者控制浏览器的样式、布局、重绘的工作区域。 这个属性有一些可选值,语法是这样: contain: none | strict | [ size || layout »

position: sticky 在移动端的应用与实践

前面《iOS 与 弹性滚动》里讲到,iOS 的 UIWebkit 内核浏览器中启用弹性滚动后,滚动事件不会立即触发的问题。不过话说回来,绑定 scroll 本来就对整体 UI 性能影响很大,某些通常需要绑定 scroll 事件的东西其实有其他更为简便的实现方式。 比如说有这样一个很常见需求:一个长列表里分了很多小节,每个小节有一个头部标题。要求当各小节尚未完全滚动到屏幕外时,小节的头部标题始终固定在屏幕顶部。好多人一看到“滚动” »

iOS 与 惯性滚动

注:以下所有例子均 只 在 iOS 的微信中测试过,但对于饿了么APP的内置浏览器同样适用(两者使用相同内核) 引题 工作中常常有需要显示大量信息的情况,列表超出一屏就涉及到滚动的问题。例如 - var n = 1 ul while n <= 100 li= n++ 在 iOS 中用微信打开, »