function scroll(){
if(window.pageYOffset !== undefined){
return {
"top": window.pageYOffset,
"left": window.pageXOffset
};
}else if(document.compatMode === "CSS1Compat"){
return {
"top": document.documentElement.scrollTop,
"left": document.documentElement.scrollLeft
};
}else{
return {
"top": document.body.scrollTop,
"left": document.body.scrollLeft
};
}
}

scroll().top 代表scrollTop

scroll().left 代表scrollLeft

或者:

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

封装scroll()的更多相关文章

  1. 使用Json封装scroll,已处理其兼容性问题

    scroll.js /* 使用Json封装scroll */ function scroll(){ //标准模式(遵循W3C标准) if(pageYOffset!==null){ return { t ...

  2. vue_music:封装scroll.vue组件

    在项目中经常用到滚动,结合Better-scroll封装了sroll.vue组件参考链接:https://ustbhuangyi.github.io...http://www.imooc.com/ar ...

  3. 封装scroll.js 获取滚动条的值

    function Obj(){} Obj.prototype={ scroll:function(){ /* 主要是做兼容处理 这里必须时!=null 因为默认值和每次滚动的时侯 都可以值为0 但是 ...

  4. scroll家族属性

    上一篇主要分析了一下offset家族属性,本篇文章则主要是来分析一下scroll家族属性. 首先,scroll家族包括4个属性: 网页正文宽度:document.body.scrollWidth; 网 ...

  5. singer页左侧滚动的时候右侧跟随高亮显示

    1.封装scroll.vue的listenScroll属性和方法,用来确定监听listview.vue的滚动事件 2.将listview.vue的listenScroll属性默认设置为true; 3. ...

  6. JS--- part6课程介绍 & part5复习

    part6 课程介绍 scroll系列:-----重点,每个属性是什么意思 封装scroll系列的相关的属性,固定导航栏案例---事件浏览器的滚动条事件--能够写出来 封装动画函数---缓动动画--- ...

  7. Vue项目——Supermall移动端购物商城

    一.项目描述 基于Vue全家桶构建的移动端购物商城APP.页面一共分为:首页.详情页.分类页.购物车页面.登录页面和个人信息页面. 二.使用技术 使用Vue CLI3快速搭建Vue开发环境以及对应的w ...

  8. JavaScript Scroll家族以及封装

    JavaScript Scroll家族以及封装 scrollTop & scrollLeft 别卷去的值,就是当滑动滚轮浏览网页的时候,网页隐藏在屏幕上方或左侧的距离 获得scrollTop ...

  9. JS——scroll封装

    DTD未声明:document.body.scrollTop DTD已声明:document.documentElement.scrollTop 火狐谷歌IE9:window.pageYOffset ...

随机推荐

  1. Webpack + Vue 多页面项目升级 Webpack 4 以及打包优化

    0. 前言 早在 2016 年我就发布过一篇关于在多页面下使用 Webpack + Vue 的配置的文章,当时也是我在做自己一个个人项目时遇到的配置问题,想到别人也可能遇到跟我同样的问题,就把配置的思 ...

  2. 使用cookie登陆知乎

    只是想说明一个问题,Cookie可以维持登录状态,有些网页当中,访问之后的cookie里面带有登陆账号,和登陆密码,这样可以使用cookie直接访问网页,如知乎,首先登录知乎,将Headers中的Co ...

  3. HTML基本教程,及一些基本常用标签。

    HTML基本结构,及常用标签 <DOCTYPE html> <html> <head> <meta charset="UTF-8" /&g ...

  4. windows下使用curl.exe模拟ajax请求

    curl 是一般linux发行版中都带有的小工具,利用这个工具可以很方便的下载文件,我一般使用这个工具来查看某个页面相应的HTTP头信息,在Windows系统中我们也一样可以使用这个工具,如果不需要支 ...

  5. php+MySQL(存储过程) +yii2完整的增删改查

    1在MySQL中创建存储过程 a 我将添加和修改 作为 一起 ), ), ), )) BEGIN FROM t_boss_role WHERE id = _id) THEN UPDATE t_boss ...

  6. PHP.27-TP框架商城应用实例-后台4-使用Gii生成品牌表的代码

    Gii安装[GII适用于商城项目] 将Gii文件夹复到application 是,访问http://xx.com/index.php/gii Gii规则[Gii使用规则与建表规则密切相关] 1.建表字 ...

  7. 《数据结构与算法分析:C语言描述》复习——第九章“图论”——拓扑排序

    2014.07.04 17:23 简介: 我们考虑一种特殊的图: 1. 有向图 2. 只有一个连通分量 3. 不存在环 那么这样的图里,必然可以找到一种排序方式,来确定谁在谁的“前面”. 简单的来说可 ...

  8. 《Cracking the Coding Interview》——第9章:递归和动态规划——题目2

    2014-03-20 02:55 题目:从(0, 0)走到(x, y),其中x.y都是非负整数.每次只能向x或y轴的正方向走一格,那么总共有多少种走法.如果有些地方被障碍挡住不能走呢? 解法1:如果没 ...

  9. 《Cracking the Coding Interview》——第3章:栈和队列——题目3

    2014-03-18 05:17 题目:设计一个栈,这个栈实际上由一列子栈组成.每当一个子栈的大小达到n,就新产生下一个子栈.整个栈群对外看起来就像普通栈一样,支持取顶top().压入push().弹 ...

  10. jmeter学习(二),如何安装jmeter?

    官网地址:http://jmeter.apache.org/download_jmeter.cgi 如下图数字3.2表示的是版本号,jmeter是基于java的压力测试工具.所以运行环境一定要满足最低 ...