滚动鼠标到底部增加页面内容

最新推荐文章于 2024-05-14 09:35:57 发布
最新推荐文章于 2024-05-14 09:35:57 发布
阅读量118 收藏
点赞数
分类专栏： 代码 文章标签： html css js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xx661660/article/details/122598546
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .anlition {

            width: 1000px;

            margin: auto;

            border: 1pa solid red;

        }

        .anli {

            width: 100%;

            margin: 25px 0;

            display: flex;

            justify-content: space-between;

        }

        .ok {

            width: 200px;

            height: 300px;

            background-color: rgb(178, 212, 178);

        }

    </style>

</head>

<body>

    <div class="anlition">

        <div class="anli">

            <div class="ok"></div>

            <div class="ok"></div>

            <div class="ok"></div>

            <div class="ok"></div>

        </div>

        <div class="anli">

            <div class="ok"></div>

            <div class="ok"></div>

            <div class="ok"></div>

            <div class="ok"></div>

        </div>

        <div class="anli">

            <div class="ok"></div>

            <div class="ok"></div>

            <div class="ok"></div>

            <div class="ok"></div>

        </div>

    </div>

    <script>

        function over() {

            let timer = null;

            return function () {

                if (timer == null) {

                    timer = setTimeout(() => {

                        let div = document.createElement('div');

                        div.setAttribute('class','anli');

                        div.innerHTML=`<div class="ok"></div>

            <div class="ok"></div>

            <div class="ok"></div>

            <div class="ok"></div>`

            document.querySelector('.anlition').appendChild(div);

                        timer = null;

                    }, 350)

                }

            }

        }

        window.onscroll = over();

    </script>

</body>

</html>

