实现一个下拉不到底的橡皮筋效果

// 获取需要实现橡皮筋效果的元素
const element = document.getElementById('scrollable-element');

// 记录初始触摸位置
let startY = 0;

// 记录当前滚动位置
let currentScroll = 0;

// 橡皮筋拉伸的最大距离
const maxPullDistance = 150;

// 阻尼系数，值越大阻力越大，回弹越慢
const dampingFactor = 0.4;


element.addEventListener('touchstart', (e) => {
  startY = e.touches[0].clientY;
  currentScroll = element.scrollTop;
});

element.addEventListener('touchmove', (e) => {
  const currentY = e.touches[0].clientY;
  const deltaY = currentY - startY;

  // 如果向下滑动且已经滚动到顶部
  if (deltaY > 0 && currentScroll <= 0) {
    // 计算拉伸距离
    const pullDistance = Math.min(deltaY * dampingFactor, maxPullDistance);

    // 设置元素的transform属性，实现下拉橡皮筋效果
    element.style.transform = `translateY(${pullDistance}px)`;

    // 阻止默认滚动行为
    e.preventDefault();
  }
  // 如果向上滑动且已经滚动到底部
  else if (deltaY < 0 && element.scrollTop + element.clientHeight >= element.scrollHeight) {
    // 计算拉伸距离
    const pullDistance = Math.max(deltaY * dampingFactor, -maxPullDistance);

    // 设置元素的transform属性，实现上拉橡皮筋效果
    element.style.transform = `translateY(${pullDistance}px)`;

    // 阻止默认滚动行为
    e.preventDefault();

  }
});

element.addEventListener('touchend', () => {
  // 手指离开屏幕后，将元素的transform属性重置，实现回弹效果
  element.style.transform = 'translateY(0)';
});

HTML 结构示例:

<!DOCTYPE html>
<html>
<head>
<title>Pull to Refresh</title>
<style>
  #scrollable-element {
    height: 300px; /* 设置一个固定的高度 */
    overflow-y: auto; /* 允许内容超出容器时滚动 */
  }
  .content {
    height: 500px; /* 内容高度大于容器高度，才能触发滚动 */
    background-color: lightgray;
  }
</style>
</head>
<body>

<div id="scrollable-element">
  <div class="content">
    <!-- 这里放置你的内容 -->
    Lots of content here...<br>
    ...
  </div>
</div>

<script src="your-script.js"></script> </body>
</html>

关键点解释:

touchstart 事件: 记录初始触摸位置 startY 和当前滚动位置 currentScroll。
touchmove 事件: 计算手指移动的距离 deltaY，并根据滚动位置和移动方向判断是否需要应用橡皮筋效果。
Math.min 和 Math.max: 限制拉伸距离不超过 maxPullDistance。
transform: translateY(): 通过 CSS 的 transform 属性实现下拉/上拉的视觉效果。
e.preventDefault(): 阻止 touchmove 事件的默认滚动行为，避免页面同时滚动和拉伸。
touchend 事件: 手指离开屏幕时，将 transform 属性重置为 translateY(0)，实现回弹动画。
dampingFactor: 阻尼系数，控制回弹速度和阻力。值越大，阻力越大，回弹越慢。
overflow-y: auto;: 确保内容超出容器时可以滚动，这是实现橡皮筋效果的前提。

使用方法:

将 JavaScript 代码保存为 your-script.js 文件。
在 HTML 文件中引入 JavaScript 文件 <script src="your-script.js"></script>。
将 #scrollable-element 替换为你想要应用橡皮筋效果的元素的 ID。

改进方向:

添加过渡效果: 使用 CSS 的 transition 属性可以使回弹动画更平滑。
自定义回弹动画: 可以使用 JavaScript 动画库或 CSS 动画实现更复杂的回弹效果。
结合下拉刷新: 可以

posted @ 2024-12-08 06:02 王铁柱6 阅读(60) 评论(0) 收藏举报

刷新页面返回顶部

实现一个下拉不到底的橡皮筋效果

公告