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 ...
随机推荐
- 双重检查锁单例模式为什么要用volatile关键字？
前言 从Java内存模型出发,结合并发编程中的原子性.可见性.有序性三个角度分析volatile所起的作用,并从汇编角度大致说了volatile的原理,说明了该关键字的应用场景:在这补充一点,分析下v ...
- Ubuntu上面安装sqlite3可视化数据库软件
.介绍:sqlite 3是linux上的小巧的数据库,一个文件就是一个数据库. 2.安装:要安装sqlite 3,可以在终端提示符后运行下列命令: sudo apt-get install sqlit ...
- skipping archived logs of thread 1 from sequence 29 to 46; already backed up
问题描述:删除归档的备份,在进行归档的重新备份,提示:skipping archived logs of thread 1 from sequence 29 to 46; already backed ...
- 从KafkaConsumer看看Kafka（一）
Kafka的消息模型为发布订阅模型,消息生产者将消息发布到主题(topic)中,一个或多个消费者订阅(消费)该主题消息并消费,此模型中发布到topic中的消息会被所有消费者所订阅到,先介绍Kafk ...
- 原生JS实现动画函数的封装
封装了一个JS方法,支持元素的基本动画:宽.高.透明度...等,也支持链式动画和同时运动. 获取元素的属性的函数并进行了兼容性处理: function getStyle(obj, attr) { if ...
- JS---获取元素计算后的样式属性值 (getComputedStyle)---兼容函数
获取计算后的样式属性----获取一个元素任意一个样式属性值 获取元素距离左边位置的值 会有如下兼容性问题: my$("btn").onclick = function () { / ...
- wx-all
学习这部分时也学了不少代码,一段一段往这上面写实在有点~~~ 直接把代码部署到代码该在的地方吧,哈哈哈 这是网址 把代码放这上面就好多了,不怕代码丢,还可保证代码完整,嘻嘻嘻~~~~~~
- docker拉取慢（net/http: request canceled while waiting for connection (Client.Timeout exceeded while awaiting head）
systemctl restart docker在docker-hub拉取慢,因为服务器在外网 直接配置阿里云镜像就可以 首先: vim /etc/docker/daemon.json加入下面的那句 ...
- 如何使用TG Pro for Mac的自定义控制功能完全覆盖系统
在某些情况下,可能需要完全覆盖系统风扇控制并使用自定义算法.通过将Auto Boost规则的强大功能与覆盖系统功能相结合,可以使用TG Pro.请记住,当风扇模式设置为Auto Boost时,这将完全 ...
- latex 对中文字体设置的一些解决
latex 对中文字体设置的一些解决 直接使用Xelatex编译带中文的文件时,会出现无法识别的错误,这是因为latex默认的环境不支持中文,这时可以使用CTex 宏集.ctex 宏包或xeCJK 宏 ...