jQuery与原生js如何获取文档的高度、可视区域高度以及滚动条距页面顶部的高度

最新推荐文章于 2024-08-12 08:01:34 发布

原创最新推荐文章于 2024-08-12 08:01:34 发布 · 746 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用JavaScript和jQuery获取网页的各种尺寸信息，包括文档总高度、浏览器可视区域高度及滚动条距页面顶部的高度。这些知识对于网页开发中处理布局和响应式设计至关重要。

1.获取文档的高度

$(document).height()     整个文档的高度

document.body.scrollHeight 或者  document.documentElement.scrollHeight     浏览器所有内容高度

2.获取浏览器可视区域高度

$(window).height()   浏览器可视区域高度

document.documentElement.clientHeight  或者 document.body.clientHeight   浏览器可视区域高度，

3.获取滚动条距页面顶部的高度

 $(document).scrollTop()或者 $(window).scrollTop()     浏览器滚动部分高度

document.body.scrollTop  或者 document.documentElement.scrollTop      浏览器滚动部分高度

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

document_write

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

使用jQuery或者原生js实现鼠标滚动加载页面新数据

10-22

// 获取浏览器可视区域的高度 if (scrollTop + windowHeight == scrollHeight) { // 判断是否滚动到底部 // 在这里执行加载新数据的代码 // 例如：var page = Number($("#redgiftNextPage").attr('currentpage'...

JS JQUERY实现滚动条自动滚到底的方法

12-07

总结来说，无论是jQuery还是原生JavaScript，实现滚动条自动滚到底部的核心思路都是获取页面总高度并减去视口高度，然后设置滚动条的位置。这两种方法都简单易懂，可以根据项目的需求和环境来选择使用。在实际开发中...

参与评论您还未登录，请先登录后发表或查看评论

原生js和jquery 获取文档高度

atu1111的博客

10-22

2718

原生js和jquery 获取文档高度一.原生js获取页面和浏览器高度和宽度 1.获取浏览器的高度和高度工具栏高/宽度：包含了地址栏、书签栏、浏览器边框等范围。如：高度，可通过浏览器高度 - 页面可用高度得出，即：window.outerHeight - window.innerHeight。 window.outerHeight ：浏览器高度(包含了工具栏高度)。 window.outerWidth ：浏览器宽度(包含了工具栏宽度)。以获取浏览器的高度为例： 1) window

原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名

weixin_30711917的博客

09-18

172

1）关于 pageX, clienX,offsetX,layerX pageX：鼠标在页面上的位置，从页面左上角开始，即是以页面为参考点，不随滑动条移动而变化 clientX：鼠标在页面上可视区域的位置，从浏览器可视区域左上角开始，即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动而变化. offsetX：IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左...

jquery获取窗口高度的方法

最新发布

前端达人

08-12

682

在日常开发中，我们经常需要在用户浏览页面时进行一些动态操作，比如实现无限滚动加载更多内容、调整布局、或触发动画效果。为了实现这些功能，准确获取整个网页文档的高度是关键的一步。今天，我们就结合一个实际业务场景，来看一下如何用JavaScript获取整个文档的高度。场景介绍假设你在开发一个电商网站，需要在用户滚动到底部时自动加载更多商品。为了实现这个功能，我们需要精确地获取当前网页的高度，并判断用户是...

js 取得文档的高度和宽度

12-31

1190

网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth

基于jQuery实现滚动条返回顶部动画效果

其中，“滚动条返回顶部”功能是一个非常常见且实用的交互设计，广泛应用于长页面网站、博客、电商网站等场景中，目的是让用户在浏览较长内容后能够快速返回页面顶部，而无需手动拖动滚动条或反复点击鼠标滚轮。...

原生JS监听滚动条实现导航位置与样式动态更新

本资源“js监听滚动条改变导航元素位置和样式.rar”聚焦于使用原生JavaScript实现一个常见但极具实用价值的功能：通过监听页面滚动事件，动态调整导航栏的位置与样式，使其能够根据用户的滚动行为做出响应。...

原生js获取宽高与jquery获取宽高的方法关系对比

10-26

2. Internet Explorer 6在宽度和高度未设定的情况下，不会显示滚动条，这与其他浏览器的行为不同。总结来说，原生JavaScript的`style.width`和`offsetWidth`提供基础的宽度获取，而jQuery的`width()`、`innerWidth...

js获取网页高度(详细整理)

10-27

js获取网页高度包括(网页可见区域高，屏幕分辨率的高，屏幕可用工作区高度,js 获取浏览器高度 js 获取屏幕高度)等等，各种高度,本文详细整理了一些，需要了解的朋友可以参考下

JavaScript获取当前网页文档的高度，宽度，滚动高度，滚动宽度

qq_44659826的博客

08-22

923

js获取当前文档的高度和宽度获取文档尺寸一、获取文档网页可见区域宽：document.body.clientWidth || document.documentElement.clientWidth 网页可见区域高：document.body.clientHeight || document.documentElement.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offset

js获取网页文档的各种高度和宽度

weixin_45081519的博客

03-25

1090

网页可见区域宽：document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scrollWidth 网页正文全文高： document.body.scrollHeight 网页被卷去的高： document.body.sc.

如何使用JavaScript获取整个文档的高度？

w36680130的博客

06-30

788

Some documents I can't get the height of the document (to position something absolutely at the very

$(document).height();文档高度

Alisa_vc的博客

09-08

671

$(document).height();//文档高度 $(window).height();//是文档窗口高度 $("div").offset().top//是标签距离顶部高度 $(window).scrollTop();//是滚动条高度和$(document).scrollTop()效果一样但是$(window).scrollTop() 兼容性好 $(".footer").heig...

jQuery中获取文档的高度、可视区域高度以及滚动条距页面顶部的高度

weixin_30314813的博客

10-27

325

在写页面的时候，经常会碰到这样的情况，就是要获取文档的高度、可视区域高度或者滚动条距页面顶部的高度等情况。但我总是有些爱搞混淆了，这里还是简单做个笔记吧，这里只限于使用jQuery来获取。 1、获取文档的高度。使用 $(document).height() 代表了整个文档的高度 2、获取文档可视区域高度。使用$(window).height() 代表了当前可见区域的...

关于数据未渲染完，要获取document高度问题——ajax全局事件

ddr66288的博客

11-24

281

　　昨天在做开发时，遇到这样一个问题，当页面刚加载的时候，就要获取document的高度，可是此时页面上所有的ajax请求的数据都还没有渲染到页面上，所以导致得到的document的高度仅仅是页面结构的高度，而不是想要的结果，对于与这个问题，我琢磨了好久，怎么才能在ajax数据渲染完成之后获取到document的高度呢？我想过很多办法，但是都有弊端，比如：　　1、设置延时器：让页面刚...

html/css基础篇——关于浏览器window、document、html、body高度的探究

ajb11683的博客

11-26

541

　　首先说明本人所理解的这几个元素的计算　　window高度应当是文档所在窗口的可视高度（没有包括浏览器的滚动条），计算方法document.documentElement.clientHeight 　　document高度应该为文档内容的高度，计算方法Math.max(document.body[ "scrollHeight" ], document.documentElemen...

JS高级使用3.0——JS中获取页面的高度、距离顶部的距离

蓝桉

05-04

3834

获取距离顶部的距离可视区高度滚动条总高度滚动页面scroll()scrollTo()scrollBy()