原生JS 和 JQ 获取滚动条的高度,以及距离顶部的高度

JQ:相对比较简便

获取浏览器显示区域(可视区域)的高度 :
$(window).height();
获取浏览器显示区域(可视区域)的宽度 :
$(window).width();
获取页面的文档高度
$(document).height();
获取页面的文档宽度 :
$(document).width();
浏览器当前窗口文档body的高度:
$(document.body).height();
浏览器当前窗口文档body的宽度:
$(document.body).width();
获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)
$(document).scrollTop();
获取滚动条到左边的垂直宽度 :
$(document).scrollLeft();
获取或设置元素的宽度:
$(obj).width();
获取或设置元素的高度:
$(obj).height();

 原生JS:
document.documentElement.scrollTop //firefox

document.documentElement.scrollLeft //firefox

document.body.scrollTop //IE

document.body.scrollLeft //IE

像这种不兼容的获取方式,我们要做一下兼容,封装一个函数

                         function getScrollTop(){
                                                var scroll_top = 0;
                                                if (document.documentElement && document.documentElement.scrollTop) {//如果非IE
                                                    scroll_top = document.documentElement.scrollTop;
                                                }
                                                else if (document.body) {//IE浏览器
                                                    scroll_top = document.body.scrollTop;
                                                };
                                                return scroll_top;
                                            };

网页工作区域的高度和宽度

document.documentElement.clientHeight// IE firefox  


原文地址:https://www.cnblogs.com/xxflz/p/10453068.html

时间: 2024-10-12 04:04:23

原生JS 和 JQ 获取滚动条的高度,以及距离顶部的高度的相关文章

【整理】原生js和jQ获取窗口宽高及滚动条的方法和函数

原生js和jQ获取窗口宽高及滚动条的方法和函数 一.原生js获取 1.实际宽高(不包括工具栏,滚动条的视口高度,ie6.7.8不支持) window.innerHeight window.innerWidth 2.显示屏宽高 screen.height screen.width 3..显示屏宽高(除windows任务栏之外的高度)屏幕可用工作区 screen.avaiHeight screen.availWidth 4.网页可见区域宽高 document.body.clientWidth doc

js模拟jq获取id

js模拟jq获取id: (jquery)需要自己添加 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js模拟jq的点击效果</title> <style> * {margin: 0; padding: 0;} #btn {display:block;height: 30px; width:

测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色

<!doctype html> <html> <head>     <title>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</title>     <meta name="author" content="阿耀王子"> </head> <body> <p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色<

Js与Jq 获取浏览器和对象值的方法

JS and Jquery 都能获取页面元素的宽度,高度和相对位移等数值,那他们之间能相互转换或替代吗,写法又有哪些差异呢?本文将详细为你介绍. 1.Js获取浏览器高度和宽度document.documentElement.clientWidth ==> 浏览器可见区域宽度 document.documentElement.clientHeight ==> 浏览器可见区域高度 document.body.clientWidth ==> BODY对象宽度 document.body.cli

原生js与jq的差异

这里简单记录一下jq封装了原生js的哪些方法,和哪些方法没有封装. 鼠标滚轮,这个没有封装FF还是用DOMMouseScroll,ie和chrome用mousewheel // $("#div1").on('mousewheel',function (ev) { // alert(ev.originalEvent.wheelDelta); // }) $("#div1").on('DOMMouseScroll',function (ev) { alert(ev.or

js和jq获取父,兄弟,子节点

1,js获取节点: 父: parentNode 获取已知节点的父节点. 子: childNodes; 得到全部子节点 children 得到全部子节点 firstChild 获得第一个子节点 lastChild 获得最后一个子节点 兄弟:previousSibling 获取已知节点的前一个节点 nextSibling 获取已知节点下一个节点 2,jq获取节点: 父: $('#').parent() 获取上一级的父节点. $('#items').parents('.parent1')获取上面哪一级

js,jq获取父,兄弟,子节点整理

js获取节点 父: parentNode 获取已知节点的父节点. 子: childNodes; 得到全部子节点 children 得到全部子节点 firstChild 获得第一个子节点 lastChild 获得最后一个子节点 兄弟:previousSibling 获取已知节点的前一个节点 nextSibling 获取已知节点下一个节点 jq获取节点 父: $('#').parent() 获取上一级的父节点. $('#items').parents('.parent1')获取上面哪一级父节点都可以

jq获取元素到底部的距离

// var wh = $(window).height(),//是文档窗口高度 // ot = $("#icoimg").offset().top,//是标签距离顶部高度 // ds = $(document.documentElement).scrollTop();//是滚动条高度 // icoimg_h = $("#icoimg").height();//是标签高度 // // bh+$("div").height()+[$("d

非框架, 纯原生JS “商品详情跳转到商品列表,并记录高度“ 的写法思路

这里只讲思路,不提供代码. 写之前,我要先吐槽一种非常奇葩的写法.    下面是他的写法思路(虽不提倡,但可借鉴): 一个商品列表,然后把商品详情写在商品列表里. 这是一个页面,两个不一样的div标签,一个div标签是商品类表,另一个div标签是商品详情 从商品列表跳转到商品详情的操作是: 请求商品详情接口,请求到后赋值(在jq项目里特地引了个vue来双向绑定), 把当前页面的高度记录下来($document.scrollTop()获取高度), 然后把商品列表div标签隐藏掉,然后再显示商品详情