在ios,不能实时触发onscroll事件,有办法解决吗 100
2016-03-29
使用 iscroll 的probe版本,该版本能实时探查到滚动的距离,但该钩子函数是实时去关注 requestAnimationFrame 下的状态,所以对浏览器的版本性能消耗很大,加上 react 的 DOM 操作,安卓机根本动不了,兼容失败
使用 swiper 插件,在启动 freeMode 模式时模拟原生的弹性滚动( swiper 模拟原生滚动的方案能兼容较多的安卓机型不出现bug,推荐), 因为 swiper 没有实时监听滚动位置的功能,故我监听滚动开始及结束后的事件,通过 setInterval 及一些计算去实现滚动条的监听,但因为 react 元素的变化量比较大,导致 swiper 在移动端时对父容器的计算速率达到了一个瓶颈,依旧出现很卡顿的现象,兼容失败
fallback方案,安卓端使用原生onscroll实现,ios直接加载全部子元素,毕竟ios的性能方面还是比较好的,有更好的方案后续再更.
2016-03-29
使用 iscroll 的probe版本,该版本能实时探查到滚动的距离,但该钩子函数是实时去关注 requestAnimationFrame 下的状态,所以对浏览器的版本性能消耗很大,加上 react 的 DOM 操作,安卓机根本动不了,兼容失败
使用 swiper 插件,在启动 freeMode 模式时模拟原生的弹性滚动( swiper 模拟原生滚动的方案能兼容较多的安卓机型不出现bug,推荐), 因为 swiper 没有实时监听滚动位置的功能,故我监听滚动开始及结束后的事件,通过 setInterval 及一些计算去实现滚动条的监听,但因为 react 元素的变化量比较大,导致 swiper 在移动端时对父容器的计算速率达到了一个瓶颈,依旧出现很卡顿的现象,兼容失败
fallback方案,安卓端使用原生onscroll实现,ios直接加载全部子元素,毕竟ios的性能方面还是比较好的,有更好的方案后续再更.
除了使用 scroll 事件之外, 再用上 touchmove 事件。比如:
var topnode = document.querySelector('#top')function change() { var y = document.scrollingElement.scrollTop // or
// var y = window.pageYOffset
var ratio = Math.min(0.8, y / 100)
topnode.style.opacity = ratio
}document.addEventListener('touchmove', change)document.addEventListener('scroll', change)
onscroll 事件:
1、定义和用法:
onscroll 事件在元素滚动条在滚动时触发。
提示: 使用 CSS overflow 样式属性来创建元素的滚动条。
2、语法:
(1)HTML 中:
<element onscroll="myScript">
(2)JavaScript 中:
object.onscroll=function(){myScript};
JavaScript 中, 使用 addEventListener() 方法:
object.addEventListener("scroll", myScript);
注意: Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。