原生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 ...
随机推荐
- 学习lofter 让图片适应各个分辨率的方法
只要图片的分辨率足够大,那么可以任意的width,不用担心失真 那么就可以根据屏幕的分辨率给图片相应的宽度 大分辨率浏览 小分辨率浏览 两个分辨率的图片地址是一样的,排除了换图的可能 大分辨率下的代码 ...
- 图像增强之DDE---基于红外图像的数字图像细节增强DDE
(1)DDE应用背景 (2)DDE算法简介 (3)DDE 实现 (4)DDE 总结和不足 ----------author:pkf -----------------time:2-9 -------- ...
- 解决OV系列摄像头寄存器读数据无法收到的问题
最近工作中接了一款OV7725的sensor,由于平台已经接过很多的家的sensor也就没有太当回事.问题出现的很奇怪,再看了 register map后基本确定了要尽心register R/W测试 ...
- iOS ---APP更换应用图标logo
iOS 10.3 加入了了更换应用图标的新功能,开发者可以为应用提供多个应用图标选择.用户可以自由的在这些图标之间切换,下面具体查看切换步骤. 1.先把你需要的所有图片都导入项目中(比例为1:1) 2 ...
- OpenCV学习笔记十:opencv_superres模块
一,简介: 该库用于图像超分辨率重建.即通过硬件或软件的方法提高原有图像的分辨率,通过一系列低分辨率的图像来得到一幅高分辨率的图像.
- VMware Workstation网卡不启动
故障原因:虚拟机安装完成后,默认网络配置为”NAT”,对应真机的系统服务为“VMware NAT Service”默认情况下该服务启动类型为自动,状态为启动,若该服务未能正常启动则会导致如上报错,手动 ...
- 《PhotoShop CS6 》第一节 矢量与分辨率
分辨率:不一定是方形,可以调整其比例. 色彩模型:色相Hue(圆周,冷暖相接),饱和度Saturation(半径),明度Brightness(轴,从黑到白).
- 【BZOJ1408】[Noi2002]Robot DP+数学
[BZOJ1408][Noi2002]Robot Description Input Output Sample Input 3 2 1 3 2 5 1 Sample Output 8 6 75 HI ...
- c# 如何利用异或运算进行简单加密解密
利用“^”异或运算对字符串进行加密 原理:按位做“异或”运算是->位值相同得1,不同得0,如下计算 1 ^ 1 = 0 1 ^ 0 = 1 0 ^ 1 = 1 0 ^ 0 = 0 例如: < ...
- 1.Configure the mongo Shell-官方文档摘录
Customize the Prompt 自定义提示 You may modify the content of the prompt by setting the variable prompt i ...