欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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 源码解析(二十八) 样式操作模块 scrollLeft和scrollTop详解

很多网站右下角有一个滚动到顶部就可以用这个来实现,完美兼容所有网站,这个得感谢完美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对象才可以