纵向滚动条，clientHeight, offsetHeight

最新推荐文章于 2023-07-13 18:30:00 发布
最新推荐文章于 2023-07-13 18:30:00 发布
阅读量2.1k 收藏
点赞数 1
分类专栏： CSS 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Napoleonxxx/article/details/47403917
版权

最近遇到一个在Tab页面下Frame中控件过多，以至于页面上出现了两根根滚动条非常难看的问题。问题的关键是对于clientHeight, offsetHeight，offsetTop等概念的理解


问题很好解决，思路就是将将最外层的overflow: hidden，同时限定内层Frame的高度，这样的话只出现内层一根滚动条，同时不会影响控件的显示。之所以把这个问题记下来还是因为感觉自己前端意识还是差了些，在同事的提醒下才想到对于不同浏览器不同分辨率，限定的高度是需要计算的，并且我还不知道怎么计算。惭愧呀~~从后端转做前端的小弟是要多学习呀。


clientHeight与height的区别是如果有横向滚动条时应减去滚动条的不可用部分,offsetHeight与Height的区别是增加了boder的高度。

最后附一张抄来的图：






辰辰沉沉大辰沉
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS中clientHeight、scrollHeight和offsetHeight的大坑，滚动条抖动问题解决
郑伟斌的博客
04-09 2万+
JS中clientHeight、scrollHeight和offsetHeight的大坑，滚动条抖动问题解决1.什么是clientHeight、scrollHeight和offsetHeight1.1 clientHeight是什么1.2 offsetHeight是什么1.3 clientHeight和offsetHeight的注意点1.4 scrollHeight和它的大坑jQuery和原生js...
vue 横向菜单滚动定位_vue左右侧联动滚动的实现代码
weixin_39652760的博客
02-05 1270
本文介绍了vue左右侧联动滚动的实现代码，分享给大家，具体如下：实现功能:点击左侧,右侧滚动到相应位置,滚动右侧, 左侧滚动到相应位置布局结构:开源滚动库:better-scroll.js技术要点:1.是对紧邻的元素生效如:初始化在元素上2.foods-wrapper的高度小于content高度时才会发生滚动3.点击左侧菜单列表时,只需要计算右侧对应的偏移距离 或是 计算对应的移动到的元素即可方法...
CSS常用的属性offsetHeight、offsetTop、clientY、offsetY、scrollTOp、scrollHeight、clientWidth
最新发布
qq_47099087的博客
07-13 1698
结论：1、在content-box下：offsetWidth / offsetHeight = width / height + padding + border2、在border-box下：offsetWidth / offsetHeight = width / height。
纵向滚动条始终停留在最下方
coldg的专栏
02-09 478
// 滚动条显示在最下方 function sc() { var e=document.getElementById("msgBox"); if(e) e.scrollTop=e.scrollHeight; }  如图  
网页宽高clientWidth clientHeight获得数值不对的问题
weixin_30663391的博客
07-12 2976
当网页内容撑不满一屏时，通过以下代码获得整个网页高度会有问题 document.body.clientHeight;document.body.clientWidth;得到的宽高不对，可能是因为html与body标签缺一个样式：height:100%设置如下： html{ height: 100%; overflow: h...
js中clientHeight、offsetHeight、scrollHeight、scrollTop详解
PlayYoung的专栏
08-03 1116
clientHeight 大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。 offsetHeight IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。 NS、FF 认为 offsetH
html纵向滚动特效,JavaScript 滚动类特效常用属性 - scrollLeft等
weixin_30045597的博客
06-02 200
scrollLeft等属性介绍HTML5学堂：在平日中书写滚动类特效时，为了提升代码的扩展性，通常会使用变量替换掉常量，此时会经常用到scrollLeft、offsetWidth、clientWidth等属性，今天我们就一起走进这几个属性。刘国利 - 独行冰海：最近日子，虽然身体稍微好些，但是也是被压得喘不过气来。主要也是自找的，原计划针对9班进行本年度的第四次课程大调整(主要是彻底调整JS)。正...
js获取滚动条的位置
热门推荐
口袋的天空的博客
12-15 1万+
一.获取当前页面滚动条纵坐标的位置 document.body.scrollTop与document.documentElement.scrollTop IE6/7/8/IE9及以上： 可以使用 document.documentElement.scrollTop； Safari，Firefox:，Chrome： 可以使用 document.body.scrollTop; 二.js获取网页屏幕可视区域高度 document.body.clientWidth ==> BODY对象宽度 docume
DOM2非标准但却支持很好的几个属性小结
12-11
- `scrollTop`：设置或返回元素上方被隐藏内容的高度，即纵向滚动条的位置。同样，改变这个值可以实现元素内容的垂直滚动。 这些属性在进行页面布局、动态效果制作、滚动条管理、元素尺寸计算等任务时非常实用。...
原生JS实现鼠标拖动dom万向滚动
Loook_Mark的博客
06-15 518
原生JS实现HTML元素拖拽改变滚动条位置
移动端touch事件实现无缝滚动及下拉刷新
samfung09的博客
08-08 4952
pc端的鼠标事件写多了，但移动端没有鼠标，所以来写写移动端的touch事件。touch事件主要用到touchstart，touchmove，touchend三个事件，事件没什么好说的，做效果是最主要用到的是touch事件对象给我们提供的几个属性 touches 屏幕触点集合 targetTouches touch事件绑定元素身上的触点集合 changesTouches 发生...
BOM操作-1:innerWidth、innerHeight可视区宽度高度 / scroll滚动条 / open、close打开关闭 / alert等弹窗 / resize窗口大小改变
kino2046的博客
03-17 521
BOM (browers object model) 浏览器对象模型 BOM五大对象 -windowJS在浏览器中的顶层对象，var和function声明的全局函数都是挂载window的属性中 -navigator浏览器相关信息(浏览器型号、版本、系统版本、网络信息等) -location地址栏信息(hash、search、href) ...
js -- 获取浏览器高度以及clientHeight、scrollHeight、offsetHeight区别
bobobocai的博客
11-22 8930
//浏览器卷去部分高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //浏览器窗口高度，已做兼容 var winHeight; if (window.innerHeight) { winHeight = window.innerHeig
swiper 内容超出纵向滚动 解决办法
weixin_30535913的博客
06-23 455
.swiper-slide { overflow: auto; } var swiper = new Swiper('.swiper-container', { direction: 'vertical',autoHeight:true }); var startScroll, touchStart, touchCurrent; swipe...
margin: 0 auto 水平居中原理
辰辰沉沉大辰沉
07-14 6531
在 CSS 居中布局界，这可以说是一个烂梗了。但如果继续追问其原理，很多人就语焉不详了。**网络中很多文章有两个问题：描述不全面或者延伸太广，难以聚焦，时间一长容易遗忘**。 所以写这篇文章的目的是在收敛知识扩展面的同时又能抓住要点，就算时间久了也可以从要点出发把整个原理。
滚动条知识点之一： infinite scroll
辰辰沉沉大辰沉
12-26 5179
移动开发中infinite scroll的应用场景以及实现要点。
CSS方言之webkit私有属性
辰辰沉沉大辰沉
11-04 4558
webkit-box flex webkit-box text-align: center webkit-box -webkit-line-clamp other useful webkit css other unuseful webkit css: p { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1...
clientheight和offsetheight
06-28
`clientHeight` 和 `offsetHeight` 是 JavaScript 中的两个元素尺寸属性。...`clientHeight` 表示元素的内容高度，不包括边框、滚动条等。 `offsetHeight` 表示元素的高度，包括内容高度、边框高度、滚动条高度等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值