开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js获取div滚动条高度

在JavaScript中，获取<div>元素的滚动条高度通常涉及到计算元素的scrollHeight和clientHeight属性之间的差值。以下是相关的基础概念和具体实现方法：

基础概念

scrollHeight: 元素内容的实际高度，包括溢出部分，但不包括边框、外边距和滚动条本身。
clientHeight: 元素的内部高度（以像素为单位），包括内边距，但不包括水平滚动条、边框和外边距。

获取滚动条高度的方法

滚动条的高度可以通过以下公式计算得出：

滚动条高度 = scrollHeight - clientHeight;

示例代码

假设我们有一个id为myDiv的<div>元素，我们可以这样获取其滚动条的高度：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取滚动条高度</title>
<style>
  #myDiv {
    width: 200px;
    height: 100px;
    overflow-y: scroll;
    border: 1px solid black;
  }
</style>
</head>
<body>

<div id="myDiv">
  <!-- 假设这里有很多内容以至于出现滚动条 -->
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
</div>

<script>
  function getScrollbarHeight(element) {
    return element.scrollHeight - element.clientHeight;
  }

  var myDiv = document.getElementById('myDiv');
  var scrollbarHeight = getScrollbarHeight(myDiv);
  console.log('滚动条高度:', scrollbarHeight, 'px');
</script>

</body>
</html>

应用场景

自定义滚动条样式: 当需要自定义滚动条的外观时，了解滚动条的实际高度有助于更好地布局和设计。
性能优化: 在处理大量数据或复杂DOM结构时，了解滚动条的高度可以帮助优化渲染性能。

可能遇到的问题及解决方法

问题: 获取到的滚动条高度不准确。

原因: 可能是由于DOM元素尚未完全渲染，或者样式计算存在延迟。
解决方法: 使用requestAnimationFrame确保在浏览器重绘之前获取尺寸，或者在DOM加载完成后执行相关代码。

window.onload = function() {
  var myDiv = document.getElementById('myDiv');
  requestAnimationFrame(function() {
    var scrollbarHeight = getScrollbarHeight(myDiv);
    console.log('滚动条高度:', scrollbarHeight, 'px');
  });
};

通过上述方法，可以较为准确地获取到<div>元素的滚动条高度，并应用于各种实际的开发场景中。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Javascript 获取div真实高度

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

5.1K3 0

div:给div加滚动条　div的滚动条设置

今天做了个例子： div 的滚动条问题：两种方法：一、 div style=” overflow:scroll; width:400px; height:400px;”>div> 记住宽和高一定要设置噢...，否则不成的不过在不超出时，会有下面的滚动条，所以不是最好的选择二、 div style=” overflow-y:auto; overflow-x:auto; width:400px; height...:400px;”>div> 记住宽和高一定要设置噢，否则不成的这样比较好的是，在宽和高不超出时，只是一条线三、说明直接为div指定overflow属性为auto即可，但是必须指定div的高度，...如下： div style=”position:absolute; height:400px; overflow:auto”> div> 如果要出现水平滚动条，则： overflow-x:auto...同理，垂直滚动条为： overflow-y:auto 如果该div被包含在其他对象例如td中，则位置可设为相对：position:relative 发布者：全栈程序员栈长，转载请注明出处：https:

6.1K3 0

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

12.6K2 0

div滚动条

