崇信县门户网站最新留言/网页设计制作网站代码

崇信县门户网站最新留言,网页设计制作网站代码,旅游网站建设实训报告,网页管理平台设置div的overflow属性,可以使得该div具有滚动效果,下面以div中包含的是table来举例。 当table的元素较多,以至于超出div的显示范围的话,观察下该div元素的以下3个属性: clientHeight是div的显示高度,scrol…

设置div的overflow属性,可以使得该div具有滚动效果,下面以div中包含的是table来举例。
当table的元素较多,以至于超出div的显示范围的话,观察下该div元素的以下3个属性:
clientHeight是div的显示高度,scrollHeight是整个table的高度,scrollTop是上方溢出区高度,注意下,下方溢出高度没有直接的属性,需要计算得到,就是scrollHeight-clientHeight-scrollTop
在这里插入图片描述
有时候,我们在界面上不提供上一页、下一页这样的按钮,而是通过滚动(PC上通过鼠标滚动来实现,触摸屏通过手指在屏幕上滑动来实现)来加载前面或后面的数据,当向上滚动时如果上方溢出区高度小于某个阈值时加载前面的记录,当向下滚动时如果下方溢出区高度小于某个阈值时加载后面的记录。向后追加数据后,当前可视区域内容不会有变化,而向前插入数据的话,为了不影响可视区域内容,我们可以将scrollTop调整下高度,具体增大值为插入后的scrollHeight与插入前的scrollHeight之差。
从内存和性能方面考虑,html的table中元素应该有一个数量限制,不应该只允许添加而从不删除,所以可以在添加数据后进行判断,如果超限则执行删除,向前插入则删除最后的行,向后插入则删除最先的行。
有scroll事件,但是没有向上滚动或者向下滚动事件,滚动的方向是需要计算判断的,比如保存上次滚动时的scrollTop,跟当前的scrollTop进行比较,当前的大,则是向下滚动,当前的小,则是向上滚动。
这样基本完成了设计,但是仍有一些坑,一般数据的获取是从后端http异步调用得到,会花一些时间,而scroll的事件是浏览器前端触发,在数据获取期间,不应该继续向后端发起数据获取请求,每次数据获取完成时,再允许向后端发起数据获取请求,可以设置一个变量来标识是否在进行数据获取处理。还有一个可能遇到的坑,存在一定概率发生,当上次滚动事件完成时,可视区域正好停在滚动区域顶部或者底部,这时如果向上滚动或者向下滚动时,浏览器可能会屏蔽向上滚动事件发生或向下滚动事件发生。那么此时要不要采用其他方式来触发呢?可以的,此时不能只监听scoll事件了,对于鼠标滚动事件(wheel)要监听下,从事件的deltaY属性跟此前的值进行比较来判断是向上滚动还是向下滚动,或者对触屏的touchstart事件与touchmove事件进行监听,以判断是向上滑动还是向下滑动。参考代码如下:

    <script>// 监听 scroll 事件window.addEventListener('scroll', function() {console.log('Scroll event triggered, scrollTop:', document.documentElement.scrollTop);});// 监听 wheel 事件(鼠标滚轮或触摸板)window.addEventListener('wheel', function(event) {console.log('Wheel event triggered, deltaY:', event.deltaY);});// 监听 touchstart 和 touchmove 事件(触摸设备)let startY = 0;window.addEventListener('touchstart', function(event) {startY = event.touches[0].clientY; // 记录触摸起始位置});window.addEventListener('touchmove', function(event) {const currentY = event.touches[0].clientY; // 获取当前触摸位置const deltaY = currentY - startY; // 计算滑动距离console.log('Touchmove event triggered, deltaY:', deltaY);});</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/898151.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

人工智能助力家庭机器人:从清洁到陪伴的智能转型

引言&#xff1a;家庭机器人进入智能时代 过去&#xff0c;家庭机器人只是简单的“工具”&#xff0c;主要用于扫地、拖地、擦窗等单一任务。然而&#xff0c;随着人工智能&#xff08;AI&#xff09;技术的迅猛发展&#xff0c;家庭机器人正经历从“机械助手”向“智能管家”甚…

