js利用offsetWidth和clientWidth来计算滚动条的宽度
大家好,清明节即将来来临,清明时节雨纷纷,路上行人欲断魂,借问酒家何处有,牧童遥指杏花村!!哈哈哈哈!言归正传,今天我主要介绍一个计算滚动条宽度的例子。
前言
其实,很多情况下滚动条宽度是不用计算的,特别是谷歌浏览器,可以对滚动条进行美化,具体请看CSS选中状态修改,谷歌滚动轴修改 这里例子,已经定义了滚动条的宽度是9px加上padding-left的一个像素,所以滚动条的宽度应该是10px,但是,这样计算出来有浏览器兼容问题,你的IE浏览器的滚动条宽度不一定是10px,今天,我用offsetWidth和clientWidth来计算一下滚动条的宽度。
占位方式
在PC浏览器中,滚动条是占位元素的内边距和内容区域的;而在移动浏览器中,滚动条是不占用内边距和内容区域,并且还及时显隐。因此,只需要在在PC浏览器中计算滚动条的宽度,尤其是在全屏弹窗不可滚动的情况中。
offsetWidth-clientWidth方法
说到offsetWidth和clientWidth,不少朋友迷茫了,这个宽度是什么意思呢?jquery的height()和javascript的height总结,js获取屏幕高度 这篇文章洪有关javascript的各种高度,介绍了offsetWidth和clientWidth等等的意思,大家可以看看!!
function getScrollbarWidth() {var oP = document.createElement('p'),styles = {width: '100px',height: '100px',overflowY: 'scroll'}, i, scrollbarWidth;for (i in styles) oP.style[i] = styles[i];document.body.appendChild(oP);scrollbarWidth = oP.offsetWidth - oP.clientWidth;oP.remove();return scrollbarWidth;
}
使用
console.dir(getScrollbarWidth());
就可以输出滚动条的宽度了,大家可以试一试啊!
clientWidth-clientWidth方法
这个方法和上面的方法差不多!
function getScrollbarWidth() {var oP = document.createElement('p'),styles = {width: '100px',height: '100px'}, i, clientWidth1, clientWidth2, scrollbarWidth;for (i in styles) oP.style[i] = styles[i];document.body.appendChild(oP);clientWidth1 = oP.clientWidth;oP.style.overflowY = 'scroll';clientWidth2 = oP.clientWidth;scrollbarWidth = clientWidth1 - clientWidth2;oP.remove();return scrollbarWidth;
}
使用方法一样!
console.dir(getScrollbarWidth());
只是介绍了一个计算滚动条的方法,大家在用到的时候可以参考一下,希望对各位小主有帮助!
js利用offsetWidth和clientWidth来计算滚动条的宽度相关推荐
- 计算滚动条的宽度--js
原理 创建两个div嵌套在一起 外层的div设置固定宽度和overflow:scroll 滚动条的宽度=外层div的offsetWidth-内层div的offsetWidth 实现代码 /*** 获取 ...
- 用js计算滚动条宽度
用js计算滚动条的宽度 function getScrollbarWidth() {const outer = document.createElement('div')const inner = d ...
- JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth
常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.b ...
- 元素尺寸总结(offsetWidth,clientWidth,scrollWidth)
最近自己实现了一个瀑布流的插件,里面需要获取元素相关的尺寸,所以趁此想总结一下元素尺寸相关的内容. 本文大纲: 1.偏移尺寸(offset) offset:偏移 offsetLeft.offsetTo ...
- javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
关于js中的offsetWidth.clientWidth.scrollWidth等一系列属性及其方法一直都傻傻分不清,这里就来总结一下这些方法的用法和含义. 注意: 下面元素属性和元素方法都通过 e ...
- 再谈 document.documentElement 与 document.body 的 scrollWidth、offsetWidth、clientWidth
(scrollHeight.offsetHeight.clientHeight 同样可按本文去理解.) 这是一个很复杂的问题,让我们想像一下: document.documentElement.scr ...
- js offsetHeight offsetWidth 解说
uusee下载,uusee2012pptv下载usee播放器精美图片中国无线论坛电脑知识与技术vagaa哇嘎电影,vagaa哇嘎电影下载sou狗麦克疯破解版uusee网络电视2011pipi 下载uu ...
- offsetWidth与clientWidth的区别
目录 1.offset(元素偏移量) 2.client(元素可视区) 3.scroll (元素滚动) 1.offset(元素偏移量) offsetTop与offsetLeft是元素本身相对于父元素的偏 ...
- offsetWidth、clientWidth、scrollWidth三者的区别
client可视区 client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息.通过client系列的相关属性可以动态的得到该元素的边框大小.元素大小等. offse ...
最新文章
- 我们单位里新来的应届毕业生(转贴)
- Yoshua Bengio首次中国演讲:深度学习通往人类水平AI的挑战
- 移动APP接口遇到的一些小问题
- 漂亮的个人团队介绍网页模板
- 扎根中国VMware正式启用中文名称
- linux 多线程并行计算,Linux下使用POSIX Thread作多核多线程并行计算
- 微软将于今年秋天停用Azure区块链服务
- Spring项目启动后报连接MYSQL错误两则
- POJ 3687 逆序拓扑
- .Net MVC中SelectList绑定默认值失效的解决办法
- [LeetCode]Ugly Number
- 中文科技核心期刊目录 计算机,中国科技核心期刊目录(2019版)”(“中国科技论文统计源期刊”)...
- 电子签章引入jar包
- 计算机原材料费,计算机基础考试原材料
- 中国银行基金代销一览表
- AV1编解码器的编译使用
- ui设计学习路线图分享送给初学者
- npx mrm lint-staged 报错
- 基于Jquery实现登录功能的前端页面
- android平板ps,移动端和平板上的Photoshop Touch(支持iOS和Android)
热门文章
- sqlserver跟踪数据库_说说被遗忘的数据库开发职业 - 数据库测试
- html文档本质是一个什么文件,html文件是什么
- mysql sql%rowcount_SQL%ROWCOUNT
- 通过JMS监听Oracle AQ,在数据苦表变化时触发并执行Java程序
- wxWidgets:wxTreebook类的使用详解
- 计算机兴趣小组活动总结,电脑兴趣小组活动总结
- Java bho插件,javascript-使用IE插件浏览器帮助器对象(BHO)访...
- 大数据安全: Hadoop安全模型的演进
- 中电金信:从“数字中国”看金融新基建的应变之道
- 30行代码实现朋友圈自动点赞