js写的手机上下拉特效

<div id="refresh-container">
  <div id="refresh-indicator">下拉刷新</div>
  <div id="content">
    <!-- 页面内容 -->
  </div>
</div>

#refresh-container {
  position: relative;
  overflow: hidden;
}

#refresh-indicator {
  position: absolute;
  top: -50px;
  width: 100%;
  text-align: center;
  transition: top 0.3s;
}

let startY = 0;
const refreshContainer = document.getElementById('refresh-container');
const refreshIndicator = document.getElementById('refresh-indicator');

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

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

  if (diff > 0 && window.scrollY === 0) {
    e.preventDefault();
    refreshIndicator.style.top = `${Math.min(diff - 50, 0)}px`;
  }
});

refreshContainer.addEventListener('touchend', () => {
  if (parseInt(refreshIndicator.style.top) === -50) {
    // 模拟刷新操作
    refreshIndicator.textContent = '正在刷新...';
    setTimeout(() => {
      refreshIndicator.textContent = '下拉刷新';
      refreshIndicator.style.top = '-50px';
      // 更新内容
      alert('内容已刷新');
    }, 1000);
  } else {
    refreshIndicator.style.top = '-50px';
  }
});