设置div内容溢出滚动 overflower：auto（内容溢出的时候出现滚动条；scroll会一直出现滚动条）滚动条样式滚动条组成： -webkit-scrollbar 滚动条整体部分 -webkit-scollbar-thumb...滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条） -webkit-scrollbar-track 滚动条的轨道（里面装有Thumb） -webkit-scrollbar-button...滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。...-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去） -webkit-scrollbar-corner 边角，即两个滚动条的交汇处 -webkit-resizer...两个滚动条的交汇处上用于通过拖动调整元素大小的小控件简洁版 /定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸/ .scroll::-webkit-scrollbar { width:

2.5K1 0

div高度自适应

IE7 高度自适应 .boxwrapper { height: 500px; } .box { width: 200px...; min-height: 200px; _height: 200px; border: 1px solid #ccc; } 内容高度小于...200px test test test test test 内容高度大于200px效果 test test test test test test test test test test test

1.8K2 0

div高度自适应

div高度自适应, 一般设置min-height值即可。如min-height: 200px, 当div的内容高于200px时, div会自动伸展。

2.3K3 0

html div 隐藏滚动条样式,div滚动条样式隐藏与显示

DIV滚动条样式是可以设置的，CSS滚动条同样也可以显示与隐藏，对div设置滚动条，设置其横向滚动条和纵向滚动条样式应该怎么做呢？...要设置CSS滚动条样式，需要用到overflow-y和overflow-x来设置div盒子对象右侧和底部滚动条效果。...常规overflow怎么设置 overflow-y:scroll 总是显示纵向滚动条 overflow-y:visible 不剪切内容也不添加纵向滚动条 overflow-x:scroll 总是显示横向滚动条...在需要时剪切内容并添加滚动条，DIV默认情况也是这个值，但需要设置时候设置即可； hidden：不显示超过对象尺寸的内容； scroll：总是显示滚动条。...div自定义滚动条样式滚动条的css样式主要有三部分组成： ::-webkit-scrollbar 定义了滚动条整体的样式； ::-webkit-scrollbar-thumb 滑块部分； ::-webkit-scrollbar-thumb

8.9K6 0

div 自适应高度自动填充剩余高度

方案1： Html： div class="outer"> div class="A"> 头部DIV div> div class="B">下部DIV...div> div> CSS： html, body { height: 100%; padding: 0; margin: 0; } .outer { height: 100%; padding...方案2： HTML： div class="outer"> div class="A">头部DIVdiv> div class="B">下部DIVdiv...> div> CSS： html, body { height: 100%; padding: 0; margin: 0; } .outer { height: 100%; padding:

5.2K4 0

iframe的高度自适应_div自适应高度

传统做法大致有两个：方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得本页面的高度，然后去同步父页面的iframe高度。...方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。...两个方法都只处理了静的东西，就是只在内容加载的时候执行，如果JS去操作DOM引起的高度变化，都不太方便。...如果在主窗口做一个Interval，不停的来获取被包含页的高度，然后做同步，是不是即方便，又解决了JS操作DOM的问题了呢？答案是肯定的。...下面谈谈各浏览器的兼容性问题，如何获取到正确的高度，主要是对body.scrollHeight和documentElement.scrollHeight两个值得比较。

7.1K4 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 // 获取浏览器窗口垂直滚动条的位置

9.5K1 0

div滚动条联动「建议收藏」

应用场景：一般是表头和表体，或者是需要联动的div，滚动一个div的滚动条，让另一个div的滚动条也随之滚动到一样的位置 //表头 div id="sc-table-head-div" class="...> //表体 div id='sc-table-body-div' headid='sc-table-head-div' class='sc-table-body-div' onscroll='scroll...> 现在需要我拖动表体的div横向滚动条，让表头也随之移动 //给表体的div绑定滚动条事件， $("#sc-table-body-div...").scroll(function(){ //两种方式（一个是属性设置，一二是方法设置）都写上，设置表头div的移动位置未表体的移动位置 try{$("#sc-table-head-div...").attr("scrollLeft",$("#sc-table-body- div").attr("scrollLeft"));}catch(e){} try{$("#sc-table-head-div

1.3K1 0

html中div滚动条设置,DIV滚动条属性及样式设置方式「建议收藏」

这里向大家描述一下DIV滚动条属性及样式设置，所谓DIV滚动条，就是利用DIV标签，在里面嵌入CSS样式表，加入overflow的属性值，这样，当div所规范的区域内的内容达到一定程序时，滚动条就派上用场...DIV滚动条属性及样式设置所谓DIV滚动条，就是利用DIV标签，在里面嵌入CSS样式表，加入overflow的属性值，这样，当div所规范的区域内的内容达到一定程序时，滚动条就派上用场。...当div所定义的区域的内容达到一定程度时，在div标签里面嵌入css样式表，定义overflow的属性值，设置DIV滚动条相关的属性。...滚动条，根据内容自动扩撑区域的大小，即定义的区域无效 scroll总是显示滚动条 hidden没有滚动条，超出区域的内容不可见 auto根据内容自动判断是否添加滚动条 2.DIV滚动条颜色属性： face-color...滚动条的主要颜色，其中包含滚动按钮和滚动滑块 3.overFlow-xoverFlow-y visible却省值，没有DIV滚动条，根据内容自动扩撑区域的大小，即定义的区域无效 scroll总是显示滚动条

7.2K2 0

html中div加滚动条

div 加滚动条的两种方法：一、 div style=" overflow:scroll; width:400px; height:400px;”>div> 记住宽和高一定要设置噢，否则不成的...不过在不超出时，会有下面的滚动条，所以不是最好的选择二、 div style=" overflow-y:auto; overflow-x:auto; width:400px; height:...400px;”>div> 记住宽和高一定要设置噢，否则不成的这样比较好的是，在宽和高不超出时，只是一条线三、说明直接为div指定overflow属性为auto即可，但是必须指定div的高度...，如下： div style="position:absolute; height:400px; overflow:auto"> div> 如果要出现水平滚动条，则： overflow-x:...auto 同理，垂直滚动条为： overflow-y:auto 如果该div被包含在其他对象例如td中，则位置可设为相对：position:relative 发布者：全栈程序员栈长，转载请注明出处：

6.1K2 0

JS 获取所有相同class的div，并遍历

Again，这个问题对于使用mvvm框架，例如vue，weex和angular 是任何难度的因为他们的dom都是直接用js生成控制的，在生成之初就直接处理好久好了。...但是对于普通的js来说，这就很麻烦了。

14K2 0

CSS div隐藏滚动条「建议收藏」

隐藏指定 div 或者滚动标签里面的滚动条。 Document /* 需要滚动条隐藏的列表...100px; overflow-x: hidden; overflow-y: auto; background-color: yellow; } /* 隐藏滚动条...*/ .list-view::-webkit-scrollbar { display: none; } /* 没有进行隐藏滚动条的列表 */ .list-view-no...div> div>1234567890div> div> 没有隐藏滚动条的列表： div class="list-view-no"> div>

3.1K2 0

Div滚动条定位设置「建议收藏」

1.div div id="DataDiv" style="overflow-x: hidden;overflow-y: scroll;max-height:500px;"> //数据 div>...2.通过JS去设置Div滚动条的位置 document.getElementById('DataDiv').scrollTop //Div滚动条的垂直位置设置属性 document.getElementById...('DataDiv').scrollLeft //Div滚动条的水平位置设置属性 3.通过JS获取Div滚动条的最大高度 document.getElementById('DataDiv').scrollHeight...//获取当前Div的最大高度上面就是Div滚动条的主要的属性。

2.9K4 0

内容高度小于窗口高度时版权 div 固定在底部

网站建设中经常遇到文档内容高度小于窗口高度时底部版权 div 固定在底部的问题，纯 css div 底部不太好解决这个问题，这里使用 js 代码来对检测文档高度和窗口高度来实现。...//js 代码调用方法说明：lrFixFooter("div.footerwarp"); 传入 div 固定底部的类名或者 ID 名在制作这个 js 的时候发现个 IE8 的 bug $(document...="description" content="网站建设中经常遇到文档内容高度小于窗口高度时底部版权始终在底部的问题，纯css不太好解决这个问题，这里使用js代码来对检测文档高度和窗口高度来实现" />...不太好解决这个问题，这里使用js代码来对检测文档高度和窗口高度来实现。...lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js"> $(function(){ lrFixFooter("div.footerwarp

2K3 0

div高度设置100%无效的问题

今天遇到一个问题，给div设置高度 height: 100%;却没有生效，在f12审查元素的时候可以看到高度字占据了半屏，并没有占据100%全屏，也就是说，div高度设置100%无效。 ?...记录一下解决办法: 找到div的父级元素，并且给父级元素手动设置一个高度，这个问题就解决了。...错误原因，根本在于没有浏览器是计算元素高度和宽度的原理： Web浏览器在计算有效宽度时会自动将页面内容平铺填满整个横向宽度。...但是浏览器根本就不计算内容的高度，当一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。

5.2K2 0

无固定高度的div垂直居中

1、无固定高度的div垂直居中 – CSS 实现效果图如下：代码附上： div style="position:relative;width:100%;height:450px;border:1px solid...#888">方法1 div class="modal"> div class="modal-header">弹出窗标题div>....modal类中的position: fixed;表示现对于body来居中的 div> div> div>...>1div> div>2div> div>3div> div>4div> div>5div> ----

3.1K4 0

css div高度设置100%如何生效！

div { width: 100%; /* 这是多余的 */ height: 100%; /* 这是无效的 */ background: url(bg.jpg); } 然后他发现这个...div>高度永远是 0，哪怕其父级塞满了内容也是如此。...例如，一个 div>元素里面有一张 vertical-align 为 bottom 同时高度为 192 像素的图片，此时，该div>高度就是 192 像素，假设此时插入一个子元素，高度设为 100%...例如，在下面这个例子中，父元素采用“最大宽度”，然后有一个 inline-block 子元素宽度 100%： div class="box"> 红色背景是父级 div> .box { display: inline-block; white-space: nowrap; background-color

5.8K0 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