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( ...
随机推荐
- LeetCode第[11]题(Java):Container With Most Water 标签:Array
题目难度:Medium Given n non-negative integers a1, a2, ..., an, where each represents a point at coordina ...
- WEB相关系列
一.Nginx(web服务器) Nginx概述和安装(1) Nginx配置文件(2) Nginx日常维护操作(3) Nginx常用配置实例(4) Nginx常用功能(5) Nginx性能优化技巧(6) ...
- dead loop、continue & break、while...else语句
Dead loop 死循环,一经触发就会永远运行下去. continue & break 如果在循环过程中,因为某些原因,你不想继续循环了,就要用到break 或 continue语句. br ...
- django笔记整理
Django复习: MTV模型: manager启动服务→urls找到路径→(找到views视图函数或者做路由分发)→视图函数处理相关逻辑,返回一个模板或者是字符串: ---------------- ...
- 细说log4j
可能做过java项目的基本上都是用过log4j,它是用来做java日志的.比如我们做一个项目分为很多的模块,那我们怎么想要知道它什么时候启动了,这时候我们可以使用log4j标记某某模块启动了. 努力的 ...
- (转)关于docker的15个小tip
转自:https://www.cnblogs.com/elnino/p/3899136.html 1. 获取最近运行容器的id 这是我们经常会用到的一个操作,按照官方示例,你可以这样做(环境ubunt ...
- UESTC 1584 Washi与Sonochi的约定【树状数组裸题+排序】
题目链接:UESTC 1584 Washi与Sonochi的约定 题意:在二维平面上,某个点的ranked被定义为x坐标不大于其x坐标,且y坐标不大于其y坐标的怪物的数量.(不含其自身),要求输出n行 ...
- ACM_素数筛选
/* *素数筛法,判断小于MAXN的数是不是素数. *notprime是一张表,为false表示是素数,true表示不是素数 */ const int MAXN = 1000010; bool not ...
- [国嵌笔记][024][ARM汇编编程概述]
汇编程序用途 1.在bootloader与内核初始化时,还没有建立C语言运行环境,需要用到汇编程序 2.在对访问效率要求很高的情况下,需要用到汇编程序 ARM汇编分类 1.ARM标准汇编:适合于Win ...
- html日历(2)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...