最近在做项目的时候遇到需要用js获取滚动条距离窗口顶端的距离和js获取浏览器可视化窗口的大小,在这儿做一个整理保存:

   一、jQuery获取的相关方法

jquery 获取滚动条高度  

获取浏览器显示区域的高度 : $(window).height();
获取浏览器显示区域的宽度 : $(window).width();
获取页面的文档高度 : $(document).height();
获取页面的文档宽度 :$(document).width(); 获取滚动条到顶部的垂直高度 : $(document).scrollTop();
获取滚动条到左边的垂直宽度 : $(document).scrollLeft(); 计算元素位置和偏移量: $(id).offset(); offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。 offset(options, results)
options.relativeTo  指定相对计 算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll  是否把 滚动条计算在内,默认TRUE
options.padding  是否把padding计算在内,默认false
options.margin  是否把margin计算在内,默认true
options.border  是否把边框计算在内,默认true

但是我在使用jQuery的方法的时候在IE6上会发生不兼容现象。

二、使用js获取的相关方法

getScrollTop()使用这个方法在IE、谷歌和火狐上都能获取,当然这不是我原创的,也是有哥们贴网上的,我只是在此收藏整理一下。

js获取浏览器滚动条距离顶端的距离的更多相关文章

  1. [Jquery] js获取浏览器滚动条距离顶端的距离

    需要用js获取滚动条距离窗口顶端的距离和js获取浏览器可视化窗口的大小  一.jQuery获取的相关方法 jquery 获取滚动条高度 获取浏览器显示区域的高度 : $(window).height( ...

  2. JS 获取浏览器窗口大小

    JS 获取浏览器窗口大小 <script> // 获取窗口宽度 if (windows.innerWidth) { winWidth = windows.innerWidth; } els ...

  3. JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth

    常用: JS 获取浏览器窗口大小   // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((docume ...

  4. JS 获取浏览器和屏幕宽高等信息代码

    JS 获取浏览器和屏幕宽高等信息. 网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:doc ...

  5. js获取浏览器高度和宽度值,尽量的考虑了多浏览器。

    js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...

  6. js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop。(转)

    js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop. 分类: js.jquery.ext.js技术2011 ...

  7. 【转】js 获取浏览器高度和宽度值(多浏览器

    原文地址:http://www.jb51.net/article/19844.htm js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ...

  8. js获取浏览器高度

    常用: JS 获取浏览器窗口大小 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // 获取窗口宽度 if (window.innerWidth) winWidth = ...

  9. js获取浏览器窗口大小

    摘抄:https://blog.csdn.net/qq_27628085/article/details/81947478 常用: JS 获取浏览器窗口大小       // 获取窗口宽度   if ...

随机推荐

  1. Asp.Net WebAPI Get提交、Post提交处理

    1.启用跨域提交 <system.webServer> <httpProtocol> <customHeaders> <add name="Acce ...

  2. 初学mysql命令

    创建数据库mydb: create database mydb; 运行sql脚本文件:(连接数据库后) \. e:\myphpWeb\createTables.sql 删除数据库mydb: drop ...

  3. 移动平台中 meta 标签的使用

    一.meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name). 1.http-equiv 属性的 Content-Type 值(显示字符集的设定) 说明:设定页面 ...

  4. 转载:Tomcat多数据源配置方法

    转载网址:http://blog.sina.com.cn/s/blog_53803b7b010144u5.html 关于在TOMCAT下配置多数据源,网上有很多方式,但是感觉也很混乱,俺只说俺们使用的 ...

  5. BufferedInputStream

    package file; import java.io.BufferedInputStream; import java.io.File; import java.io.FileInputStrea ...

  6. 开放GitHub的理由

    越来越多的程序把sourcecode和安装包托管到GitHub上,没有GitHub访问的网络太悲催了... 想通过Chocolatey(windows版的apt-get)装一个ConEmu都无法做到 ...

  7. WebApi上传图片 await关键字

    await关键字对于方法执行的影响 将上一篇WebApi上传图片中代码修改(使用了await关键字)如下: [HttpPost] public async Task<string> Pos ...

  8. js 发送ajax请求(XMLHttpRequest)

    <!DOCTYPE html><html> <head> <title></title> <script type="tex ...

  9. Xcode本地文件 提交svn 的明细

    XXXXX.xcscmblueprint  这个文件不用提交svn

  10. bzero()等的区别

    bzero  原型: extern void bzero(void *s, int n); 用法: #include <string.h> 功能:置字节字符串s的前n个字节为零.    说 ...