1、此方法检验成功

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.parentNode.removeChild(oP);
return scrollbarWidth;
}

2、和一原理差不多。

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.parentNode.removeChild(oP);
return scrollbarWidth;
}

JS计算滚动条的宽度的更多相关文章

  1. js利用offsetWidth和clientWidth来计算滚动条的宽度

    原文: http://www.haorooms.com/post/js_scroll_width 参考: https://www.cnblogs.com/benxiaohai-microcosm/p/ ...

  2. 计算滚动条的宽度--js

    原理 创建两个div嵌套在一起 外层的div设置固定宽度和overflow:scroll 滚动条的宽度=外层div的offsetWidth-内层div的offsetWidth 实现代码 /** * 获 ...

  3. js获取滚动条的宽度

    function getScrollWidth() { var noScroll, scroll, oDiv = document.createElement("DIV"); oD ...

  4. pc浏览器css和js计算浏览器宽度的差异以及和滚动条的关系

    如图: css宽度:1250 不包括滚动条宽度 用控制台箭头选取元素显示的左边的宽度:1250  不包含滚动条宽度 缩放浏览器右上角显示的宽度:1267 包含了滚动条宽度 再看下控制台: 由此可计算浏 ...

  5. JS模拟滚动条(有demo和源码下载,支持拖动 滚轮 点击事件)

    由于游览器自带的滚动条在美观方面并不是很好看,所以很多设计师希望通过自己设计出来的滚动条来做这样的效果,JS模拟滚动条其实很早看到jQuery有这样的插件或者KISSY有这样的组件,一直想着自己什么时 ...

  6. js网页滚动条滚动事件实例分析

    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...

  7. jquery、js获取页面高度宽度等

    jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...

  8. 自动化测试基础篇--Selenium中JS处理滚动条

    摘自https://www.cnblogs.com/sanzangTst/p/7692285.html 前言 什么是JS? JS就是JavaScript: JavaScript 是世界上最流行的脚本语 ...

  9. 2.21 JS处理滚动条

    2.21 JS处理滚动条 前言    selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了.常见场景:当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到 ...

随机推荐

  1. CentOS 关闭图形用户界面

    1 centos 7以下版本 vim /etc/inittab :initdefault: #改为 :initdefault: 2. centos 7.x版本 rm -f /etc/systemd/s ...

  2. rsync+inotfiy文件同步

    rsync+inotfiy文件同步 1.部署rsync服务 yum install rsync #安装rsync,如果嫌yum版本过低也可以源码安装 2.vim /etc/rsyncd.conf #默 ...

  3. RecyclerView添加条目点击事件setOnItemClickListener,不是在Adapter中设置;

    RecyclerView不像ListView,可以直接写setOnItemClickListener,我们大部分都是在Adapter中的设置点击事件,这个是使用RecyclerView的addOnIt ...

  4. python import问题

    python中包:一个文件夹中必须要有__init__.py文件,才能被识别为 包,才能被其他模块引入python中 模块的查找顺序是:内存中已经加载的模块->内置模块->sys.path ...

  5. angularjs中ng-repeat插入图片

    <tr ng-repeat="item in datas" ng-module="datas"> <td> <img class ...

  6. 【死磕 Spring】—— IoC 之加载 BeanDefinition

    本文主要基于 Spring 5.0.6.RELEASE 摘要: 原创出处 http://cmsblogs.com/?p=2658 「小明哥」,谢谢! 作为「小明哥」的忠实读者,「老艿艿」略作修改,记录 ...

  7. 安全测试6_Web安全工具第三节(Web安全工具)

    之前学习了下安全工具前的一些基础知识,今天来学习下安全工具,这些工具是python写的. 1.敏感文件探测入门: 敏感文件探测的原理如下: 一般探测敏感文件我们都是借助工具扫描,这里我给大家推荐一个简 ...

  8. position:absolute溢出处理

    今天在做布局的时候发现把table设置了position:absolute后 overflow居然不管用了,溢出的部分依然溢出. 百度后,才想起来... ... position后,元素已经和父元素不 ...

  9. 数据库设计和ER模型-------之ER模型的基本概念(第二章)

    ER模型(实体联系模型)的基本元素 实体:是一个数据对象,在ER模型中,实体用方框表示,方框内注明实体的名称 联系:表示一个或多个实体之间的关联关系,联系用菱形框表示,并用线段将其与相关的实体联系起来 ...

  10. 初窥GPFS文件系统(转)

    原文地址:http://blog.csdn.net/jznsmail/article/details/5502840?reload 本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 未本地化 ...