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. Install Greenplum OSS on Ubuntu

    About Greenplum Database Greenplum Database is an MPP SQL Database based on PostgreSQL.  Its used in ...

  2. Windows 2016 无域故障转移群集部署方法 超详细图文教程 (一)

    故障转移群集是一个很实用的功能,而windows在2016版本开始,终于支持不用域做故障转移群集. 在群集中,我们可以设定一个"群集IP" 而客户端只需要根据这个"群集I ...

  3. 用最通俗的话解释AJAX是什么东西

    直白地说,就是没用AJAX的网页,你点一个按钮就要刷新一下页面,尽管新页面上只有一行字和当前页面不一样,但你还是要无聊地等待页面刷新. 用了AJAX之后,你点击,然后页面上的一行字就变化了,页面本身不 ...

  4. JSP:注册&登录

    数据库:Mysql 除了_id自动增长,其余全是varchar 注册:register.jsp <%@ page language="java" import="j ...

  5. windows模拟linux部分功能

    --------------------------------------------分割线----------------------------------------------- 系统 wi ...

  6. Shell流程控制(if,else,case,while,for,until)

    1.条件选择 1.1.if 语句 语法十分简单 #!/bin/bash MATH_SCORES="$1" NAME="$2" if [ -z "${M ...

  7. angularjs数据交互

    异步问题ajax异步请求数据完数据后给$scope赋值的时候需要检查$scope的数据更新没有.要不然无法绑定数据. <!DOCTYPE html> <html ng-app=&qu ...

  8. python-html-百度云音视频点播服务

    加密的视频: 一:python后端需要生成token token计算规则 名词解释: userId: 百度云用户唯一标识,可在百度云管理控制台账号基本信息中得到,32位字符串. userKey:用户密 ...

  9. 《算法》第四章部分程序 part 14

    ▶ 书中第四章部分程序,包括在加上自己补充的代码,两种 Prim 算法求最小生成树 ● 简单 Prim 算法求最小生成树 package package01; import edu.princeton ...

  10. 《算法》第四章部分程序 part 10

    ▶ 书中第四章部分程序,包括在加上自己补充的代码,包括无向图连通分量,Kosaraju - Sharir 算法.Tarjan 算法.Gabow 算法计算有向图的强连通分量 ● 无向图连通分量 pack ...