js：可能是最全的scroll相关的方法
2023-09-27 14:27:09 时间
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
滚动条距离页面顶部的距离。
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("已经到最底部了！!");
}
};
相关文章
- web项目中关于引入JS/css文件, 浏览器console出现 net::ERR_ABORTED错误的解决方法
- require.js - 详解
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
- js fs read json 文件json字符串无法解析
- flexible.js + makegrid.js 自适应布局
- JS leetcode 有序数组的平方 题解分析，灵活运用Math.pow与Math.abs方法
- JS 疫情宅在家，学习不能停，七千字长文助你彻底弄懂原型与原型链，武汉加油！！中国加油！！（破音）
- css的hover事件，如果点击之后通过js操作样式，hover事件就会失效的处理方法，外部css样式与js的DOM样式谁的权重高？
- 原生js调用json方法
- ext.js学习
- ios（safar/微信）返回不执行js
- js中表达式 >>> 0 浅析 (以及用php简单翻译)
- [js高手之路]Vue2.0基于vue-cli+webpack Vuex用法详解
- [js高手之路]原型对象(prototype)与原型链相关属性与方法详解
- 原生JS实现new方法、new一个对象发生的四部、new里面常用的优先级
- JS 中数组字符串索引和数值索引研究
- Node.js：get/post请求、全局对象、工具模块
- js面向对象初步探究（上） js面向对象的5种写方法
- Js apply 方法 具体解释
- 在JS方法中返回多个值的三种方法（转载）
- iScroll.js插件使用方法
- JS数组常见方法的深浅拷贝分类