jQuery 源码解析(二十八) 样式操作模块 scrollLeft和scrollTop详解
程序员文章站
2022-03-21 18:39:02
scrollLeft和scrollTop用于获取/设置滚动条的，如下: scrollLeft(val) ;读取或设置整个页面的水平滚动条距离 scrollTop(val) ;读取或设置整个页面的垂直滚动条距离 如果没有传入val值则获取滚动条距离，如果有设置val则标识设置滚动条距离，还是举个栗子， ......
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对象才可以
上一篇： Python 字典操作
下一篇： 基础篇php常用输入语句和函数