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. 《linux性能及调优指南》 3.4 硬盘瓶颈

    翻译:Hank (http://blog.csdn.net/fireroll)版权所有,尊重他人劳动成果,转载时请注明作者和原始出处及本声明.原文名称:<Linux Performance an ...

  2. CF235C Cyclical Quest(SAM)

    /* 统计串的出现次数显然可以在自动机上匹配出来即可 但是每次都挨个匹配的话会时间爆炸 那么考虑我们把串复制一份, 然后一起在后缀自动机上跑, 当我们匹配长度大于该串长度的时候强行失配即可 可能会有旋 ...

  3. Java调用Jenkins接口实现远程发版

    主要有以下几个要点: 1.在 Manage Jenkins 中设置Configure Global Security(主要是设置CSRF Protection中的prevent cross site ...

  4. python - requests从excel中获取测试用例数据

    HttpRequests.py #-*- coding:utf-8 -*- import requests class HttpRequests(): def http_requests(self,u ...

  5. 零基础学习python_with(34课)

    今天学习的with语句,with的表达形式如下:据说context必须是上下文管理器,这我就懵比了,啥玩意啊... with语句的表达形式: with context as var:    block ...

  6. JDK源码阅读顺序

      很多java开发的小伙伴都会阅读jdk源码,然而确不知道应该从哪读起.以下为小编整理的通常所需阅读的源码范围. 标题为包名,后面序号为优先级1-4,优先级递减 1.java.lang 1) Obj ...

  7. C#找出第n到m个素数之间所有之和

    static void Main(string[] args) { int n = int.Parse(Console.ReadLine()); //开始的数 int m = int.Parse(Co ...

  8. win7 数据源只有 SQL SERVER, WIN7 64bit 环境使用 access 作为 CIS的数据源

    最近换了个工作电脑,安装的是 WIN7 64BIT,结果配置CIS数据源的时候出现问题了,默认的数据源只有 SQL SERVER,没有ACCESS的数据源.后来在网上寻找了一圈后,找到了解决方法: C ...

  9. 17.纯 CSS 创作炫酷的同心矩形旋转动画

    原文地址:https://segmentfault.com/a/1190000014807564 感想: 这个特效不难,但是这想法可能想不到,哈哈,怎么又废了. HTML代码: <div cla ...

  10. python学习笔记_week11

    一.RabbitMQ python的queue(生产者消费者模型)分为线程queue(不能跨进程)和进程queue(父进程与子进程进行交互或者同属于同一父进程下多个子进程进行交互),那两个独立的进程间 ...