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

相关文章

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

Mysql表的简单操作(基本技能)

《Mysql表的简单操作(基本技能)》在数据库中,表的操作主要包括表的创建、查看、修改、删除等,了解如何操作这些表是数据库管理和开发的基本技能,本文给大家介绍Mysql表的简单操作,感兴趣的朋友一起看... 目录3.1 创建表 3.2 查看表结构3.3 修改表3.4 实践案例:修改表在数据库中,表的操作主要

C# WinForms存储过程操作数据库的实例讲解

《C#WinForms存储过程操作数据库的实例讲解》:本文主要介绍C#WinForms存储过程操作数据库的实例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、存储过程基础二、C# 调用流程1. 数据库连接配置2. 执行存储过程(增删改)3. 查询数据三、事务处

Java使用Curator进行ZooKeeper操作的详细教程

《Java使用Curator进行ZooKeeper操作的详细教程》ApacheCurator是一个基于ZooKeeper的Java客户端库,它极大地简化了使用ZooKeeper的开发工作,在分布式系统... 目录1、简述2、核心功能2.1 CuratorFramework2.2 Recipes3、示例实践3

Java利用JSONPath操作JSON数据的技术指南

《Java利用JSONPath操作JSON数据的技术指南》JSONPath是一种强大的工具,用于查询和操作JSON数据,类似于SQL的语法,它为处理复杂的JSON数据结构提供了简单且高效... 目录1、简述2、什么是 jsONPath?3、Java 示例3.1 基本查询3.2 过滤查询3.3 递归搜索3.4

Python使用DrissionPage中ChromiumPage进行自动化网页操作

《Python使用DrissionPage中ChromiumPage进行自动化网页操作》DrissionPage作为一款轻量级且功能强大的浏览器自动化库,为开发者提供了丰富的功能支持,本文将使用Dri... 目录前言一、ChromiumPage基础操作1.初始化Drission 和 ChromiumPage

利用Go语言开发文件操作工具轻松处理所有文件

《利用Go语言开发文件操作工具轻松处理所有文件》在后端开发中,文件操作是一个非常常见但又容易出错的场景,本文小编要向大家介绍一个强大的Go语言文件操作工具库,它能帮你轻松处理各种文件操作场景... 目录为什么需要这个工具?核心功能详解1. 文件/目录存javascript在性检查2. 批量创建目录3. 文件

Redis中管道操作pipeline的实现

《Redis中管道操作pipeline的实现》RedisPipeline是一种优化客户端与服务器通信的技术,通过批量发送和接收命令减少网络往返次数,提高命令执行效率,本文就来介绍一下Redis中管道操... 目录什么是pipeline场景一:我要向Redis新增大批量的数据分批处理事务( MULTI/EXE

使用Python高效获取网络数据的操作指南

《使用Python高效获取网络数据的操作指南》网络爬虫是一种自动化程序,用于访问和提取网站上的数据,Python是进行网络爬虫开发的理想语言,拥有丰富的库和工具,使得编写和维护爬虫变得简单高效,本文将... 目录网络爬虫的基本概念常用库介绍安装库Requests和BeautifulSoup爬虫开发发送请求解

Oracle存储过程里操作BLOB的字节数据的办法

《Oracle存储过程里操作BLOB的字节数据的办法》该篇文章介绍了如何在Oracle存储过程中操作BLOB的字节数据,作者研究了如何获取BLOB的字节长度、如何使用DBMS_LOB包进行BLOB操作... 目录一、缘由二、办法2.1 基本操作2.2 DBMS_LOB包2.3 字节级操作与RAW数据类型2.