原生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. ThinkPHP 处理商品添加的时候操作多张表 用事务解决。

    #重新父类的add方法 public function add(){ #同时操作多装表,可以考虑用事务来做,要同时插入数据成功要么都不插输入数据. #开启事务的前提是表的引擎必须是InnoDB #开启 ...

  2. 设置内容 - text()、html() 以及 val()

    我们将使用前一章中的三个相同的方法来设置内容: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的 ...

  3. android 细节之 AndroidRuntimeException:This message is already in use

    今天在做项目处理消息队列的时候.遇到了这样一个问题.一个异常.AndroidRuntimeException:This message is already in use. 我当时的详细业务需求情境为 ...

  4. ASP.NET:把ashx写到类库里并在页面上调用的具体方法

    在类库中建Http Handler的操作很简单,就是添加一个普通的类,然后把之前ashx里的代码几乎一模一样贴到这个类中.但要注意命名空间和类名,因为之后我们会用 到.样例Handler: names ...

  5. Unity3D学习笔记——NGUI之Property Binding

    Property Binding:用于绑定两个组件,然后可以将一个组件的信息发送给另一个组件. 效果图如下: 一:使用步骤 1.建立一个Sprite 2.建立一个Label 3.为Sprite添加Pr ...

  6. Linux虚拟机安装完centos后环境配置

    linux下面安装软件 yum install rpm -ivh 编译安装 三部曲:./configure make make install 卸载 rpm -e 安装方法 1)通过yum安装软件 需 ...

  7. HTML学习笔记——标准网页设计+使用CSS、Javascript

    一.标准网页设计 1.标准网页概述: 标准网页设计要遵循,内容与表现相分离.   内容 + 表现 = 页面  ---  即 :XHTML + CSS = PAGE 内容与变现相分离,也就是内容使用HT ...

  8. linux下不错的小软件

    1.Shutter截图软件 可以完成基本截图功能,而且还有图片编辑功能,可以涂鸦添加水印等. 以下的截图全部归功于shutter软件. 2.VLC media player 媒体播放器 3.Termi ...

  9. hdu2587(递推)

    目前做过的最纠结的一道递推题. 情况比较多,比较复杂... 这题最主要的还是要推出当m=2 时和m>2时,用什么方法最优. 给个数据 n=3,m=2   需要48 n=3,m=3 需要81 如果 ...

  10. MySQL (时间)日期相减取天数

    select TO_DAYS(str_to_date('12/1/2001 12:00:00 AM','%m/%d/%Y')) -TO_DAYS(str_to_date('11/28/2001 12: ...