前端小萝莉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript打飞机程序8x8x飞机大战js打飞机程序，飞机大战知识点包含了JavaScript面向过程的全部知识点，包括变量、运算符、判断、循环、数组、自定义函数、系统函数、事件等。...
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
11-26 38万+
js打飞机程序，飞机大战知识点包含了JavaScript面向过程的全部知识点，包括变量、运算符、判断、循环、数组、自定义函数、系统函数、事件等。讲解了JavaScript编程语言制作游戏界面，添加游戏控制、制作元素动画、制作多元素场景，添加碰撞功能、制作精灵动画等功能源码如下：html：<!DOCTYPE html&...
8x8x8 LED 立方体
热门推荐
strongerHuang
03-31 19万+
Incorrect string value: ‘\xE6\x9D\x8E\xE8\x80\x81...‘ for column ‘name‘ at row 1
執筆冩回憶
04-01 5564
使用jmeter或Navicat插入数据的时候报错：Incorrect string value: '\xE6\x9D\x8E\xE8\x80\x81...' for column 'name' at row 1 删除原表，重新创建表， 在新建表的代码后面加上DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci即可 create table teacher ( id int(6) auto_increment primary key, name char(20),
监控android USB拔插
lishubin871103的专栏
03-21 6万+
最近在做项目中遇到一个需要监控USB拔插来关闭服务的问题，当时查了不少资料，都是说android 3.0以上的USB类可以监控，╮(╯▽╰)╭比较难搞后来发现其实可以变通的监控外部电源来实现，相当于监控USB了呵呵，记录下来Intent.ACTION_POWER_DISCONNECTED 就是它了
分享一款很好的视频处理软件 会声会影X8（huishenghuiyingx8-trial_x64）
BXA
02-20 2万+
huishenghuiyingx8-trial_x64 安装包 会声会影X8
vue 实现滚动到底部翻页效果(pc端)
10-16
在Vue.js中，实现PC端滚动到底部自动加载更多数据（翻页效果）是一种常见的优化用户体验的方法，尤其在处理大量列表数据时。这种效果通常被称为“无限滚动”或“滚动加载”。以下是一个详细的实现步骤： 1. **HTML...
CSS3鼠标滚动控制页面滚动特效
07-24
在网页设计领域，CSS3（层叠样式表第三版）为开发者提供了许多强大的新特性，其中之一就是能够通过鼠标滚动来实现独特的页面滚动特效。本文将深入探讨如何利用CSS3实现"鼠标滚动控制页面滚动特效"，并以"全屏切换"的...
jQuery鼠标滚动条到页面底部浮动层滑动弹出信息
10-31
本文将深入探讨如何使用jQuery来实现“鼠标滚动条到页面底部时浮动层滑动弹出信息”的功能。 首先，我们需要理解jQuery的基本用法。jQuery是一个JavaScript库，它简化了DOM操作、事件处理、动画和Ajax交互。在HTML...
vue 使用鼠标滚动加载数据的例子
10-16
4. **判断滚动到底部**: 在 `handleScroll` 方法中，通过比较滚动条的当前位置 `scrollTop` 加上可视窗口的高度 `clientHeight` 是否大于内容区域的总高度 `scrollHeight` 来判断是否已经滚动到底部。如果满足条件，...
css中的position定位
forteenBrother的博客
07-31 527
position属性用于指定一个元素在文档中的定位方式。定位属性：top right bottom left 决定了元素的最终显示位置。
ERROR 1366 (HY000): Incorrect string value: '\xE4\xB8\x8D\xE5\xA5\xBD' for column 'description' at r
雅冰石的专栏
10-13 9699
一：问题描述 mysql>  update t set description='不好' where id=11; ERROR 1366 (HY000): Incorrect string value: '\xE4\xB8\x8D\xE5\xA5\xBD' for column 'description' at row 1 mysql> show variables like 'char%'
乱码 \x45\x2b\x3e\x46\x40\x47\问题
灵感点滴的分享
04-16 1019
a = "该类型字符串" print(a.encode("raw_unicode_escape").decode("utf-8"))
python2.x版本出现Unicode中文字符\xe5\xa5\xb3\xe5\xa3\xab\xef\xbc\x8c\xe6\x82\xa8\xe5\xa5\xbd',，怎样转换为中文
qq_38513966的博客
07-20 7697
在Python2.x版本中，已加了 #-*-coding:utf-8-*-程序运行结果出现的不是乱码，而是一些Unicode字符，('\xe5\xa5\xb3\xe5\xa3\xab\xef\xbc\x8c\xe6\x82\xa8\xe5\xa5\xbd）这属于Python2.x版本里的问题，是Unicode字符在内存中的形式，因为该版本不会自动转码。我目前尝试了一下。 方法一： pri...
5555555555555
Alden的专栏
10-04 454
http://v.baidu.com/kan/tvshow/?id=287&site=pptv.com&n=20140101&url=http%3A%2F%2Fv.pptv.com%2Fshow%2FjmTDQKgOfrwfnWE.html&ifrom=detail&vfm=bdvtx#frp=v.baidu.com%2Fshow_intro%2F
前端面试题集锦
u013993319的博客
07-07 4531
前端面试题集锦
探索隐藏参数的利器——x8：一款由Rust编写的高效安全工具
最新发布
gitblog_00066的博客
05-14 456
探索隐藏参数的利器——x8：一款由Rust编写的高效安全工具 项目地址:https://gitcode.com/Sh1Yo/x8 在网络安全领域，发现隐藏参数是识别潜在漏洞和功能的关键步骤。为此，我们向您推荐一个强大的开源项目——x8，它是一款用Rust语言编写的高度精准的参数探测工具。通过深入分析和对比页面，x8能够帮助您揭示那些可能被其他测试工具忽视的隐藏参数。 项目介绍 x8的设计理念是快速...
【数学建模】物资调度的线性约束条件优化模型
AIDreamer
11-27 1万+
1. 问题描述 某地区各县市的分布情况如图所示，图中的边表示连接各县市的公路，边权值表示车辆通过该路段所需的时间。 现在 D1, D2, D3 三地突发自然灾害，每天需要应急物资分别为 100 吨、80 吨和 60 吨；而能提供应急物资的县市为 A1, A2, …, A12，它们每天能提供 (30, 15, 15, 20, 35, 40, 30, 20, 10, 25, 25, 30) 吨的应急
8*8点阵控制
xinshuwei的博客
10-04 696
const int row1 = 2; // Arduino Pin2 连接点阵 行号9 const int row2 = 3; // Arduino Pin3 连接点阵 行号 14 const int row3 = 4; // Arduino Pin4 连接点阵 行号8 const int row4 = 5; // Arduino Pin5 连接点阵 行号 12 const int row5 = 17; // Arduino Pin17 (A3)连接点阵 行号1 const int row6 =
el-table鼠标滚动到底部加载第二页数据
06-13
您可以在el-table中监听一个scroll事件，当滚动到底部时触发一个方法，该方法可以通过ajax请求获取第二页的数据，并将其添加到现有的数据列表中。具体实现代码如下： ```html <template> <el-table :data="tableData" @scroll.native="handleScroll"> <!-- 表格列定义 --> </el-table> </template> <script> export default { data() { return { tableData: [], // 存储表格数据 currentPage: 1, // 当前页码 pageSize: 10, // 每页显示的数据条数 total: 0 // 总数据条数 } }, mounted() { // 页面加载时默认加载第一页数据 this.getTableData() }, methods: { getTableData() { // 发送ajax请求获取表格数据 const url = `/api/getTableData?page=${this.currentPage}&pageSize=${this.pageSize}` axios.get(url).then(res => { this.tableData = this.tableData.concat(res.data.list) this.total = res.data.total }) }, handleScroll(event) { const tableBody = event.target.querySelector('.el-table__body-wrapper') const scrollDistance = tableBody.scrollHeight - tableBody.scrollTop - tableBody.clientHeight if (scrollDistance <= 0) { // 滚动到底部，加载第二页数据 if (this.tableData.length < this.total) { this.currentPage++ this.getTableData() } } } } } </script> ``` 在上面的代码中，我们监听了el-table的scroll事件，并在handleScroll方法中计算了表格内容区域的滚动距离。当滚动距离为0时，说明已经滚动到了底部，此时我们判断当前是否还有更多数据需要加载，如果还有，则增加当前页码，发送ajax请求获取第二页数据，并将其添加到现有的表格数据中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值