js：可能是最全的scroll相关的方法

已于 2023-07-04 12:01:52 修改
阅读量3k 收藏 7
点赞数 3
分类专栏： # js 文章标签： javascript 开发语言 ecmascript
于 2019-07-17 16:54:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43972437/article/details/96306593
版权

1、基本API

screenLeft

返回相对于屏幕的X坐标。

screenX

返回相对于屏幕的X坐标，同screenLeft。

scrollX

scrollX和scrollY分别是文档相对于当前浏览器视口已滚动的距离。

scrollTop，scrollLeft

网页上边被卷去的内容高度。注：只有dom有

获取：element.scrollTop
赋值：element.scrollTop = 200

scrollHeight，scrollWidth

元素滚动条内的内容高度。注：只有dom有，只读，不可设置

获取：element.scrollHeight
document.getElementById('mainBox').scrollWidth

scrollBy(x,y)

滚动指定的距离。

scrollTo(x,y)

滚动到指定的坐标位置。

clientX

鼠标指针到屏幕可视区域左端的距离

dom.onclick = function (e) {
   console.log(e.clientX);
}

pageYOffset

滚动条距离页面顶部的距离。

offsetTop

获取ele元素距离父元素的offsetTop值

el.offsetTop;

offsetParent

获取该元素的有定位的父级元素

el.offsetTop;

2、实例

判断滚动到底部

<!DOCTYPE html>
<html>
<head>
	<title>判断滚动到底部</title>
	<style type="text/css">
		#aa{
			width:300px;
			height:400px;
			overflow-y:scroll;
		}
	</style>
	<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
</head>
<body>
	<div id="aa">
		<div id="bb">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nostrum, fuga veniam tenetur ex assumenda. Doloremque, nesciunt? Unde dolorum, sapiente est quaerat quas consectetur, necessitatibus hic aperiam repellat odit blanditiis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nostrum, fuga veniam tenetur ex assumenda. Doloremque, nesciunt? Unde dolorum, sapiente est quaerat quas consectetur, necessitatibus hic aperiam repellat odit blanditiis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nostrum, fuga veniam tenetur ex assumenda. Doloremque, nesciunt? Unde dolorum, sapiente est quaerat quas consectetur, necessitatibus hic aperiam repellat odit blanditiis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nostrum, fuga veniam tenetur ex assumenda. Doloremque, nesciunt? Unde dolorum, sapiente est quaerat quas consectetur, necessitatibus hic aperiam repellat odit blanditiis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nostrum, fuga veniam tenetur ex assumenda. Doloremque, nesciunt? Unde dolorum, sapiente est quaerat quas consectetur, necessitatibus hic aperiam repellat odit blanditiis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nostrum, fuga veniam tenetur ex assumenda. Doloremque, nesciunt? Unde dolorum, sapiente est quaerat quas consectetur, necessitatibus hic aperiam repellat odit blanditiis!
		</div>
	</div>
	<div>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nostrum, fuga veniam tenetur ex assumenda. Doloremque, nesciunt? Unde dolorum, sapiente est quaerat quas consectetur, necessitatibus hic aperiam repellat odit blanditiis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nostrum, fuga veniam tenetur ex assumenda. Doloremque, nesciunt? Unde dolorum, sapiente est quaerat quas consectetur, necessitatibus hic aperiam repellat odit blanditiis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nostrum, fuga veniam tenetur ex assumenda. Doloremque, nesciunt? Unde dolorum, sapiente est quaerat quas consectetur, necessitatibus hic aperiam repellat odit blanditiis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nostrum, fuga veniam tenetur ex assumenda. Doloremque, nesciunt? Unde dolorum, sapiente est quaerat quas consectetur, necessitatibus hic aperiam repellat odit blanditiis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nostrum, fuga veniam tenetur ex assumenda. Doloremque, nesciunt? Unde dolorum, sapiente est quaerat quas consectetur, necessitatibus hic aperiam repellat odit blanditiis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nostrum, fuga veniam tenetur ex assumenda. Doloremque, nesciunt? Unde dolorum, sapiente est quaerat quas consectetur, necessitatibus hic aperiam repellat odit blanditiis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nostrum, fuga veniam tenetur ex assumenda. Doloremque, nesciunt? Unde dolorum, sapiente est quaerat quas consectetur, necessitatibus hic aperiam repellat odit blanditiis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nostrum, fuga veniam tenetur ex assumenda. Doloremque, nesciunt? Unde dolorum, sapiente est quaerat quas consectetur, necessitatibus hic aperiam repellat odit blanditiis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nostrum, fuga veniam tenetur ex assumenda. Doloremque, nesciunt? Unde dolorum, sapiente est quaerat quas consectetur, necessitatibus hic aperiam repellat odit blanditiis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nostrum, fuga veniam tenetur ex assumenda. Doloremque, nesciunt? Unde dolorum, sapiente est quaerat quas consectetur, necessitatibus hic aperiam repellat odit blanditiis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nostrum, fuga veniam tenetur ex assumenda. Doloremque, nesciunt? Unde dolorum, sapiente est quaerat quas consectetur, necessitatibus hic aperiam repellat odit blanditiis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nostrum, fuga veniam tenetur ex assumenda. Doloremque, nesciunt? Unde dolorum, sapiente est quaerat quas consectetur, necessitatibus hic aperiam repellat odit blanditiis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nostrum, fuga veniam tenetur ex assumenda. Doloremque, nesciunt? Unde dolorum, sapiente est quaerat quas consectetur, necessitatibus hic aperiam repellat odit blanditiis!Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nostrum, fuga veniam tenetur ex assumenda. Doloremque, nesciunt? Unde dolorum, sapiente est quaerat quas consectetur, necessitatibus hic aperiam repellat odit blanditiis!Lorem ipsum dolor sit amet consectetur 
	</div>
