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($(Windows).scrollTop())
- }) $('#b2').click(() = >{ // 设置垂直滚动条滚动到顶部
- $(Windows).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 ); // 获取 Windows 对象, 如果参数 elem 是 Windows 对象, 则返回 Windows 对象, 否则返回 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 ]; // 用于读取 Windows 对象, document 对象, 元素的滚动偏移
- }
- // 执行到这里, 则表示是设置滚动了
- // Set the scroll offset
- return this.each(function() { // 遍历匹配元素, 设置每个元素的滚动偏移
- win = getWindow( this );
- if ( win ) { // 如果是 Windows 对象, 则调用 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 是 Windows 对象, 则直接返回 elem
- elem.nodeType === 9 ?
- elem.defaultView || elem.parentWindow : // 否则如果 elem 表示整个文档, 则返回 elem.defaultView(即 Windows 对象), 否则返回 elem.parentWindow, 如果 elem.parentWindow 不存在则返回 false
- false;
- }
从源码可以发现, 如果是操作滚动条的话, 就需要匹配 Windows 或 documetn 对象才可以
来源: http://www.bubuko.com/infodetail-3303162.html