JS——scroll封装
DTD未声明:document.body.scrollTop
DTD已声明:document.documentElement.scrollTop
火狐谷歌IE9:window.pageYOffset
compatMode:可以判断是否声明DTD,CSS1Compat是,BackCompat否
复杂版本:
<script>
window.onscroll = function () {
console.log(scroll().left + " " + scroll().top);
} function scroll() {
if (window.pageYOffset) {
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
};
}
}
</script>
简单版本:
<script>
window.onscroll = function () {
console.log(scroll().left + " " + scroll().top);
} function scroll() {
return {
"top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
"left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
};
}
</script>
JS——scroll封装的更多相关文章
- JS 对象封装的常用方式
JS是一门面向对象语言,其对象是用prototype属性来模拟的,下面,来看看如何封装JS对象. 常规封装 function Person (name,age,sex){ this.name = na ...
- js类封装
将js方法封装成类,好处就是团队开发中避免命名冲突,部分类整理代码如下: function LocalStorageHelper() { //检测浏览器是否支持localStorage this.ch ...
- 【Node.js 自己封装的库 http_parse, libuv】
[Node.js 自己封装的库 http_parse, libuv] Node.js 介绍:一个网络框架,更多:http://www.oschina.net/p/nodejs 官网:http://no ...
- main.js中封装全局登录函数
1. 在 main.js 中封装全局登录函数 通过 vue 对象的原型扩展,可以扩展一个函数,这样这个函数就可以在每一个界面通过类似指向对象的方式,去访问这个函数. 如下是 main.js 扩展的函数 ...
- Node.js模块封装及使用
Node.js中也有一些功能的封装,类似C#的类库,封装成模块这样方便使用,安装之后用require()就能引入调用. 一.Node.js模块封装 1.创建一个名为censorify的文件夹 2.在c ...
- 基于js原生封装的点击显示完整文字
基于js原生封装的点击显示完整文字 (function(window) { var inner = ''; var showCont_s = function(ele) { this.init.app ...
- react request.js 函数封装
1.request.js 函数封装 import { Toast } from 'antd-mobile'; import axios from 'axios'; import store from ...
- 使用jq把js代码封装一个自己的插件
为什么要把js功能封装成插件呢?我觉得有以下几点吧 1.最基本的原因就是便于代码复用. 2.便于维护和管理. 3.提升自身的能力. 4.避免各个相同功能组件的干扰,以及一些作用域会相互影响的问题. j ...
- 常用js方法封装
常用js方法封装 var myJs = { /* * 格式化日期 * @param dt 日期对象 * @returns {string} 返回值是格式化的字符串日期 */ getDates: fun ...
随机推荐
- [poj2425]A Chess Game_博弈论
A Chess Game poj-2425 题目大意:题目链接 注释:略. 想法:这个题就是为什么必须要用记忆化搜索.因为压根就不知道后继是谁. 我们通过SG定理可知:当前游戏的SG值等于所有子游戏的 ...
- MAPZONE GIS SDK接入Openlayers3之一——矢量数据集接入
在选择开源前端GIS框架的时候,定下来MapBox和Openlayers3.起初被MapBox美观的地图显示效果所吸引,研究后发现其实现机制与MAPZONE GIS SDK相差深远,不如Openlay ...
- LeetCode 917. Reverse Only Letters (仅仅反转字母)
题目标签:String 利用left, right 两个pointers, 从左右开始 互换 字母.如果遇到的不是字母,那么继续移动到下一个. Java Solution: Runtime beats ...
- LeetCode 8. String to Integer (atoi) (字符串到整数)
Implement atoi to convert a string to an integer. Hint: Carefully consider all possible input cases. ...
- Html5 移动游戏开发
有非常多游戏採用H5技术开发.比方三国来了.巴哈姆特之怒.切绳子等. 我们公司也有多款游戏用H5开发.H5开发成本低.效率高,方便做自己主动更新,可移植性好. 受益于H5技术,我们公司的非常多产品都非 ...
- Struts2之类型转换器的使用
一.学习案例:通过在输入页面(input.jsp)用同一个输入框同一时候输入username和password,通过类型转换器在输出页面(output.jsp)分别输出username和passwor ...
- html 转word
今日头条发表文章 python-docx — python-docx 0.8.6 documentation http://python-docx.readthedocs.io/en/latest/
- 一个尖括号能干什么,画一个笑脸开始(为了支持交互,它又增添了JavaScript。HTML页面也越来越臃肿。于是CSS便诞生了。API和核心代码的出现使HTML能够访问更复杂的软件功能--支持更高级的交互和云服务集成。这就是今天的HTML5)
一个尖括号 < 一个尖括号能干什么 < ? 你可以编出一顶帽子 <(:-p 或一张笑脸 :-> 再或者更直接一些 20世纪90年代初,html作为一种简单标记语言面世,用于在互 ...
- ios--plist
// // main.m // 03-plist文件的回顾 // // Created by xiaomage on 15/12/29. // Copyright © 2015年 小码哥. All r ...
- dotnet core 文档链接
The installation was successful The following were installed at C:\Program Files\dotnet • .NET Core ...