js滑动操作之-pageYOffset,scrollTop,offsetHeight,scrollHeight

本文主要是介绍js滑动操作之-pageYOffset,scrollTop,offsetHeight,scrollHeight,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

读值

1)

window.pageYOffset==window.scrollY


it returns the number of pixels the document is currently scrolled along the vertical axis

2)

scrollElm.scrollTop  

gets or sets the number of pixels that an element's content is scrolled vertically.

注意这里的scrollElm代表可滑动的元素,测试元素是否可以滑动可以用如下方法:

设置值

// Set the number of pixels scrolled.
scrollElm.scrollTop = intValue;

代码示例

<div id="container"><div id="scroller"><p>Far out in the uncharted backwaters of the unfashionable endof the western spiral arm of the Galaxy lies a small unregardedyellow sun. Orbiting this at a distance of roughly ninety-two millionmiles is an utterly insignificant little blue green planet whoseape-descended life forms are so amazingly primitive that they stillthink digital watches are a pretty neat idea.</p></div>
</div><div id="output">scrollTop: 0</div>
const scroller = document.querySelector("#scroller");
const output = document.querySelector("#output");scroller.addEventListener("scroll", event => {output.textContent = `scrollTop: ${scroller.scrollTop}`;
});

 

scroll事件的解释:

代码示例

    var pc = document.getElementById('page-container')pc.addEventListener('scroll', function(e) {window.parent.postMessage("scrollTop_zh:" + pc.scrollTop, "*")});

这是一个静态的元素高.

还有一个容易混的scrollHeight

 document或iframe监听滑动失败的问题

https://blog.csdn.net/u010087338/article/details/121712846icon-default.png?t=LA92https://blog.csdn.net/u010087338/article/details/121712846

这篇关于js滑动操作之-pageYOffset,scrollTop,offsetHeight,scrollHeight的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/961942

相关文章

Java操作Word文档的全面指南

《Java操作Word文档的全面指南》在Java开发中,操作Word文档是常见的业务需求,广泛应用于合同生成、报表输出、通知发布、法律文书生成、病历模板填写等场景,本文将全面介绍Java操作Word文... 目录简介段落页头与页脚页码表格图片批注文本框目录图表简介Word编程最重要的类是org.apach

Python实现对阿里云OSS对象存储的操作详解

《Python实现对阿里云OSS对象存储的操作详解》这篇文章主要为大家详细介绍了Python实现对阿里云OSS对象存储的操作相关知识,包括连接,上传,下载,列举等功能,感兴趣的小伙伴可以了解下... 目录一、直接使用代码二、详细使用1. 环境准备2. 初始化配置3. bucket配置创建4. 文件上传到os

mysql表操作与查询功能详解

《mysql表操作与查询功能详解》本文系统讲解MySQL表操作与查询,涵盖创建、修改、复制表语法,基本查询结构及WHERE、GROUPBY等子句,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随... 目录01.表的操作1.1表操作概览1.2创建表1.3修改表1.4复制表02.基本查询操作2.1 SE

c++中的set容器介绍及操作大全

《c++中的set容器介绍及操作大全》:本文主要介绍c++中的set容器介绍及操作大全,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录​​一、核心特性​​️ ​​二、基本操作​​​​1. 初始化与赋值​​​​2. 增删查操作​​​​3. 遍历方

MySQL追踪数据库表更新操作来源的全面指南

《MySQL追踪数据库表更新操作来源的全面指南》本文将以一个具体问题为例,如何监测哪个IP来源对数据库表statistics_test进行了UPDATE操作,文内探讨了多种方法,并提供了详细的代码... 目录引言1. 为什么需要监控数据库更新操作2. 方法1:启用数据库审计日志(1)mysql/mariad

springboot如何通过http动态操作xxl-job任务

《springboot如何通过http动态操作xxl-job任务》:本文主要介绍springboot如何通过http动态操作xxl-job任务的问题,具有很好的参考价值,希望对大家有所帮助,如有错... 目录springboot通过http动态操作xxl-job任务一、maven依赖二、配置文件三、xxl-

Oracle 数据库数据操作如何精通 INSERT, UPDATE, DELETE

《Oracle数据库数据操作如何精通INSERT,UPDATE,DELETE》在Oracle数据库中,对表内数据进行增加、修改和删除操作是通过数据操作语言来完成的,下面给大家介绍Oracle数... 目录思维导图一、插入数据 (INSERT)1.1 插入单行数据,指定所有列的值语法:1.2 插入单行数据,指

SQL中JOIN操作的条件使用总结与实践

《SQL中JOIN操作的条件使用总结与实践》在SQL查询中,JOIN操作是多表关联的核心工具,本文将从原理,场景和最佳实践三个方面总结JOIN条件的使用规则,希望可以帮助开发者精准控制查询逻辑... 目录一、ON与WHERE的本质区别二、场景化条件使用规则三、最佳实践建议1.优先使用ON条件2.WHERE用

Linux链表操作方式

《Linux链表操作方式》:本文主要介绍Linux链表操作方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、链表基础概念与内核链表优势二、内核链表结构与宏解析三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势六、典型应用场景七、调试技巧与

Java Multimap实现类与操作的具体示例

《JavaMultimap实现类与操作的具体示例》Multimap出现在Google的Guava库中,它为Java提供了更加灵活的集合操作,:本文主要介绍JavaMultimap实现类与操作的... 目录一、Multimap 概述Multimap 主要特点:二、Multimap 实现类1. ListMult