用代码体验 H5 页面滚动阻尼效果：触摸与弹簧的巧妙结合

2024-01-04 05:11:29

什么是滚动阻尼效果？

滚动阻尼效果是一种用户界面元素，当用户滑动到页面顶部或底部时，页面内容会继续滑动一段距离，然后回弹到其原始位置。这为用户提供了一种微妙的反馈，表明他们已经到达了页面边缘。

如何在 H5 页面中实现滚动阻尼效果？

实现滚动阻尼效果需要以下步骤：

监听触摸事件 ：使用 JavaScript 的 touchstart 和 touchend 事件监听用户的触摸操作。
计算手指位置 ：在 touchstart 事件中，记录手指的初始位置。在 touchend 事件中，计算手指移动的距离。
应用阻尼效果 ：根据手指移动的距离和阻尼系数（一个控制回弹强度的值），使用 CSS transform 属性平滑地移动页面内容。
添加回弹动画 ：当用户松开手指时，使用 CSS transition 属性让页面内容回弹到其原始位置。

代码示例

<body>
  <div id="content">
    <!-- 页面内容 -->
  </div>
</body>

// 监听触摸事件
document.getElementById('content').addEventListener('touchstart', touchStart);
document.getElementById('content').addEventListener('touchend', touchEnd);

// 变量
let startY = 0; // 初始手指位置
let dampeningFactor = 0.05; // 阻尼系数

// 触摸开始事件处理程序
function touchStart(e) {
  startY = e.changedTouches[0].clientY;
}

// 触摸结束事件处理程序
function touchEnd(e) {
  // 计算手指移动的距离
  let endY = e.changedTouches[0].clientY;
  let deltaY = endY - startY;

  // 应用阻尼效果
  document.getElementById('content').style.transform = `translateY(${deltaY * dampeningFactor}px)`;

  // 添加回弹动画
  setTimeout(() => {
    document.getElementById('content').style.transition = 'transform 0.5s ease-out';
    document.getElementById('content').style.transform = 'translateY(0)';
  }, 10);
}