html实现滚动刷新

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .news {
            width: 500px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div class="news">1</div>
    <div class="news">2</div>
    <div class="news">3</div>
    <div class="news">4</div>
    <div class="news">5</div>
    <div class="news">6</div>
    <div class="news">7</div>
    <div class="news">8</div>
    <div class="news">9</div>
    <div class="news">10</div>
    <div class="news">11</div>
    <div class="news">12</div>

    <script>
        document.addEventListener('scroll', function() {
            if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
                // 刷新数据
                console.log('刷新数据');

                window.scrollTo(0, 100);


            }
        });
    </script>
</body>

</html>

window.scrollTo第二个参数是document左上角到浏览器窗口左上角的垂直距离。

相关推荐
梦曦i7 小时前
@meng-xi/create-uni-app vs unibest:轻量脚手架与重型框架的定位之争
前端·uni-app
平头哥技术团队7 小时前
Day 10 | 工欲善其事:VS Code 配置与项目归档
android·开发语言·前端·javascript·html·交互
乌恩大侠8 小时前
GH200 新增 NVMe SSD 分区、格式化与挂载完整流程
运维·服务器·前端
yume_sibai8 小时前
Element Plus 数据展示组件完全指南(15个核心组件)
前端·javascript·vue.js
qiuhaipeng18 小时前
Claude code 升级后上下文长度变短问题
java·前端·数据库
zzz_23688 小时前
个人 AI 记忆如何跨工具复用:用 Markdown、索引和 Skill 搭一个可治理的记忆库
前端·人工智能·react.js·前端框架·agent·agent测评
剑之所向10 小时前
.NET 官方`System.Threading.Channels`
前端·javascript·数据库
计算机魔术师11 小时前
GPT-6 Astra幻觉砍到2%,却被一种老招数轻松绕过
前端
cjy00011111 小时前
2026AI 产品如何从一次性 Demo 变成可重复使用的业务工具?
前端·人工智能·fde
IT_陈寒11 小时前
React的状态更新坑得我差点加班到天亮
前端·人工智能·后端