<div id="refresh-container">
  <div id="refresh-header">
    <span id="refresh-text">下拉刷新</span>
  </div>
  <div id="content">
    <p>第1条数据</p>
    <p>第2条数据</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1125">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680079579055.png" alt="OneStory">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1125">OneStory</a>
                            <p>OneStory 是一款创新的AI故事生成助手，用AI快速生成连续性、一致性的角色和故事。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="OneStory">
                                <span>319</span>
                            </div>
                        </div>
                        <a href="/ai/1125" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="OneStory">
                        </a>
                    </div>
                
    <p>第3条数据</p>
    ...
  </div>
</div>

#refresh-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
<h1>refresh-header {</h1><p>height: 50px;
text-align: center;
line-height: 50px;
background: #f5f5f5;
color: #999;
overflow: hidden;
transition: height 0.3s;
}</p>

let startY = 0;
let currentY = 0;
let isPulling = false;
const header = document.getElementById('refresh-header');
const text = document.getElementById('refresh-text');
const container = document.getElementById('refresh-container');
<p>container.addEventListener('touchstart', (e) => {
const scrollTop = container.scrollTop;
if (scrollTop === 0) {
startY = e.touches[0].pageY;
isPulling = true;
}
});</p><p>container.addEventListener('touchmove', (e) => {
if (!isPulling) return;</p><p>currentY = e.touches[0].pageY;
const diff = currentY - startY;</p><p>if (diff > 0) {
e.preventDefault();
header.style.height = diff + 'px';</p><pre class='brush:php;toolbar:false;'>if (diff > 60) {
  text.innerText = '释放刷新';
} else {
  text.innerText = '下拉刷新';
}

} });

container.addEventListener('touchend', () => { if (!isPulling) return; isPulling = false;

if (currentY - startY > 60) { // 触发刷新 text.innerText = '加载中...'; header.style.height = '50px';

// 模拟请求
setTimeout(() => {
  text.innerText = '刷新完成';
  header.style.height = '0';
  setTimeout(() => {
    text.innerText = '下拉刷新';
  }, 500);
}, 1000);

} else { // 取消刷新 header.style.height = '0'; } });