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获取滚动条距离顶部高度的更多相关文章
- js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox
做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...
- javascript 获取滚动条距离顶部的位置(兼容所有的)。
function getScrollTop() { var scrollPos; if (window.pageYOffset) { scrollPos = window.pageYOffset; } ...
- js获取元素的滚动高度,和距离顶部的高度
jq: 获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 $(doc ...
- 原生js来写获取元素距离顶部距离,以及滚动条滚动指定距离和时间控制
这是我在写vue项目里封装的一个公共js类 里面还有一些其他的方法,一并拿过来了 class Public { isDesktop(){ //判断是否为pc端 return (window.scree ...
- js计算元素距离顶部的高度及元素是否在可视区判断
前言: 在业务当中,我们经常要计算元素的大小和元素在页面的位置信息.比如说,在一个滚动区域内,我要知道元素A是在可视区内,还是在隐藏内容区(滚动到外边看不到了).有时还要进一步知道,元素是全部都显示在 ...
- js获取网页和屏幕高度
获取浏览器窗口的可视区域高度和宽度 document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象 ...
- JS获取各种宽度、高度的简单介绍:
JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获 ...
- js获取网页的各种高度
原文:js获取网页的各种高度 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: documen ...
- JQ的offset().top与JS的getBoundingClientRect区别详解,JS获取元素距离视窗顶部可变距离
壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset( ...
随机推荐
- [已解决]pip安装包时报错:Read time out
有一些包在源在国外,因为某些原因,网络并不是很好,常常会发生Read time out安装失败的问题. 一般解决方法有:修改国内的安装源,如果能够获取只是慢的话,还有中比较懒的方法就是增加读取的时间. ...
- 【转载】从头编写 asp.net core 2.0 web api 基础框架 (2)
Github源码地址是: https://github.com/solenovex/Building-asp.net-core-2-web-api-starter-template-from-scra ...
- Phabricator API Go 创建task/提交文件到Phabricator
Go Phabricator API 代码/程序创建task/提交文件到Phabricator Creat Task or upload file to phabricator with code i ...
- 51 nod 1297 管理二叉树
原题链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1297 先是暴力加优化T了最后两个点…… 我还是来想想正解吧. ...
- The Blocks Problem(vector)
题目链接:http://poj.org/problem?id=1208 The Blocks Problem Time Limit: 1000MS Memory Limit: 10000K Tot ...
- 说说 typedef 的那些事
最近在复习数据结构时,经常看到 typedef 的身影,但始终不清楚 typedef 的用法具体时怎么样的,特地查阅<C Primer Plus 第5版>,并将查到的内容写出来供大家沟通学 ...
- c语言sizeof用法(32位机)
- MFC中自定义消息
在头文件stdafx.h中增加一个自定义消息宏 #define WM_USER_THREADEND WM_USER + 1 在于增加新消息的窗口或对话框类的头文件中增加一个回调函数声明 afx_msg ...
- 我的第一个python web开发框架(20)——产品发布(部署到服务器)
首先按上一章节所讲述的,将服务器环境安装好以后,接下来就是按步骤将网站部署到服务器上了. 我们的站点是前后端分离的,所以需要部署两个站点.首先来发布前端站点. 部署前端站点 输入命令进入svn管理文件 ...
- Tree Recovery(由先、中序列构建二叉树)
题目来源: http://poj.org/problem?id=2255 题目描述: Description Little Valentine liked playing with binary tr ...