Flume详解——介绍、部署与使用

1. Flume 简介 Apache Flume 是一个专门用于高效地 收集、聚合、传输 大量日志数据的 分布式、可靠 的系统。它特别擅长将数据从各种数据源&#xff08;如日志文件、消息队列等&#xff09;传输到 HDFS、HBase、Kafka 等大数据存储系统。 特点&#xff1a; 可扩展&#xff1…

Spring源码解析

第一讲 容器接口 BeanFactory和ApplicationContext接口的具体继承关系&#xff1a; ApplicationContext 间接继承了BeanFactory BeanFactory是父接口ApplicationContext是子接口&#xff0c;里面一些功能调用了BeanFactory BeanFactory的功能 表面上只有 getBean&#xff0…

Django Rest Framework 创建纯净版Django项目部署DRF

描述创建纯净版的Django项目和 Django Rest Framework 环境的部署 一、创建Django项目 1. 环境说明 操作系统 Windows11python版本 3.9.13Django版本 V4.2.202. 操作步骤(在Pycharm中操作) 创建Python项目drfStudy、虚拟环境 ​虚拟环境中安装 jdangopip install django==4.…

图解AUTOSAR_CP_NetworkManagementInterface

AUTOSAR 网络管理接口(Nm)详解 AUTOSAR 网络管理接口规范与实现指南 目录 1. 概述 1.1. 网络管理接口的作用1.2. 网络管理接口的特点 2. 网络管理接口架构 2.1. 架构概览2.2. 模块交互关系 3. 网络管理状态机 3.1. 状态定义3.2. 状态转换 4. 协调算法 4.1. 协调关闭流程4.2. 同…

java学习总结(八):Spring boot

一、SpringBoot简介 传统Spring开发缺点&#xff1a; 1、导入依赖繁琐 2、项目配置繁琐 Spring Boot是全新框架(更像是一个工具&#xff0c; 脚手架)&#xff0c;是Spring提供的一个子项目&#xff0c; 用于快速构建Spring应用程序。 随着Spring 3.0的发布&#xff0c;Spring 团…

openEuler24.03 LTS下安装MySQL8

前提条件 拥有openEuler24.03 LTS环境&#xff0c;可参考&#xff1a;Vmware下安装openEuler24.03 LTS 步骤 卸载原有mysql及mariadb sudo systemctl stop mysql mysqld 2>/dev/null sudo rpm -qa | grep -i mysql\|mariadb | xargs -n1 sudo rpm -e --nodeps 2>/dev/…

【失败了】LazyGraphRAG利用本地ollama提供Embedding model服务和火山引擎的deepseek API构建本地知识库

LazyGraphRAG测试结果如下 数据&#xff1a; curl https://www.gutenberg.org/cache/epub/24022/pg24022.txt -o ./ragtest/input/book.txt 失败了 气死我也&#xff01;&#xff01;&#xff01;对deepseek-V3也不是很友好啊&#xff0c;我没钱prompt 微调啊&#xff0c;晕死…

ccfcsp3402矩阵重塑(其二)

//矩阵重塑&#xff08;其二&#xff09; #include<iostream> using namespace std; int main(){int n,m,t;cin>>n>>m>>t;int c[10000][10000];int s0,sum0;int d[10000],k[100000];for(int i0;i<n;i){for(int j0;j<m;j){cin>>c[i][j];d[s…

Unity Shader - UI Sprite Shader之简单抠图效果

Sprite抠图效果&#xff1a; 前言 在PhotoShop中我们经常会用到抠图操作&#xff0c;现在就用Shader实现一个简单的抠图效果。 实现原理&#xff1a; 使用当前像素颜色与需要抠掉的颜色相减作比较&#xff0c;然后与一个指定的阈值比较以决定是否将其显示出来&#xff1b; U…

【Mac】安装 Parallels Desktop、Windows、Rocky Linux

