rok138/h5-damping-effect

H5页面滚动阻尼效果实现

页面滚动阻尼效果实现

功能描述

• 要求

  • 页面分为AB两个区域

  • 当手机可视区的底部接触到 “阻尼带” 的时候，有个上拉弹性过程

    • 当上拉到一定阈值程度就直接把B区顶部弹到手机可视区的顶部，让可视区从B区开始显示
    • 当上拉程度未到阈值，就回弹复原

  • 当手机可视区从B区向上滚动时候，B区顶部接触带“阻尼带”，有个下拉弹性过程

    • 当下拉到一定阈值程度就直接把A区底部弹到手机可视区的底部，让可视区从A区底部向上开始显示
    • 当下拉程度未到阈值，就回弹复原

• 提示

  • 可用jQuery实现

----------- 2018.06.25 增加新需求 ---------------

PC富文本内容自适应显示

• 要求

  • 有一段PC端显示的富文本HTML片段，在手机H5页面B区上加载显示

  • 保持PC端的样式缩放适应手机屏幕

  • 如果HTML富文本有图片

    • 图片默认不加载
    • 当手机可视区间到B区时候，图片触发懒加载显示
    • 点击富文本图时候，有弹层加载图片，可放大查看

• 提示

  • 可以考虑用iframe方式处理富文本
  • 但是要考虑到iframe的父子页面的通信和兼容性
  • 还有考虑到iframe里富文本图片懒加载导致高度变化带来的父页面的高度自适应

使用方法

1. 克隆仓库：git clone https://github.com/BeckyWang/h5-damping-effect.git
2. 安装依赖：npm install 可使用淘宝镜像cnpm
3. 开启服务：npm run dev-server 开启本地测试http服务。
4. 本地测试：npm run dev 等模块编译加载完成后，浏览器就会自动打开。
5. 生产环境：
   • npm run dist 用于压缩编译混淆代码。
   • npm run dist-server 开启生产环境下的http服务（默认8087端口）。
   • 浏览器访问localhost:8087/index.html。

滚动阻尼效果具体实现思路见我的博客-滚动阻尼效果。 富文本内容显示具体实现思路见我的博客-富文本显示。