js利用offsetWidth和clientWidth来计算滚动条的宽度
原文: http://www.haorooms.com/post/js_scroll_width
参考: https://www.cnblogs.com/benxiaohai-microcosm/p/7814825.html
-------------------------------------------------------------------------------------
大家好,十一小长假结束了。。相信大家玩的都很开心,还没有尽兴!好多网友期盼祖国母亲再过一次农历生日呢!!!哈哈哈哈!言归正传,今天我主要介绍一个计算滚动条宽度的例子。
前言
其实,很多情况下滚动条宽度是不用计算的,特别是谷歌浏览器,可以对滚动条进行美化,具体请看http://www.haorooms.com/post/CSS_selections 这里例子,已经定义了滚动条的宽度是9px加上padding-left的一个像素,所以滚动条的宽度应该是10px,但是,这样计算出来有浏览器兼容问题,你的IE浏览器的滚动条宽度不一定是10px,今天,我用offsetWidth和clientWidth来计算一下滚动条的宽度。
占位方式
在PC浏览器中,滚动条是占位元素的内边距和内容区域的;而在移动浏览器中,滚动条是不占用内边距和内容区域,并且还及时显隐。因此,只需要在在PC浏览器中计算滚动条的宽度,尤其是在全屏弹窗不可滚动的情况中。
offsetWidth-clientWidth方法
说到offsetWidth和clientWidth,不少朋友迷茫了,这个宽度是什么意思呢?http://www.haorooms.com/post/js_jquery_height 这篇文章洪有关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计算滚动条的宽度
1.此方法检验成功 function getScrollbarWidth() { var oP = document.createElement('p'), styles = { width: '10 ...
- 计算滚动条的宽度--js
原理 创建两个div嵌套在一起 外层的div设置固定宽度和overflow:scroll 滚动条的宽度=外层div的offsetWidth-内层div的offsetWidth 实现代码 /** * 获 ...
- js利用select标签生成简易计算功能
html中使用select option作为运算符的承接容器,输入值,选择不同运算符,计算结果. 文章地址 https://www.cnblogs.com/sandraryan/ <!DOCTY ...
- JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth
常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((docume ...
- offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js的offsetWidth,clientWidth
js元素的offsetWidth与clientWidth很相似,因此放在一起记录. clientWidth与offsetWidth clientWidth=元素内容区域宽度+水平内边距padding. ...
- JS 之 offsetWidth\offsetleft
- 使用 js,自己写一个简单的滚动条
当我们给元素加上 overflow: auto; 的时候,就会出现滚动条,然而浏览的不同,滚动条的样式大不一样,有些甚至非常丑. 于是就想着自己写一个滚动条,大概需要弄清楚一下这几个点: 1.滚动条 ...
- js中各种距离clientWidth
1: offsetLeft.offsetTop.offsetHeight.offsetWidth 1.1 偏移参照——定位父级offsetParent offsetParent的定义是:与当前元素 ...
随机推荐
- 栈的push、pop序列 【微软面试100题 第二十九题】
题目要求: 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1.2.3.4.5是某栈的压栈序列,序列4.5.3.2.1是该压栈 ...
- python - 接口自动化测试 - ReadExcel - 读取测试数据封装
# -*- coding:utf-8 -*- ''' @project: ApiAutoTest @author: Jimmy @file: read_excel.py @ide: PyCharm C ...
- python学习--Django mvc框架简介
让我们一览 Django 全貌 urls.py 网址入口,关联到对应的views.py中的一个函数(或者generic类),访问网址就对应一个函数. views.py 处理用户发出的请求,从urls. ...
- 爬虫Scrapy框架-Crawlspider链接提取器与规则解析器
Crawlspider 一:Crawlspider简介 CrawlSpider其实是Spider的一个子类,除了继承到Spider的特性和功能外,还派生除了其自己独有的更加强大的特性和功能.其中最显著 ...
- hihoCoder挑战赛29
多打打不同的比赛,找经验啊 题目4 : 不上升序列 时间限制:40000ms 单点时限:2000ms 内存限制:256MB 描述 给定一个长度为 n 的非负整数序列 a[1..n]. 你每次可以花费 ...
- ACM程序设计选修课——1058: Lucky Sequence(思考)
1058: Lucky Sequence Time Limit: 10 Sec Memory Limit: 64 MB Submit: 52 Solved: 6 [Submit][Status][ ...
- [OJ#63]树句节够提
[OJ#63]树句节够提 试题描述 给定一棵节点数为 N 的有根树,其中 1 号点是根节点,除此之外第 i 个节点的父亲为 fi.每个节点有一个权值 Ai,所有边权均为 1. 给定 Q 个询问,每个询 ...
- pip安装 Tensorflow 安装包
最简单的 Tensorflow 的安装方法是在 pip 一键式安装官方预编译好的包 pip install tensorflow通常这种预编译的包的编译参数选择是为了最大兼容性而不是为了最优性能,导致 ...
- js对象的扁平化与反扁平化
Object.flatten = function(obj){ var result = {}; function recurse(src, prop) { var toString = Object ...
- 北京集训TEST12——PA( Mortal Kombat)
题目: Description 有一天,有N个外星人企图入侵地球.地球派出全球战斗力最强的M个人代表人类对抗外星人.根据外星的战斗规则,每个外星人应该分别与一名地球人对战(不同的外星人要与不同的地球人 ...