js获取浏览器滚动条距离顶端的距离
最近在做项目的时候遇到需要用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获取浏览器滚动条距离顶端的距离的更多相关文章
- [Jquery] js获取浏览器滚动条距离顶端的距离
需要用js获取滚动条距离窗口顶端的距离和js获取浏览器可视化窗口的大小 一.jQuery获取的相关方法 jquery 获取滚动条高度 获取浏览器显示区域的高度 : $(window).height( ...
- JS 获取浏览器窗口大小
JS 获取浏览器窗口大小 <script> // 获取窗口宽度 if (windows.innerWidth) { winWidth = windows.innerWidth; } els ...
- JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth
常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((docume ...
- JS 获取浏览器和屏幕宽高等信息代码
JS 获取浏览器和屏幕宽高等信息. 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:doc ...
- js获取浏览器高度和宽度值,尽量的考虑了多浏览器。
js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...
- js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop。(转)
js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop. 分类: js.jquery.ext.js技术2011 ...
- 【转】js 获取浏览器高度和宽度值(多浏览器
原文地址:http://www.jb51.net/article/19844.htm js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ...
- js获取浏览器高度
常用: JS 获取浏览器窗口大小 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // 获取窗口宽度 if (window.innerWidth) winWidth = ...
- js获取浏览器窗口大小
摘抄:https://blog.csdn.net/qq_27628085/article/details/81947478 常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if ...
随机推荐
- SQL从入门到基础–08 Union、Union all及案例
一.联合结果集 1. 简单的结果集联合: Select FNumber,FName,FAge from T_Employee union select FidCardNumber,FName,FAge ...
- 武汉科技大学ACM :1002: 零起点学算法28——判断是否闰年
Problem Description 输入年份,判断是否闰年 Input 输入一个整数n(多组数据) Output 如果是闰年,输出yes,否则输出no(每组数据一行) Sample Input 2 ...
- .cshrc
使用set和setenv命令可以设置shell选项或者列出shell变量 在C Shell 里, set 定义局部变量, setenv定义全局变量 1.set set 变量名 = 内容: s2 ...
- 我和小美的撸码日记(2)之第一个基于MVC+Jqgrid的列表页面
一.前言 “尼玛哥,上周你教我改了下OA系统UI,黄总看了很满意呀.” “不错不错,看来小美进步很大,可以提前结束试用期,到时候加工资别忘了请我吃饭呀!” “尼玛哥,你有女朋友了吗?” “ ...
- Struts2学习笔记--Struts2的体系结构
1. Struts2体系结构 Struts是以前端控制器框架为主体的框架,用户的请求会通过控制器选择不同的Action类来执行具体的操作,在Action类中所有的Servlet对象(request.r ...
- iOS开发之多媒体API(1)
iOS开发之多媒体API(1) 播放视频 视频文件介绍 视频格式可以分为适合本地播放的本地影像视频和适合在网络中播放的网络流媒体影像视频两大类.尽管后者在播放的稳定性和播放画面质量上可能没 ...
- PCB Layout 中的高频电路布线技巧
1.多层板布线 高频电路往往集成度较高,布线密度大,采用多层板既是布线所必须,也是降低干扰的有效手段.在PCB Layout阶段,合理的选择一定层数的印制板尺寸,能充分利用中间层来设置屏蔽,更好地实现 ...
- Wireshark "The NPF driver isn’t running…"(可见的驱动本质上是一个系统服务,使用net start 启动)
前几天重装系统,装上了windows7 RC系统.昨天开始尝试装上了wireshark 这款很强大的网络监视软件,满心欢喜的打开,可是每次打开都会弹出“The NPF driver isn't run ...
- ActionBarActivity & FragmentActivity
1 ActionBarActivity 是FragmentActivity的一个子类 2 ActionBarActivity 加入了对actionBar的操作, 比如getSupportActionB ...
- Android AutoCompleteTextView和MultiAutoCompleteTextView使用
Android AutoCompleteTextView和MultiAutoCompleteTextView的功能类似于百度或者Google在搜索栏输入信息的时候,弹出的与输入信息接近的提示信息: 它 ...