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. (转)WebApi返回Json格式字符串

    原文地址:https://www.cnblogs.com/elvinle/p/6252065.html WebApi返回json格式字符串, 在网上能找到好几种方法, 其中有三种普遍的方法, 但是感觉 ...

  2. jQuery对象的操作

    参考一篇不错的文章:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object 1. ...

  3. nodejs(log4js)服务中应用splunk进行Log存储、搜索、分析、监控、警告

    标题党,等博主这个月的知识库上传之后再来更新博文

  4. 如何通过权限控制EXP导出指定的表

    今天一客户朋友咨询一个Oracle数据库用户EXP权限控制的问题,问我有没有办法可以解决.问题是这样的: 目前他们那边有外面的开发公司人员在核心系统做开发,考虑到系统数据的敏感性,给他们建了一个数据库 ...

  5. 20165205 2017-2018-2 《Java程序设计》第八周学习总结

    20165205 2017-2018-2 <Java程序设计>第八周学习总结 教材学习内容总结 进程与线程 线程不是进程,但其行为很像进程,线程是比进程更小的执行单位. 与进程不同,线程的 ...

  6. CMake实践--操作

    ---<Cmake 实践>--- ---Ubuntu 14.04 1.创建一个cmake文件目录 mkdir -p ~/cmake 2.在cmake文件下创建t1子目录 cd ~/cmak ...

  7. [Android] 使用ViewPager 实现导航

    转载请标注:转载于http://www.cnblogs.com/Liuyt-61/p/6582667.html -------------------------------------------- ...

  8. spring 之 factory-bean & factory-method

    这两者常常是一起出现的,或者说他们经常是一起被使用的.但是其实是分为了两种情况: 1 同时使用factory-bean 和 factory-method 如果,我们在一个bean 元素上同时配置 fa ...

  9. <转载> js 闭包

    http://www.haorooms.com/post/js_bbtwo http://www.jb51.net/article/24101.htm http://www.cnblogs.com/f ...

  10. 40. 数据泵导入导出impdp、expdp

    一.查看管理理员目录(同时查看操作系统是否存在,因为Oracle并不关心该目录是否存在,如果不存在,则出错)select * from dba_directories; 二.创建逻辑目录,该命令不会在 ...