</body>
<script type="text/javascript">
	$(function() {
		//#aa这一部分滚动到底部
		$("#aa").scroll(function() {
			// 源生写法
			// if(this.scrollTop >= this.scrollHeight - this.clientHeight) {
			// 	alert('aa滑到了底部');
			// }

			// jQuery写法
			if($(this).scrollTop() >= $(this)[0].scrollHeight - $(this).height()) {
				alert('aa滑到了底部');
			}
		})

		//整个页面滚动到底部
		$(window).scroll(function() {
			// 源生写法(下一块代码)
			// 很麻烦，因为要判断document.body和document.documentElement对各个浏览器的兼容性，可参考https://www.cnblogs.com/winyh/p/6715010.html

			// jQuery写法
			if($(window).scrollTop() >= $(document).height() - $(window).height()) {
				alert('页面滑到了底部');
			}
		})
	})
</script>
</html>

源生整个页面滚动到底部（兼容不同的浏览器）。
//滚动条在Y轴上的滚动距离
function getScrollTop(){
　　var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
　　if(document.body){
　　　　bodyScrollTop = document.body.scrollTop;
　　}
　　if(document.documentElement){
　　　　documentScrollTop = document.documentElement.scrollTop;
　　}
　　scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
　　return scrollTop;
}
 
//文档的总高度
function getScrollHeight(){
　　var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
　　if(document.body){
　　　　bodyScrollHeight = document.body.scrollHeight;
　　}
　　if(document.documentElement){
　　　　documentScrollHeight = document.documentElement.scrollHeight;
　　}
　　scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
　　return scrollHeight;
}
 
//浏览器视口的高度
function getWindowHeight(){
　　var windowHeight = 0;
　　if(document.compatMode == "CSS1Compat"){
　　　　windowHeight = document.documentElement.clientHeight;
　　}else{
　　　　windowHeight = document.body.clientHeight;
　　}
　　return windowHeight;
}
 
