原生javasxript获取浏览器的滚动距离和可视窗口的高度
原生javasxript获取浏览器的滚动距离和可视窗口的高度
//封装兼容性方法获取滚动的距离
function getScrollOffset(){
if(window.pageXOffset){
return {
x : window.pageXOffset,
y : window.pageYOffset
}
}else{
return {
x : document.body.scrollLeft + document.documentElement.scrollLeft,
y : document.body.scrollTop + document.documentElement.scrollTop
}
}
}
//获取可视窗口的宽高
function getViewportOffset(){
if(innerWidth){
return{
w : window.innerWidth,
h : window.innerHeight
}
}else{
if(document.compatMode == "BackCompat"){
return{
w : document.body.clientWidth,
h : document.body.clientHeight
}
}else{
return{
w : document.documentElement.clientWidth,
h : document.documentElement.clientHeight
}
}
}
}
原生javasxript获取浏览器的滚动距离和可视窗口的高度的更多相关文章
- 原生js获取 一个dom元素距离页面可视区域的位置值 -- getBoundingClientRect
getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box=docum ...
- 原生JS 获取浏览器、窗口、元素等尺寸的方法及注意事项
一.通过浏览器获得屏幕的尺寸 screen.width screen.height screen.availHeight //获取去除状态栏后的屏幕高度 screen.availWidth //获取去 ...
- [完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器
截至自2017-08-11,支持现世已出的几乎所有PC端浏览器版本判断. 受支持的PC端浏览器列表: Edge IE Chrome Firefox Opera Safari QQ浏览器 360系列浏览 ...
- 【笔记】jquery js获取浏览器滑动条距离顶部距离的写法
jq写法 $(window).scroll(function(){ var $top = $(document).scrollTop(); }); /*注:$(window).scroll(funct ...
- jq获取浏览器可视窗口的高度
<script> var window_height = $(window).height(); </script>
- js获取元素的滚动高度,和距离顶部的高度
jq: 获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 $(doc ...
- JQuery 获取元素到浏览器可视窗口边缘的距离
获取元素到浏览器可视窗口边缘的距离 by:授客 QQ:1033553122 1. 测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com/ishouke/ ...
- 原生JS实现随着鼠标滚动到元素位置触发对应css3动画,简单易用滚动监测
预览链接:http://www.vanwee.cn/%E6%BB%9A%E5%8A%A8%E7%9B%91%E5%90%AC/ <style> body{overflow-x: hidde ...
- 判断指定对象是否进入浏览器可视窗口,true 进入,false 没进入
//判断指定对象是否进入浏览器可视窗口,true 进入,false 没进入 var $win = $(window);//jQuery 的 window 对象 即:文档对象 function isVi ...
随机推荐
- 多媒体开发之音频编码---ffmpeg 编码aac
http://blog.csdn.net/ctroll/article/details/8169396
- sqoop1.4.4从oracle导数据到hive中
sqoop从oracle定时增量导入数据到hive 感谢: http://blog.sina.com.cn/s/blog_3fe961ae01019a4l.htmlhttp://f.dataguru. ...
- ubuntu12.04部署ROR
刚开始部署这玩意是很折磨的,折腾吧. 确保使用最新版本的linux,否则成功率会大大降低,因为ruby开源社区对于ubuntu的支持总是不兼容旧版本的.笔者部署时的版本是ubuntu12.04 每次都 ...
- day21 os random 序列json
一.random模块 import random # print(random.random()) #0到1之间数 # print(random.uniform(10,20)) #范围内小数 ...
- python3 - property的使用
传统的绑定属性值,会把属性暴露出去,而且无法检查参数是否合法,如下: class Test(object): def __int__(self,age): self.age = age 为了检查参数 ...
- eclipse 4.3 汉化
打开浏览器,浏览“参考资料”内给出的“eclipse语言包下载”地址,在博客新页面找到地址链接,如图所示.“Babel Language...”开头的一栏下面就是各个eclise版本的语言包,此处以I ...
- tomcat NIO配置
1.tomcat NIO配置 今天在查看日志时发现tomcat的Socket连接方式为bio,于是我想既然有bio那肯定有nio.果然,一查就发现tomcat在6.0之后就可以配置nio的方式.nio ...
- Sql注入_mysql权限入侵
实验:测试不同数据库用户的操作权限 文件读写测试:load_file() ,into outfile 数据库用户账号密码存储在mysql.user下 Mysql最高权限用户root: Mysql普通权 ...
- iOS 成员变量和属性的区别
一. 成员变量 1.成员变量的作用范围: @public:在任何地方都能直接访问对象的成员变量 @private:只能在当前类的对象方法中直接访问,如果子类要访问需要调用父类的get/set方法 @p ...
- flex 均分铺满
<view>充值金额</view> <view class="weui-flex"> <repeat for="{{amount ...