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详解的更多相关文章

  1. jQuery 源码解析(二十六) 样式操作模块 样式详解

    样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下样式相关,样式操作通过jQuery实例的css方法来实现,该方法有很多的执行方法,如下: css(obj)            ;参数 ...

  2. jQuery 源码解析(二十九) 样式操作模块 尺寸详解

    样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下尺寸这一块 jQuery通过样式操作模块里的尺寸相关的API可以很方便的获取一个元素的宽度.高度,而且可以很方便的区分padding.b ...

  3. jQuery 源码解析(二十五) DOM操作模块 html和text方法的区别

    html和text都可以获取和修改DOM节点里的内容,方法如下: html(value)     ;获取匹配元素集合中的一个元素的innerHTML内容,或者设置每个元素的innerHTML内容,   ...

  4. jQuery 源码解析(二十四) DOM操作模块 包裹元素 详解

    本节说一下DOM操作模块里的包裹元素子模块,该模块可将当前匹配的元素替换指定的DOM元素,有如下方法: wrap(html)               ;在每个匹配元素的外层添加一层DOM元素   ...

  5. jQuery 源码解析(二十二) DOM操作模块 复制元素 详解

    本节说一下DOM操作模块里的复制元素子模块,该模块可以复制一个DOM节点,并且可选择的设置是否复制其数据缓存对象(包含事件信息)和是否深度复制(子孙节点等),API如下: $.clone(elem, ...

  6. jQuery 源码解析二：jQuery.fn.extend=jQuery.extend 方法探究

    终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 ...

  7. jQuery 源码解析(二十七) 样式操作模块 坐标详解

    样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下坐标这一块. 对于坐标来说,jQuery提供了一个offset方法用于获取第一个匹配元素的坐标或者设置所有匹配元素的坐标,还有offse ...

  8. jQuery 源码解析(三十) 动画模块 $.animate()详解

    jQuery的动画模块提供了包括隐藏显示动画.渐显渐隐动画.滑入划出动画,同时还支持构造复杂自定义动画,动画模块用到了之前讲解过的很多其它很多模块,例如队列.事件等等, $.animate()的用法如 ...

  9. Vue.js 源码分析(二十八) 高级应用 transition组件 详解

    transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性: n ...

随机推荐

  1. 孟文静浅谈AG百家庄闲技巧，下三路的运用以及三株路的正反打法

    关于三珠路的各种打法,这里我做个详细的讲解,如想了解更多打法可+qq<738不要字4633>或关注VX公众号<孟文静1> 三珠路的打法源于叶汉,叶汉的打法是——三珠路打反 先看 ...

  2. CCF-CSP题解 201812-3 CIDR合并

    题目想求与给定前缀列表等价的包含IP前缀数目最少的前缀列表. 首先是怎么存储前缀列表.用一个long long存储IP地址,再存一个前缀长度,封装在一个结构体里\(<ipNum, len> ...

  3. 骚年，如果你还不懂一些java常识？中了奖也无法兑换

    今天下午约着几个朋友一起去看叶问4,结果碰到了一个有趣的事情,正好和java有关所以写一篇文章来记录一下. 事件:我和朋友小李.小王一起去看电影 时间:2019/12/21 地点:H市某家电影院 起因 ...

  4. 迈布-----UE4AI自动巡逻与攻击

    这个行为树给我恶心的都想吐,我用的是4.24,跟着官网做达不到那个效果,跟着视频做也达不到那个效果,跟我弄的非常不耐烦,最后终于在今天整出来了.有的地方用了一下我自己的逻辑.//诸位依靠教程的,一定得 ...

  5. （译）An introduction to Kubernetes

    原文:https://www.jeremyjordan.me/kubernetes/(博客园团队推荐的) 这篇博客文章将对Kubernetes进行介绍,以便您了解该工具背后的动机,含义以及使用方式.在 ...

  6. 使用react-app-rewired和customize-cra对默认webpack自定义配置

    最近在学习react框架,之前一直都是用vue 开发,知道在vue 中知道如何配置一下相关的webpack 有助于开发,学react 过程中,我也在想这些该怎么配置啊,所以就有这篇文章. 这篇文章主要 ...

  7. 软件开发工具（第13章： Eclipse插件的使用与开发）

    一.插件简介 插件的定义(了解) 插件是一种遵循其所依附的软件的接口规范所编写出来的程序. 插件实际上是对原有软件的扩展,替应用程序增加一些所需要的特定 功能. 插件的构成(重点.记忆) 每个插件都由 ...

  8. DG中switchover切换操作

    问题描述:我们配置DG的目的就是为了在主库出现故障时,备库能够提供服务,保证业务的正常运行,switchover是用户有计划的进行停机切换,能够保证不丢失数据,我记录一下我进行switchover中的 ...

  9. 记一次ES查询数据突然变为空的问题

    基本环境 elasticsearch版本:6.3.1 客户端环境:kibana 6.3.4.Java8应用程序模块. 其中kibana主要用于数据查询诊断和查阅日志,Java8为主要的客户端,数据插入 ...

  10. ASP.NET MVC5基础-过滤器(Filters)详解

    什么是过滤器? 过滤器的类型与作用 定义过滤器 授权过滤器 动作过滤器 结果过滤器 异常处理过滤器 过滤器的使用方法 总结 什么是过滤器? 通过上一篇关于Controller控制器的文章我们知道,MV ...