jQuery 源码解析(二十八) 样式操作模块 scrollLeft和scrollTop详解
scrollLeft和scrollTop用于获取/设置滚动条的，如下:
- scrollLeft(val) ;读取或设置整个页面的水平滚动条距离
- scrollTop(val) ;读取或设置整个页面的垂直滚动条距离
如果没有传入val值则获取滚动条距离，如果有设置val则标识设置滚动条距离，还是举个栗子，以scrollTop为例，如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
<style>
*{margin:0;padding:0;}
button{margin:1px 0;}
div{margin:20px;width: 200px;height: 180px;position: relative;padding-top: 20px;background: #c38;}
h1{margin:10px;color: #333;}
</style>
</head>
<body>
<br/>
<p id="result">结果:<span></span></p>
<button id="b1">获取垂直滚动条距离</button><br/>
<button id="b2">回到首页</button>
<br/><br/>
<script>
$('#b1').click(()=>{ //获取滚动条距离
$('span').text( $(window).scrollTop() )
})
$('#b2').click(()=>{ //设置垂直滚动条滚动到顶部
$(window).scrollTop(0)
})
//这里先新增一个文档碎片，然后添加50个p标签，最后添加到body子节点的最前面，以模拟滚动条
{
let i=1,fragments=document.createDocumentFragment()
while(i<=50){
let p = document.createElement('p');
p.innerHTML = i++;
fragments.append(p)
}
document.body.insertBefore(fragments,document.body.childNodes[0])
}
</script>
</body>
</html>
当我们点击按钮1时将获取当前垂直滚动条的距离，并将结果添加到span里面，点击按钮2会设置垂直滚动条，让它滚动到顶部，效果如下:
writer by:大沙漠 QQ:22969969
很多网站右下角有一个滚动到顶部就可以用这个来实现，完美兼容所有网站，这个得感谢完美jQuery的兼容性。
源码分析
代码实现如下
jQuery.each( ["Left", "Top"], function( i, name ) { //在jQuery.fn加上.scrollLeft()和.scrollTop()方法 对于scrollLeft来说，i为0，对于scrollTop来说，i为1
var method = "scroll" + name;
jQuery.fn[ method ] = function( val ) { //挂在实例上面
var elem, win;
if ( val === undefined ) { //如果没有传入val参数
elem = this[ 0 ];
if ( !elem ) { //如果没有匹配元素
return null; //则返回null
}
win = getWindow( elem ); //获取window对象，如果参数elem是window对象，则返回window对象，否则返回false
// Return the scroll offset
return win ? ("pageXOffset" in win) ? win[ i ? "pageYOffset" : "pageXOffset" ] :
jQuery.support.boxModel && win.document.documentElement[ method ] ||
win.document.body[ method ] :
elem[ method ]; //用于读取window对象、document对象、元素的滚动偏移
}
//执行到这里，则表示是设置滚动了
// Set the scroll offset
return this.each(function() { //遍历匹配元素，设置每个元素的滚动偏移
win = getWindow( this );
if ( win ) { //如果是window对象，则调用scrollTo()滚动到执行的位置，该方法两个参数都是必须的。
win.scrollTo(
!i ? val : jQuery( win ).scrollLeft(), //这两个参数是必填的
i ? val : jQuery( win ).scrollTop()
);
} else {
this[ method ] = val; //否则设置元素的scrollLeft、scrollTop属性。
}
});
};
});
getWindow实现如下:
function getWindow( elem ) {
return jQuery.isWindow( elem ) ?
elem : //如果是elem是window对象，则直接返回elem
elem.nodeType === 9 ?
elem.defaultView || elem.parentWindow : //否则如果elem表示整个文档，则返回elem.defaultView(即window对象)，否则返回elem.parentWindow，如果elem.parentWindow不存在则返回false
false;
}
从源码可以发现，如果是操作滚动条的话，就需要匹配window或documetn对象才可以
jQuery 源码解析(二十八) 样式操作模块 scrollLeft和scrollTop详解的更多相关文章
- jQuery 源码解析(二十六) 样式操作模块 样式详解
样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下样式相关,样式操作通过jQuery实例的css方法来实现,该方法有很多的执行方法,如下: css(obj) ;参数 ...
- jQuery 源码解析(二十九) 样式操作模块 尺寸详解
样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下尺寸这一块 jQuery通过样式操作模块里的尺寸相关的API可以很方便的获取一个元素的宽度.高度,而且可以很方便的区分padding.b ...
- jQuery 源码解析(二十五) DOM操作模块 html和text方法的区别
html和text都可以获取和修改DOM节点里的内容,方法如下: html(value) ;获取匹配元素集合中的一个元素的innerHTML内容,或者设置每个元素的innerHTML内容, ...
- jQuery 源码解析(二十四) DOM操作模块 包裹元素 详解
本节说一下DOM操作模块里的包裹元素子模块,该模块可将当前匹配的元素替换指定的DOM元素,有如下方法: wrap(html) ;在每个匹配元素的外层添加一层DOM元素 ...
- jQuery 源码解析(二十二) DOM操作模块 复制元素 详解
本节说一下DOM操作模块里的复制元素子模块,该模块可以复制一个DOM节点,并且可选择的设置是否复制其数据缓存对象(包含事件信息)和是否深度复制(子孙节点等),API如下: $.clone(elem, ...
- jQuery 源码解析二：jQuery.fn.extend=jQuery.extend 方法探究
终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 ...
- jQuery 源码解析(二十七) 样式操作模块 坐标详解
样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下坐标这一块. 对于坐标来说,jQuery提供了一个offset方法用于获取第一个匹配元素的坐标或者设置所有匹配元素的坐标,还有offse ...
- jQuery 源码解析(三十) 动画模块 $.animate()详解
jQuery的动画模块提供了包括隐藏显示动画.渐显渐隐动画.滑入划出动画,同时还支持构造复杂自定义动画,动画模块用到了之前讲解过的很多其它很多模块,例如队列.事件等等, $.animate()的用法如 ...
- Vue.js 源码分析(二十八) 高级应用 transition组件 详解
transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性: n ...
随机推荐
- StringBuilder、StringBuffer和StringJoiner
StringBuilder是可变对象,用来高效拼接字符串: StringBuilder可以支持链式操作,实现链式操作的关键是返回实例本身: StringBuffer是StringBuilder的线程安 ...
- GoLand不同目录(包)方法调用
新手学go,跨目录调用方法是真的难,弄了好几天,几乎要放弃go了,在此演示一下如何跨目录(包)调用~ 需求是main.go调用model包下mysql.go中Query方法,目录结构如下. 要点: 1 ...
- LVS+Keepalived-DR模式
Environment:4台CentOS机器 两台LVS 两台web服务器 LVS主备的操作,都需要安装ipvsadm和keepalived yum -y install ipvsadm keepal ...
- 《一头扎进》系列之Python+Selenium框架设计篇4- 价值好几K的框架，呵！这个框架有点意思啊
1.简介 前面文章,我们实现了框架的一部分功能,包括日志类和浏览器引擎类的封装,今天我们继续封装一个基类和介绍如何实现POM.关于基类,是这样定义的:把一些常见的页面操作的selenium封装到bas ...
- 京东云携手HashiCorp，宣布推出Terraform Provider
2019年4月23日消息,京东云携手云基础设施自动化软件的领导者HashiCorp,宣布推出Terraform Provider for JD Cloud,这意味着用户能够在京东云上轻松使用简单模板语 ...
- Internet History,Technology,and Security - Technology: Internets and Packets （Week5）
Week5 Technology: Internets and Packets Welcome to Week 5! This week, we’ll be covering internets an ...
- 脚本批量执行Redis命令
1.将命令写在文件中 数据量比较大的话,建议用程序去生成文件.例如: List<String> planIdList = planDao.findAll().parallelStream( ...
- 暴力破解（ Hydra | Medusa）
暴力破解 By : Mirror王宇阳 笔者告知 : 暴力破解的结果是运气和速度的结晶,开始暴力破解前烧一炷香也是必要的! 引用张炳帅的一句话:"你的运气和管理员的安全意识成正比" ...
- linux bash变量作用域
linux bash变量作用域 一,思考一个问题,当在shell里执行某个程序时,shell是怎么找到这个程序的? shell会去$PATH环境变量定义的目录里去找这个命令.环境变量里一般包括/usr ...
- C#_.NetCore_Web项目_EXCEL数据导出（ExcelHelper_第一版）
项目需要引用NPOI的Nuget包:DotNetCore.NPOI-v1.2.2 A-前端触发下载Excel的方法有三种: 1-JS-Url跳转请求-后台需要返回文件流数据: window.Locat ...