最近在做项目的时候遇到需要用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. XAML 命名空间和命名空间映射

    本主题将介绍大部分 XAML 文件的根元素中存在的 XML/XAML 命名空间 (xmlns) 映射.它还将介绍如何为自定义类型和程序集生成类似的映射. XAML 命名空间如何与代码定义和类型库相关 ...

  2. github 预览html

    在网址前加 http://htmlpreview.github.io/?

  3. c - 每位数字尾部加空格

    /* input:一个4位整数. output:每位整数后紧跟一个空格的字符串. */ char * insert(char *s) { int len = strlen(s); * len + ); ...

  4. OpenCV——识别手写体数字

    这个是树莓派上运行的, opencv3 opencv提供了一张手写数字图片给我们,如下图所示,可以作为识别手写数字的样本库. 0到9共十个数字,每个数字有五行,一行100个数字.首先要把这5000个数 ...

  5. hdu5398 GCD Tree(lct)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud GCD Tree Time Limit: 5000/2500 MS (Java/O ...

  6. 解决JavaScript中如何输出空格

    在写JS代码的时候,大家可以会发现这样现象:document.write("   1      2                3  ");结果: 1 2 3无论在输出的内容中什 ...

  7. 第10章DOM笔记

    第十章 DOM 一 Node类型 共有12种节点类型,每个节点都有nodeType属性,用于表明节点类型,nodename 表示标签名称 nodeValue始终为null 1.操作节点 a)  app ...

  8. Html5 学习之 Html5功能判断插件 Modernizr

    ---恢复内容开始--- Modernizr 浏览器对HTML5和CSS3开发的功能检测类库 由于当前用户使用的浏览器版本较多,对H5和CSS3的支持也各不相同.前端的开发者,在使用一些新的特性的时候 ...

  9. PHP内置Web Server探究(二)自定义PHP控制台输出console函数

    我们在开发APP的服务器端,当和APP进行联调时通常需要实时跟踪URL请求和参数的接收情况. 但PHP并没有像Python或Java专有的控制台输出函数,Python的print()和Java的Sys ...

  10. 参数解析argparse模块

    argparse,python的一个命令行解析模块 import argparse #创建一个命令行解析器 parser = argparse.ArgumentParser() #增添参数 parse ...