window.onscroll = function(){
　　if(getScrollTop() + getWindowHeight() == getScrollHeight()){
　　　　alert("已经到最底部了！!");
　　}
};
Lvan的前端笔记
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js中scroll滚动相关
jggnice的博客
05-17 3683
js中scroll滚动相关 scroll，滚动，一般讨论的是网页整体与浏览器之间的关系。 一.元素相关 属性/方法 解释 element.scrollHeight 返回元素的整体高度。 element.scrollWidth 返回元素的整体宽度。 element.scrollLeft 返回元素左边缘与视图之间的距离。 element.scrollTop 返回元素上边缘与视图之间的距离。 这四个属性，全部是只读属性 其中，无非就是分为宽高和左..
javaScript：滚动事件以及窗口事件
qq_52799985的博客
10-10 1082
滚动事件和窗口事件用来实现响应式设计、动态调整页面元素等功能，提升用户体验。在处理这些事件时，需要考虑兼容性以确保在不同浏览器环境下都能正常运行。
Javascript：元素滚动事件
最新发布
听海边涛声
06-23 271
Javascript：元素滚动事件
「终极收藏」前端开发必备：超全JavaScript公共方法大全
05-24 940
在前端开发中，JavaScript是必不可少的一部分，而掌握各种常用的公共方法更是提升开发效率和代码质量的关键。无论你是初学者还是资深开发者，了解并熟练运用这些方法都能让你的代码更加简洁、高效。本篇博客将为你详细汇总并解析最全的JavaScript公共方法，涵盖数组、对象、字符串、日期等各个方面的常用技巧。希望通过这篇文章，能为你的前端开发之路提供有力的帮助，成为你开发过程中不可或缺的参考指南。
JS事件最全详解
qq_44741577的博客
02-01 2739
方法用于向指定元素添加事件处理程序（事件句柄handler参数1：事件名称必须。字符串，指定事件名。注意: 不要使用 “on” 前缀。例如，使用click,而不是使用onclick。参数2function必须。指定要事件触发时执行的函数。注意：事件对象会作为第一个参数传入函数。参数3useCapture可选。布尔值，指定事件是否在捕获或冒泡阶段执行。true- 事件处理程序（事件句柄）在捕获阶段执行false默认。事件处理程序（事件句柄）在冒泡阶段执行事件对象的类型取决于特定的事件。例如，click。
JavaScript高级开发必备：Bom和Dom全解析
会思想的苇草i的博客
12-23 873
JavaScript BOM（浏览器对象模型）和DOM（文档对象模型）是前端开发中的两个重要概念。BOM是用于操作浏览器窗口、浏览器历史记录和浏览器位置等的API，而DOM则是用于操作HTML和XML文档中的元素和属性的API。通过使用BOM和DOM，开发人员可以创建交互性更强的网页，实现动态效果和用户交互功能。
2024最全JavaScript基础、核心、进阶大全
weixin_56048772的博客
06-04 712
JavaScript 是一种运行在客户端（浏览器）的编程语言ECMAScript( 基础语法 )、web APIs （DOM、BOM）（1）内部：写在里面（2）外部：引用外部js （3）内联：vue框架中 4.变量 计算机中用来存储数据的“容器”，简单理解是一个个的盒子。用来存放数据的。注意变量指的是容器而不是数据。 4.2更新变量： 变量赋值后，还可以通过简单地给它一个不同的值来更新它 //这里先声明未赋值，结果是undefined//可以先使用 在声明，结果不报错是10//可以重复声明,结果是30，后面
最全整理浏览器兼容性问题与解决方案
Mighty_soldiers的博客
08-04 1249
这里写欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 ...
base scroll横向滚动_微信小程序实践：2.3 可滚动的容器组件之 scroll-view
weixin_39814088的博客
11-17 1003
目录1、scroll-view 相关问题2、应用场景3、主要属性讲解 3.1，scroll-x、scroll-y，scroll-top、scroll-left、scroll-into-view 3.2，滚动锚定：scroll-anchoring 3.3，upper-threshold、lower-threshold、bindscrolltoupper、bindscrolltolower、bi...
史上最全js面试题
m0_60676278的博客
07-16 2316
对象字面量：var obj = {};构造函数：var obj = new Object();Object是JavaScript中所有对象的父对象数据封装类对象：Object、Array、Boolean、Number和String其他对象：Function、Arguments、Math、Date、RegExp、Error闭包就是能够读取其他函数内部变量的函数。
js：bind(this)这是什么写法
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
04-10 9796
bind bind方法会创建一个新函数,称为绑定函数.当调用这个绑定函数时,绑定函数会以创建它时传入bind方法的第一个参数作为this,传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数. 关键词： bind 是创建了一个新的函数。 例一 <body> <button type="button" id="butto...
使用npm仓库的优先级以及.npmrc配置文件的使用
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
11-29 4914
说明 一、文件位置 全局配置文件：/etc/npmrc 用户配置文件：~/.npmrc 项目配置文件：$项目根目录/.npmrc 通过 npm config 修改的是用户配置文件~/.npmrc // 本次从淘宝仓库源下载 npm install xx --registry=https://registry.npm.taobao.org install // 设置淘宝源 npm config set registry https://registry.npm.taobao.org // 设置公司的源 n
js：动态修改document.title失效问题
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
06-08 4554
问题 当在页面异步调接口，拿到 title 后赋值给 document.title，无法修改标题。 原因 页面加载完后 title 已经确定了，所以不再监听 title 的 change 事件。 解决 document.title = this.title; let iframe = document.createElement('iframe'); iframe.src = require('/favicon.ico'); iframe.style.display = 'none'; // 这个就是我们异
js：使用canvas做一个图片标注功能
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
03-19 3948
canvas相关库的选择 名称 star（2021.3） 文档 备注 fabricjs 18.2k http://fabricjs.com/ -------- konva 6k https://konvajs.org/ ---------- react-konva 3.8k 同上 --------- vue-konva 682 同上 ---------- react-canvas 2.8k - 2007年不维护了，不支持react16，慎用 绘制复杂的画布图形。可以让我们
js：数组与树形结构的相互转换
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
04-01 3613
数组转树 let arr =[ {id:2,name:'部门B',parentId:0}, {id:3,name:'部门C',parentId:1}, {id:1,name:'部门A',parentId:2}, {id:4,name:'部门D',parentId:1}, {id:5,name:'部门E',parentId:2}, {id:6,name...
js：浅谈js的事件驱动和数据驱动
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
08-13 3370
概述 随着大前端时代的到来，我们从 jquery 到 react，vue 等框架的转变，其实就是事件驱动到数据驱动的思维模式的转变 事件驱动 事件：用户点击按钮就是一个事件 构建页面：设计DOM => 生成DOM => 绑定事件 监听事件：操作UI => 触发事件 => 响应处理 => 更新UI 数据驱动 数据：就是数据的意思（跟没说一样） 构建页面：设计数据结构 =...
js：实现继承的几种方法（包括es6）
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
06-30 3294
js的继承方式有很多，比如 一、借用构造函数继承（call，apply，bind） 1.介绍 利用call，apply，bind借用父类的构造函数 2.实现 function Animal (name) { this.name = name this.showName = function () { alert(name) } } function Cat () { // apply用...
js：Event Loop详解
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
08-11 2947
概述 今天我们来聊聊 js 的执行机制，事件轮询（event loop）。 问题1：为什么 js 是单线程？ 因为 js 是面向客户端的一门语言，主要是用户交互，操作dom，渲染数据。试想一下，如果是多线程，我们在一个线程删除了一个dom节点，另外一个线程添加了一个dom节点，以那个线程为主呢，就会出现混乱的情况。当然你可以说我们在操作一个dom之后加上锁，只允许一个线程操作，这样其实增加了程序的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Lvan的前端笔记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值