js获取滚动条高度 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

js获取各种高度总结

在写js的时候偶尔需要获取各种高度，比如；浏览器高度，页面高度，滚动高度等。抽空整理了我自己常用到的，时间仓促，没有考虑到万恶的IE浏览器。。。。...获取屏幕的高度和宽度（屏幕分辨率）： window.screen.height window.screen.width 获取屏幕工作区域的高度和宽度（去掉状态栏）： window.screen.availHeight...window.screen.availWidth 网页全文的高度和宽度： document.body.scrollHeight document.body.scrollWidth 滚动条卷上去的高度和向右卷的宽度...： document.body.scrollTop document.body.scrollLeft 网页可见区域的高度和宽度（不加边线）： document.body.clientHeight document.body.clientWidth...网页可见区域的高度和宽度（加边线）： document.body.offsetHeight document.body.offsetWidth

16.4K2 0

js获取网页屏幕可视区域高度

==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度看了以上代码，可能会有疑问说body和可见区域到底有什么不同呢，我们在console...以下是兼容主流浏览器（IE/Firefox/Chrome/Safari）获取浏览器窗口可视区域（不包括滚动条）和滚动条位置的代码： ? ?...|| document.body.clientWidth; 4 } 5 6 // 获取浏览器窗口的可视区域的高度 7 function getViewPortHeight() { 8...return document.documentElement.clientHeight || document.body.clientHeight; 9 } 10 11 // 获取浏览器窗口水平滚动条的位置...() { 13 return document.documentElement.scrollLeft || document.body.scrollLeft; 14 } 15 16 // 获取浏览器窗口垂直滚动条的位置

11.9K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

JS获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度

屏幕可用工作区宽度：window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置...-- var winWidth = 0; var winHeight = 0; function findDimensions() //函数：获取尺寸 { //获取窗口宽度...else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //获取窗口高度

11.6K3 0

jq获取滚动条距离

