原生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获取浏览器的滚动距离和可视窗口的高度的更多相关文章

  1. 原生js获取 一个dom元素距离页面可视区域的位置值 -- getBoundingClientRect

    getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box=docum ...

  2. 原生JS 获取浏览器、窗口、元素等尺寸的方法及注意事项

    一.通过浏览器获得屏幕的尺寸 screen.width screen.height screen.availHeight //获取去除状态栏后的屏幕高度 screen.availWidth //获取去 ...

  3. [完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器

    截至自2017-08-11,支持现世已出的几乎所有PC端浏览器版本判断. 受支持的PC端浏览器列表: Edge IE Chrome Firefox Opera Safari QQ浏览器 360系列浏览 ...

  4. 【笔记】jquery js获取浏览器滑动条距离顶部距离的写法

    jq写法 $(window).scroll(function(){ var $top = $(document).scrollTop(); }); /*注:$(window).scroll(funct ...

  5. jq获取浏览器可视窗口的高度

    <script> var window_height = $(window).height(); </script>

  6. js获取元素的滚动高度,和距离顶部的高度

    jq: 获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 $(doc ...

  7. JQuery 获取元素到浏览器可视窗口边缘的距离

    获取元素到浏览器可视窗口边缘的距离 by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com/ishouke/ ...

  8. 原生JS实现随着鼠标滚动到元素位置触发对应css3动画,简单易用滚动监测

    预览链接:http://www.vanwee.cn/%E6%BB%9A%E5%8A%A8%E7%9B%91%E5%90%AC/ <style> body{overflow-x: hidde ...

  9. 判断指定对象是否进入浏览器可视窗口,true 进入,false 没进入

    //判断指定对象是否进入浏览器可视窗口,true 进入,false 没进入 var $win = $(window);//jQuery 的 window 对象 即:文档对象 function isVi ...

随机推荐

  1. PHP中插件机制的一种实现方案

    这篇文章的出发点是我对插件机制的理解,及其在PHP中的实现.此方案仅是插件机制在PHP中的实现方案之一,写下来和大家分享,欢迎大家一起讨论. 插件,亦即Plug-in,是指一类特定的功能模块(通常由第 ...

  2. JNDI架构提供了一组标准的独立于命名系统的API

    JNDI架构提供了一组标准的独立于命名系统的API,这些API构建在与命名系统有关的驱动之上.这一层有助于将应用与实际数据源分离,因此不管应用访问的是LDAP.RMI.DNS.还是其他的目录服务.换句 ...

  3. 初涉Quartz

    1.首先需要导入包,必须导入的包如下:      quartz-1.8.5.jar  commons-logging.jar  spring-core-3.0.5.RELEASE.jar  sprin ...

  4. iOS 创建多个button实现点击改变背景颜色

    工程中需要实现与UISegmentedControl效果相似的一排一共十个button,如下图.但是SegmentedControl修改不太方便,就用button替代, 循环创建十个button,点击 ...

  5. array_sum的用法

    众所周知,PHP中函数是功能很强大的,那么今天就说下array_sum的功能吧. 函数功能:返回数组中所有值的和. 举例: <?php $a = array(1,2); $b = array_s ...

  6. python 推荐算法

    每个人都会有这样的经历:当你在电商网站购物时,你会看到天猫给你弹出的“和你买了同样物品的人还买了XXX”的信息:当你在SNS社交网站闲逛时,也会看到弹出的“你可能认识XXX“的信息:你在微博添加关注人 ...

  7. Uncaught Error: artDialog: Document types require more than xhtml1.0

    这需要声明html文档,加上如下声明就不会报错了! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  8. POJ1365 Prime Land【质因数分解】【素数】【水题】

    题目链接: http://poj.org/problem?id=1365 题目大意: 告诉你一个数的质因数x的全部底数pi和幂ei.输出x-1的质因数的全部底数和幂 解题思路: 这道题不难.可是题意特 ...

  9. jmeter通过json extrcator或者正则表达式获取json返回信息

    1.下载地址,及插件文档资料 https://jmeter-plugins.org/wiki/JSONPathExtractor/ json信息如下 { "error_code": ...

  10. 在Windows 7 (SP1)上安装Visual Studio 2015

    背景说明:最近重装了Windows 7 系统,那就顺手装个Visual Studio 2015吧,没想到一案装就报错(具体没截图了).只有Windows8 或是Windows 10才能装 2015?答 ...