一、安装PD 理论上&#xff0c;PD只支持试用15天&#xff01;当然&#xff0c;你懂的。 第一步&#xff0c;在 Parallels Desktop for Mac 官网 下载 Install Parallels Desktop.dmg第二步&#xff0c;双击 Install Parallels Desktop.dmg 第三步&#xff0c;双击安装Paralle…

学习单片机需要多长时间才能进行简单的项目开发?

之前有老铁问我&#xff0c;学单片机到底要多久&#xff0c;才能进行简单的项目开发&#xff1f;是三个月速成&#xff0c;还是三年磨一剑&#xff1f; 今天咱们就来聊聊这个话题&#xff0c;我不是什么高高在上的专家&#xff0c;就是个踩过无数坑、烧过几块板子的“技术老友”…

centos操作系统上传和下载百度网盘内容

探序基因 整理 进入百度网盘官网百度网盘 客户端下载 下载linux的rpm格式的安装包 在linux命令行中输入&#xff1a;rpm -ivh baidunetdisk_4.17.7_x86_64.rpm 出现报错&#xff1a; 错误&#xff1a;依赖检测失败&#xff1a; libXScrnSaver 被 baidunetdisk-4.17.7-1.x8…

蓝牙系统的核心组成解析

一、硬件层&#xff1a;看得见的物理载体 1. 射频模块&#xff08;Radio Frequency Module&#xff09; 专业描述&#xff1a;工作在2.4GHz ISM频段&#xff0c;支持GFSK/π/4 DQPSK/8DPSK调制方式 功能类比&#xff1a;相当于人的"嘴巴"和"耳朵" 发射端…

go的gmp

参考链接&#xff1a;https://www.bilibili.com/video/BV19r4y1w7Nx Golang的GMP调度模型(协程调度器)是其并发编程的核心。GMP代表Goroutine、Machine和Processor三个关键组成部分。Goroutine是Go语言中的轻量级线程&#xff0c;Machine是操作系统的线程&#xff0c;Processor…

Vue3-高级特性

一、Vue中自定义指令 1.认识自定义指令 在Vue的模板语法中我们学习过各种各样的指令&#xff1a;v-show、v-for、v-model等等&#xff0c;除了使用这些指令之外&#xff0c;Vue也允许我们来 自定义自己的指令。 注意&#xff1a;在Vue中&#xff0c;代码的复用和抽象主要还是…

基于CPLD电力/轨道交通3U机箱开关量输出板(DO)

板卡简介&#xff1a; 本板为开关量输出板&#xff08;DO&#xff09;&#xff0c;采用固态继电器用于电平输出或负载驱动&#xff0c;典型输出高电平为DC110V&#xff0c;低电平为0V。 性能规格&#xff1a; 电源&#xff1a;DC5V&#xff0c;DC3.3V&#xff0c;DC15V&#…

【C++经典例题】反转字符串中单词的字符顺序:两种实现方法详解

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;C经典例题 期待您的关注 目录 问题描述 基于快慢指针的解法 基于索引的解法 两种方法的比较 问题描述 在处理字符串相关的问题…

Java基础语法练习45(网络编程)

目录 一、网络的相关概念 1.网络通信 2.网络 3.ip 地址 4.ipv4 地址分类 5.域名 6.网络通信协议 7.TCP 和 UDP 二、InetAddress类 1.相关方法 2.代码示例如下&#xff1a; 三、Socket 1.基本介绍 四、TCP 网络通信编程 1.基本介绍 2.应用示例&#xff1a; 2.1…

【Json—RPC框架】:宏定义不受命名空间限制,续行符的错误使用造成的bug

为什么不受命名空间的限制&#xff1f; 宏处理在预处理阶段&#xff0c; 预处理在编译之前&#xff0c;编译才进行语法分析&#xff0c;语义分析。命名空间也只能限制这部分。 在Json-RPC框架的实现中&#xff0c;遇到如下问题。一开始以为是在实现日志宏的时候&#xff0c;有…