原生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 ...
随机推荐
- Spring MVC4使用Servlet3 MultiPartConfigElement文件上传实例
在这篇文章中,我们将使用Spring MultipartResolver 实现 StandardServletMultipartResolver在Servlet3环境中实现单点和多文件上传功能.Spr ...
- css3的线性渐变效果
1.代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...
- Linux命令之paste
介绍 cut用来从文本文件或标准输出中抽取数据列或者域,然后再用paste可以将这些数据粘贴起来形成相关文件.粘贴两个不同来源的数据时,首先需将其分类,并确保两个文件行数相同. paste将按行将不同 ...
- 使用PHP创建一个socket服务端
与常规web开发不同,使用socket开发可以摆脱http的限制.可自定义协议,使用长连接.PHP代码常驻内存等.学习资料来源于workerman官方视频与文档. 通常创建一个socket服务包括这几 ...
- 部署网站时的错误“one of its dependencies.试图加载格式不正确的程序。”解决方案。
Sever Error in '/' Application.Could not load file or assembly 'SresBase' or one of its dependencies ...
- poj 3590(dp 置换)
题目的意思是对于序列1,2,...,n.要你给出一种字典序最小的置换使得经过X次后变成最初状态,且要求最小的X最大. 通过理解置换的性质,问题可以等价于求x1,x2,..,xn 使得x1+x2+... ...
- [Spring MVC]学习笔记--form表单标签的使用
github例子地址: https://github.com/lemonbar/spring-mvc-jsp 效果图 关于spring mvc的标签的讲解, 有一篇blog已经讲的很细了. http: ...
- 路径 php中'.'和'..'还有'./'和'../'
./当前目录(就是当前执行文件所在目录) ../上级目录 / 这个才是根目文件名/ 同级目录 例子如图 1.cart下的index.php 1)要引用Public->css->index. ...
- ubuntu1.4搭建zookeeper3.5.2分布式集群
1.下载 官网链接:http://mirrors.hust.edu.cn/apache/zookeeper/zookeeper-3.5.2-alpha/zookeeper-3.5.2-alpha.ta ...
- Webshell清除-解决驱动级文件隐藏挂马
Webshell清除-解决驱动级文件隐藏挂马