【H5】关于react移动端H5的滚动吸顶方案实践总结
方案一
采用position: sticky;的形式,其利用浏览器提供的api,实现原理是在吸顶时修改定位为fixed,反之则修改为releative
缺陷:此种方案一旦父元素滚动出可视区域,就会导致吸顶失效,滚动时会跟着父容器滚动出去(因此,仅适用于部分简单的吸顶场景)
方案二
采用NPM包去实现滚动吸顶效果,为此我实践了3种滚动三方包,分别是以下三种:
"react-sticky-box": "^2.0.5",
// 可以实现滚动吸顶,但是过渡效果太突兀,突然就闪出来的那种,没有感觉顺滑,因此放弃
"react-sticky-el": "^2.1.1",
// 这种我简单试了下,和position: sticky;基本一致,缺陷也是会导致滚动出去,但是没有深入去实践API,暂定为放弃的方案
"react-stickynode": "^4.1.1",
// 经过实践,此种方案可以实现吸顶,使用方式便捷,且过渡较为顺滑,因此该方案被采用
方案三
自行通过js去实现,通过获取容器元素,监听滚动的时机,进行定位position值的修改,这类网上的方案很多,就不过多赘述,但需要注意的是,需要区分上滚动和下滚动的过渡效果(注意,并不是指上吸顶和下吸顶),并同时做处理,才能做到流畅顺滑。