原生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") ? ...
随机推荐
- .NET WebAPI 正确抛出错误详细信息
try { ... } catch (Exception e) { //在webapi中要想抛出异常必须这样抛出,否则之抛出一个默认500的异常 var resp = new HttpResponse ...
- 大爱HTML5 9款超炫HTML5最新动画源码
我们分享过很多漂亮的HTML5动画,包括CSS3菜单.HTML5 Canvas动画等.今天我们精选了9款非常不错的超炫HTML5最新动画及其源码,一起来看看. 1.HTML5可爱的404页面动画 很逗 ...
- SpringCloud 集锦
一.SpringCloud和Dubbo SpringCloud整合了一套较为完整的微服务解决方案框架,而Dubbo只是解决了微服务的几个方面的问题. content Dubbo SpringCloud ...
- HTTP Analyzer——WEB调试代理
HTTP Analyzer 是一个实时的web调试代理,如果你对Fiddler不陌生的话,HTTP Analyzer 就是和Fiddler具备一样功能的调试代理. 推荐这个软件而不推荐Fiddler的 ...
- 安卓开发笔记——TabHost组件(二)(实现底部菜单导航)
上面文章<安卓开发复习笔记——TabHost组件(一)(实现底部菜单导航)>中提到了利用自定义View(ImageView+TextView)来设置一个底部菜单的样式 这边再补充一种更为灵 ...
- storm学习之六-使用Maven 生成jar包多种方式
Maven可以使用mvn package指令对项目进行打包,如果使用java -jar xxx.jar执行运行jar文件,会出现"no main manifest attribute, in ...
- rlwrap安装报错You need the GNU readline 解决方法
首先大家肯定知道rlwrap是干什么的? 在linux以及unix中,sqlplus的上下左右.回退无法使用,会出现乱码情况.而rlwrap这个软件就是用来解决这个的. 这个错误曾经困扰我很久很久 ...
- flexible.js移动端适配安卓高分辨不兼容问题
根据网上找到的解决办法,对于安卓设备,把dpr=1改为当前设备的dpr if (!dpr && !scale) { if (isIPhone) { // iOS下,对于2和3的屏,用2 ...
- mysql出现1030 Got error 28 from storage engine解决方法
今天自己用 tp 写的项目报错 查了下,是磁盘临时空间不够导致 查看 my.cnf 的 tmpdir,看下指向哪个目录,修改到有空间的目录 最后发现是/var/tmp/phd/log/daemons. ...
- C# dmp debug, can't load pdb file
1. Project->Properties->Build->Advance, Debug Info : Full/pdb-only . set to [none] will no ...