原生js--兼容获取窗口滚动条位置和窗口大小的方法
各个浏览器对获取获取窗口滚动条位置和窗口大小没有提供统一的API,以下是对其封装,解决兼容性问题
/**
* 获取浏览器视口的大小(显示文档的部分)
*
*/
function getViewPortSize(){
// 除IE8及更早的版本以外的浏览器
if( window.innerWidth != null ){
return {
w : window.innerWidth,
h : window.innerHeight
}
}
// 标准模式下的IE
if( document.compatMode == "css1Compat" ){
return {
w : document.documentElement.clientWidth,
h : document.documentElement.clientHeight
}
}
// 怪异模式下的浏览器
return {
w : document.body.clientWidth,
h : document.body.clientHeight
}
}
/**
* 获取窗口滚动条的位置
*/
function getScrollOffset(){
// 除IE8及更早版本
if( window.pageXOffset != null ){
return {
x : window.pageXOffset,
y : window.pageYOffset
}
}
// 标准模式下的IE
if( document.compatMode == "css1Compat" ){
return {
x : document.documentElement.scrollLeft,
y : document.documentElement.scrollTop
}
}
// 怪异模式下的浏览器
return {
x : document.body.scrollLeft,
y : document.body.scrollTop
}
}
原生js--兼容获取窗口滚动条位置和窗口大小的方法的更多相关文章
- js获取窗口滚动条高度、窗口可视范围高度、文档实际内容高度、滚动条离浏览器底部的高度
1.获取窗口可视范围的高度 //获取窗口可视范围的高度 function getClientHeight(){ var clientHeight=0; if(document.body.clientH ...
- html通过css,js实现div悬浮效果总汇,如原生JS实现滚动到一定位置实现div悬浮
在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...
- JS打开新窗口防止被浏览器阻止的方法
这篇文章主要介绍了JS打开新窗口防止被浏览器阻止的方法,分析对比了常用方法与改进方法,是非常实用的技巧,需要的朋友可以参考下 本文实例讲述了JS打开新窗口防止被浏览器阻止的方法.分享给大家供大家参考. ...
- JS打开新窗口防止被浏览器阻止的方法[转]
本文实例讲述了JS打开新窗口防止被浏览器阻止的方法.分享给大家供大家参考.具体分析如下: 用传统的window.open()方式打开新窗口,会被浏览器阻止,那么,我们如何才能让JS打开新窗口不被浏览器 ...
- 原生JS中获取位置的方案总结
获取鼠标当前位置 clientY.clientX: 鼠标当前位置 相对于 浏览器可视区域顶部.浏览器可视区域左部 的位置: pageY.pageX: 鼠标当前位置 相对于 文档顶部.文档左部的位置: ...
- js中获取窗口高度的方法
取窗口滚动条滚动高度 function getScrollTop() { var scrollTop=0; if(document.documentElement&&document. ...
- 原生js中获取this与鼠标对象以及vue中默认的鼠标对象参数
1.通过原生js获取this对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- Java: 获取当前执行位置的文件名/类名/方法名/行号
在 JAVA 程序有时需要获取当前代码位置, 于是就利用 Thread.currentThread().getStackTrace() 写了下面这个工具类, 用来获取当前执行位置处代码的文件名/类名/ ...
- 原生JS和JQ窗口定位属性对照表
位置 javascript jquery 兼容性 窗口位置离屏幕左偏移 var leftPos = (typeof window.screenLeft == "number") ? ...
随机推荐
- 如何使用 OpenFileDialog 组件 (选择文件组件)
向程序设计窗体中添加一个OpenFileDialog控件,在属性对话框中设置其Filter属性为 "所有文件(*.*)|*.*|文本文件(*.txt)|*.txt|WPS文档(*.w ...
- org.in2bits.MyXls.XlsDocument 生成excel文件 ; 如果想读取模板再另外生成的话,试试 NPOI
优点:不依赖Microsoft组件,在内存中操作excel,读写速度快. 缺点:无法读取模板,只能生成新的excel (我亲自测试是在读取完模板后,不能保存,也不能另存,并且其他人说这个读取还会有 ...
- Erlang编程语言的一些痛点
Erlang编程语言的一些痛点 http://www.zhihu.com/question/34500981
- fiddler 工具使用配置
前言: 之前为了手动测试项目组之间提供的接口,确定到底是哪一个接口出了问题.一般情况下,我们都直接采用了 Google 浏览器上,F12 后,Network 找到想要的 URL,然后,直接在浏览器上访 ...
- C# ThreadStart和ParameterizedThreadStart区别
ThreadStart: ThreadStart这个委托定义为void ThreadStart(),也就是说,所执行的方法不能有参数.ThreadStart threadStart=new Threa ...
- Redis 缓存 + Spring 的集成示例(转载)
1. 依赖包安装 pom.xml 加入: <dependency> <groupId>org.springframework.data</groupId> < ...
- Java常用类(二)String类详解
前言 在我们开发中经常会用到很多的常用的工具类,这里做一个总结.他们有很多的方法都是我们经常要用到的.所以我们一定要把它好好的掌握起来! 一.String简介 1.1.String(字符串常量)概述 ...
- 利用Android NDK编译lapack
最近有这方面的需要,但是在网上查了一下,几乎没有讲这个的.后来发现了外国某个大牛在github上的project.拉下来自己编译了一下竟然通过了,记录如下: 1.从https://github.com ...
- UNIX环境编程学习笔记(25)——信号处理进阶学习之 sigaction 函数
lienhua342014-11-05 sigaction 函数跟 signal 函数一样,用于设置信号处理函数.此函数是用于取代 UNIX 早期版本使用的 signal 函数.UNIX 早期版本的 ...
- UNIX环境编程学习笔记(10)——文件I/O之硬链接和符号链接
lienhua342014-09-15 1 文件系统数据结构 UNIX 文件系统通过 i 节点来存储文件的信息.如图 1 所示为一个磁盘柱面上的 i 节点和数据块示意图.其中 i 节点是一个固定长度的 ...