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 ...
随机推荐
- 想要金九银十面试通关，不懂 Java多线程肯定是不行的！
作者 | 纳达丶无忌 如果对什么是线程.什么是进程仍存有疑惑,请先 Google 之,因为这两个概念不在本文的范围之内. 用多线程只有一个目的,那就是更好的利用 CPU 的资源,因为所有的多线程代码都 ...
- 《Java基础知识》一维，二维数组的申明和使用
为什么要使用数组: 因为不使用数组计算多个变量的时候太繁琐,不利于数据的处理. -------- 数组也是一个变量,是存储一组相同类型的变量 声明一个变量就是在内存中划出一块合适的空间 声明一个数 ...
- 【iOS翻译】App启动时的响应过程
Responding to the Launch of Your App Initialize your app’s data structures, prepare your app to run, ...
- Context知识详解
Context知识详解 建议配合context知识架构图食用. 一.什么是Context 贴一个官方解释: Interface to global information about an appli ...
- 基于canvas线条绘制图形
原理说明 绘制一个正方形,正放心每条边等比例均分,具体分配多少根据自身情况而定,按照最上边边顺时针方向依次绘制线条,相邻两条边上的点依次连接,知道所有的点全部连接完便绘制完成. 示例效果图图如下 具体 ...
- springboot2.x实现oauth2授权码登陆
参考文章:https://blog.csdn.net/qq_27828675/article/details/82466599 一 进行授权页 浏览器输入http://localhost:8081/o ...
- Penetration testing“Linux install Nessus”
Ax_Download www.tenable.com/products/nessus-home,need sent email. Bx_Install su ls dpkg -i [filename ...
- ABP入门教程0 - 目录
ABP入门教程 本教程主要讲解如何基于ABP实现CURD(增删改查)示例. 源码已分享: GitHub Gitee ABP入门教程0 - 目录 ABP入门教程1 - 开篇 ABP入门教程2 - ...
- TP事物的写法
Db::startTrans(); try{ Db::commit(); } catch (\Exception $e) { Db::rollback(); } use think\Db; publi ...
- git上传本地项目到github或者gitlib（两个是一样的）。
第一步:在github上面创建一个repository 点击create就好了.然后会出现下面的页面. 第三步:打开你所在文件夹,或者是新建的文件夹(用来做仓库的)右键会出现下面 选用git B ...