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 ...
随机推荐
- kratos微服务框架学习笔记一(kratos-demo)
目录 kratos微服务框架学习笔记一(kratos-demo) kratos本体 demo kratos微服务框架学习笔记一(kratos-demo) 今年大部分时间飘过去了,没怎么更博和githu ...
- webpack前期了解
webpack的核心概念(四个) 入口(entry) 输出(output) loader 插件(plugins) Entry(入口)——指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的 ...
- 深度剖析YOLO系列的原理
深度剖析YOLO系列的原理 本文系作者原创,转载请注明出处:https://www.cnblogs.com/further-further-further/p/12072225.html 目录 1. ...
- JPA中实现双向一对多的关联关系
场景 JPA入门简介与搭建HelloWorld(附代码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103473937 ...
- echart的legend不显示问题
legend的data与series的name 两者必须同时存在,且数量和文字内容必须一致.
- distcc 的使用
在项目的开发过程中,经常出现多个开发人员集中在某个 linux 内网开发机上统一开发的情况,随着开发人员越来越多.项目编译得越来越频繁,开发机的压力越来越大,所以考虑用代码交叉编译的方式来缓解开发机的 ...
- filezilla无法登陆ubuntu虚拟机
一般情况下,是新安装的虚拟机没有安装ssh造成的 进入虚拟机控制台,输入 sudo apt-get openssh-server 回车 等安装完成即可登陆.
- VS2019 开发Django（六）------Admin中图片上传
导航:VS2019开发Django系列 该篇继续完善在Django的管理界面上传图片,因为LazyOrders小程序中菜单需要展示图片,而不是一个文本路径,所以我们还需要继续改造一下. 1)安装pil ...
- 利用keras自带路透社数据集进行多分类训练
import numpy as np from keras.datasets import reuters from keras import layers from keras import mod ...
- java.sql.SQLException: Unknown initial character set index '255' received from server. Initial client character set can be forced via the 'characterEncoding' property.解决方案
解决方案: 首先查看数据库的版本号,删除旧的jar包,将mysql-connector-java.jar更换成对应版本号 同时在连接数据库的url后加上?useUnicode=true&cha ...