原生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 ...
随机推荐
- 【EasyUI】Tabs常用操作及href和content的异同
说明:EasyUI版本1.3.4 ,jQuery版本1.8.3 EasyUI Tabs常见使用方式 按照官方文档的说法,创建Tabs的方式有两种: 静态页面标签 动态JS代码 静态方式主要用于创建一些 ...
- Spring MVC生成RSS源
下面的示例演示如何使用Spring Web MVC框架生成RSS源. 首先使用Eclipse IDE,并按照以下步骤使用Spring Web Framework开发基于动态表单的Web应用程序: 创建 ...
- xilinx 赛灵思fpga verilog hdl 教程
http://www.eefocus.com/article/08-03/37231s.html http://wenku.baidu.com/link?url=5mdkMmm4BGGi7gRdgSk ...
- OpenCV学习笔记十五:opencv_features2d模块
一,简介: 该库用于2D特征检测,描述与匹配.
- java php 3des实现
php.java.android.ios通用的3des方法:http://blog.csdn.net/zcjwsrf/article/details/47659137 PHP使用3DES算法加密解密字 ...
- python3 - 动态添加属性以及方法
给实例动态添加方法,需引入types模块,用其的MethodType(要绑定的方法名,实例对象)来进行绑定:给类绑定属性和方法,可以通过 实例名.方法名(属性名) = 方法名(属性值) 来进行绑定.给 ...
- SQL.Cookbook 读书笔记5 元数据查询
第五章 元数据查询 查询数据库本身信息 表结构 索引等 5.1 查询test库下的所有表信息 MYSQL SELECT * from information_schema.`TABLES` WHERE ...
- [Spring MVC]学习笔记--form表单标签的使用
github例子地址: https://github.com/lemonbar/spring-mvc-jsp 效果图 关于spring mvc的标签的讲解, 有一篇blog已经讲的很细了. http: ...
- SharePoint服务器端对象模型 之 使用CAML进行数据查询(Part 4)
(五)列表查询中的阈值限制 在之前版本的SharePoint 中,如果在查询的时候没有指定返回数目,那么SharePoint将会查找该列表中所有的条目,这可能会造成在SQL表中需要返回大量的条目,极大 ...
- 转 谈谈JS里的{ }大括号和[ ]中括号的用法,理解后就可以看懂JSON结构了。
一.{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数. 如:var LangShen = {"Name":"Langshen",&qu ...