原生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. Spring MVC4使用Servlet3 MultiPartConfigElement文件上传实例

    在这篇文章中,我们将使用Spring MultipartResolver 实现 StandardServletMultipartResolver在Servlet3环境中实现单点和多文件上传功能.Spr ...

  2. css3的线性渐变效果

    1.代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...

  3. Linux命令之paste

    介绍 cut用来从文本文件或标准输出中抽取数据列或者域,然后再用paste可以将这些数据粘贴起来形成相关文件.粘贴两个不同来源的数据时,首先需将其分类,并确保两个文件行数相同. paste将按行将不同 ...

  4. 使用PHP创建一个socket服务端

    与常规web开发不同,使用socket开发可以摆脱http的限制.可自定义协议,使用长连接.PHP代码常驻内存等.学习资料来源于workerman官方视频与文档. 通常创建一个socket服务包括这几 ...

  5. 部署网站时的错误“one of its dependencies.试图加载格式不正确的程序。”解决方案。

    Sever Error in '/' Application.Could not load file or assembly 'SresBase' or one of its dependencies ...

  6. poj 3590(dp 置换)

    题目的意思是对于序列1,2,...,n.要你给出一种字典序最小的置换使得经过X次后变成最初状态,且要求最小的X最大. 通过理解置换的性质,问题可以等价于求x1,x2,..,xn 使得x1+x2+... ...

  7. [Spring MVC]学习笔记--form表单标签的使用

    github例子地址: https://github.com/lemonbar/spring-mvc-jsp 效果图 关于spring mvc的标签的讲解, 有一篇blog已经讲的很细了. http: ...

  8. 路径 php中'.'和'..'还有'./'和'../'

    ./当前目录(就是当前执行文件所在目录) ../上级目录 / 这个才是根目文件名/ 同级目录 例子如图 1.cart下的index.php 1)要引用Public->css->index. ...

  9. ubuntu1.4搭建zookeeper3.5.2分布式集群

    1.下载 官网链接:http://mirrors.hust.edu.cn/apache/zookeeper/zookeeper-3.5.2-alpha/zookeeper-3.5.2-alpha.ta ...

  10. Webshell清除-解决驱动级文件隐藏挂马

    Webshell清除-解决驱动级文件隐藏挂马