最近开学了,也在写新的项目,很多实例都用到了滚动条的距离,判断距离显示指定的内容(主要用于顶部导航的固定) $(function(){ $(window).scroll(function(){ var... a=$(document).scrollTop(); console.log('滚动条像素:'+a+'px'); }) 上述代码就实现了滚动条里顶部距离,当判断这个具体符合时出现指定的隐藏区域,不符合时候自动隐藏掉

2.2K2 0

vue.js数据渲染完成后，获取页面高度问题

遇到的问题通过接口请求出来的数据，渲染到页面上，再获取元素内容高度的时候，高度为0 为什么高度会是0 因为我是在接口返回数据后，就直接在回调函数里获取了元素内容的高度。...虽然数据获取到了，但是页面还没有及时的渲染出来，所以获取的内容高度就为0了然后我就延迟2秒获取内容高度，发现内容高度是渲染完成后的正常高度，但是这样肯定是不行的。...部分代码示例一： mounted() { this.getDataList(); //调用方法 }, methods: { //获取数据列表 getDataList() {...1&keywords=') .then(function (res) { that.dataList = res.data.data; //将获取到的数据赋值给...(() => { console.log(content.offsetHeight); // 600 }) } }, methods: { //获取数据列表

7.8K3 0

nicegui布局细节补充——容器高度与滚动条

这节我们将详细讲解容器高度以及滚动条的问题。...如果我们追加更多的内容，最终内容超过了浏览器窗口高度，此时窗口就会出现滚动条。很合理吧，总不能说内容超出了可视范围，直接把多余内容干掉吧。...此时，由于里面的容器有了一个确定高度值，我们就可以控制容器在内容溢出的处理行为。比如，让它出现滚动条：行13-14：这里我特意使用样式设置，你也可以通过 classes 设置。...除了设置固定的高度值，我们也可以设置一个最大高度：前面加个 max- 前缀就可以现在我们总结一个要点，要让一个容器在内容溢出高度时，出现滚动条，必须具备以下条件：容器本身的高度要被限制，可以是固定高度值...我们很少会说，页面上某个卡片的高度具体是多少。最多我们可能会设置一个最小高度之类(其实也不多见) 更多的情况是，我们希望整体布局刚好铺满整个屏幕，然后里面的某个区域，内容溢出时，出现滚动条。

3.4K1 0

API获取窗口滚动条位置

以前都是找内存读取滚动条位置，后来遇到一个游戏客户端的滚动条内存基址怎么也找不到，做了很多努力都失败了，因为这个内存基址已经不属于程序领空。...最后感觉这个滚动条应该是系统直接控制的，和程序本身关系不大，所以直接调用系统的API应该可以获得。...本人小白， API了解的不多，网上查了查资料才会用这个API了，现在回想起来，以前真是走了很多弯路，能直接用API获取的数据，我居然那么多次都去找内存、找基址。...下面是AAU（AARDIO）中获取窗口滚动条位置的API用法： GetScrollPos= User32.api("GetScrollPos","int(int hWnd,int bar)"); pos...=GetScrollPos(hwnd,0); 第一个参数是窗口句柄，第二个参数是滚动条方向。

2.8K3 0

JS获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度（转）

window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度... offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置...-- var winWidth = 0; var winHeight = 0; function findDimensions() //函数：获取尺寸 { //获取窗口宽度 if (window.innerWidth...window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //获取窗口高度

19.2K1 0

JavaScript获取高度和宽度

window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度

5.7K6 0

js 获取浏览器高度和宽度值(多浏览器)

window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置...-- var winWidth = 0; var winHeight = 0; function findDimensions() //函数：获取尺寸 { //获取窗口宽度 if (window.innerWidth...else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //获取窗口高度

12.6K6 0

Javascript 获取div真实高度

如果你要获取的样式没有相对应的（就像#div1.style.width对应#div1.offsetWidth），就只能分别针对不用浏览器来获取样式表的属性了，可以试着搜索“JS 获取样式属性”之类的。...原文：http://www.cnblogs.com/zhwl/p/3858682.html 实际测试过程中，发现上面获取真实高度是有问题，其实无论是设置在样式表还是在行内设置，都会获取到你设置的值，如果要获取真实高度...：获取真实高度...： alert(parseInt($('.article__content div').get(0).offsetHeight)); 获取时只要在这个样式里面的div大小，这个就是真实高度。...这里还附带其它的获取高度方法 alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度

7K3 0

根据获取内部元素的高度，设置iframe的高度

iframe 是一个非常迷得一个元素，很难直接获取其内部元素的高度。...下面分享一个方法，可以获取 iframe 内部元素的高度： function setIframeHeight(id){ try{ var iframe = document.getElementById

12.9K2 0

js 获取浏览器高度和宽度值(多浏览器)

屏幕可用工作区宽度： window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置...-- var winWidth = 0; var winHeight = 0; function findDimensions() //函数：获取尺寸 { //获取窗口宽度 if (window.innerWidth...else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //获取窗口高度

9.8K8 0

js 获取浏览器高度和宽度值(多浏览器)

屏幕可用工作区宽度： window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置...-- var winWidth = 0; var winHeight = 0; function findDimensions() //函数：获取尺寸 { //获取窗口宽度 if (window.innerWidth...else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //获取窗口高度

7.6K1 0

js检测滚动条到底部

$('#content-zone').scroll(function(){ if (this.scrollTop+$(this).height()+4>...

11.8K2 0

android获取状态栏高度

解决方案：为了达到良好的兼容性，我们可以如下变现代码 /** * 用于获取状态栏的高度。 * * @return 返回状态栏高度的像素值。...statusBarHeight = frame.top; } return statusBarHeight; } 还可以使用Resource对象获取

5.5K6 0

jq获取文档和窗口高度

jquery获取窗口高度和窗口高度，$(document).height()、$(window).height() 1.$(document).height()：整个网页的文档高度 2....$(window).height()：浏览器可视窗口的高度 3.$(window).scrollTop()：浏览器可视窗口顶端距离网页顶端的高度（垂直偏移） 4....$(document.body).height();//浏览器当前窗口文档body的高度 5....$(document.body).width();//浏览器当前窗口文档body的高度 9....$(document.body).outerWidth(true);//浏览器当前窗口文档body的总宽度包括border padding margin js:判断滑动到底 var scrollTop

3K1 0

JS滚动条触底加载更多

原理通过监听滚动区域DOM的scroll事件, 计算出触底 // 滚动可视区域高度 + 当前滚动位置 === 整个滚动高度 scrollDom.clientHeight + scrollDom.scrollTop..." class="scroll"> js-list"> 000000 000000 000000 000000 000000 js-loading...MutationObserver(callback) observer.observe(listDom, config) /** * clientHeight 滚动可视区域高度...* scrollTop 当前滚动位置 * scrollHeight 整个滚动高度 */ const scrollDom = document.getElementById

11.2K3 0

js实现自定义滚动条

自定义滚动条目录代码实例代码解析下载源码链接代码实例 * { padding: 0; margin: 0; } #box1 { width: 500px; height:...100%; } // 获取...oBox2.onmousedown = function(e) { // 获取事件的必备操作，保证事件被获取 var oEvent = e || event // 保证只有被按下滚动条后才能执行此函数...document.onmousemove = function(e) { var oEvent = e || event var l = oEvent.clientX - oBox1.offsetLeft // 获取滚动条可活动的宽度范围...var scale = l / wid // 图片的宽度和高度 var w = 3264 * scale var h = 4080 * scale // oBox3.style.cssText

7.4K3 0

JS判断滚动条是否停止滚动

背景：昨天一个同事有种需求，有一个展示数据区域的div，带滚动条，当滚动条滚动时，需要向后台发请求，计算数据，再拿到前台展示。 ...分析：由于数据量级别较大，所以当滚动条滚动时，如果时时向后台发请求，对服务器和浏览器都造成巨大的压力。想到的解决方案是，当滚动条停止时，再去发请求计算数据。...那么问题来了，如何判断滚动条是否停止了呢？解决：搜索了一下，js本身是无法判断滚动条是在滚动状态还是停止状态，只有通过其它方式了。...后来想到的思路是当滚动条滚动的时候，发起一个定期执行的方法，并记录一次当前滚动条到顶部的距离，这个方法中判断此时滚动条到顶部的距离是否和上次记录的相等，如果相等，那么说明停止滚动了，不相等，还在滚动。...-- // 让浏览器出现滚动条 for(var i = 0; i < 100; i++) { document.write(""); } var topValue = 0,//

23.1K0 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