JS计算滚动条的宽度
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计算滚动条的宽度的更多相关文章
- js利用offsetWidth和clientWidth来计算滚动条的宽度
原文: http://www.haorooms.com/post/js_scroll_width 参考: https://www.cnblogs.com/benxiaohai-microcosm/p/ ...
- 计算滚动条的宽度--js
原理 创建两个div嵌套在一起 外层的div设置固定宽度和overflow:scroll 滚动条的宽度=外层div的offsetWidth-内层div的offsetWidth 实现代码 /** * 获 ...
- js获取滚动条的宽度
function getScrollWidth() { var noScroll, scroll, oDiv = document.createElement("DIV"); oD ...
- pc浏览器css和js计算浏览器宽度的差异以及和滚动条的关系
如图: css宽度:1250 不包括滚动条宽度 用控制台箭头选取元素显示的左边的宽度:1250 不包含滚动条宽度 缩放浏览器右上角显示的宽度:1267 包含了滚动条宽度 再看下控制台: 由此可计算浏 ...
- JS模拟滚动条(有demo和源码下载,支持拖动 滚轮 点击事件)
由于游览器自带的滚动条在美观方面并不是很好看,所以很多设计师希望通过自己设计出来的滚动条来做这样的效果,JS模拟滚动条其实很早看到jQuery有这样的插件或者KISSY有这样的组件,一直想着自己什么时 ...
- js网页滚动条滚动事件实例分析
本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...
- jquery、js获取页面高度宽度等
jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...
- 自动化测试基础篇--Selenium中JS处理滚动条
摘自https://www.cnblogs.com/sanzangTst/p/7692285.html 前言 什么是JS? JS就是JavaScript: JavaScript 是世界上最流行的脚本语 ...
- 2.21 JS处理滚动条
2.21 JS处理滚动条 前言 selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了.常见场景:当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到 ...
随机推荐
- centos7 安装后静态ip的配置
centos7 想到于centos6.5来说界面上看起来更加炫一点,但是在配置静态ip上来说是差不多的 首先看一下centos7的安装界面,相对来说简洁好看一些 先打开终端 可以看到centos7默认 ...
- Element-UI安装和项目开发
方法一:引入CDN 使用起来最简单的方法,直接引入CDN就可以工作了 <!-- 引入样式 --> <link rel="stylesheet" hre ...
- LeetCode 4. Median of Two Sorted Arrays & 归并排序
Median of Two Sorted Arrays 搜索时间复杂度的时候,看到归并排序比较适合这个题目.中位数直接取即可,所以重点是排序. 再来看看治阶段,我们需要将两个已经有序的子序列合并成一个 ...
- 使用SQL SERVER PIVOT实现行列转置
一般我们在使用SQL语句实现行列转置时候,最常用的方法无外乎就是 case语句来实现,但是如果需要需要转置的列太多,那么case起来语句就无限庞大,十分不方便,sql server中的PIVOT就可以 ...
- 【每日一学】pandas_透视表函数&交叉表函数
每日一悟 [分开工作内外8小时] 前一个月,我经常把工作内的问题带到路上.地铁上.睡觉前,甚至是周末. 然而很快发现,我工作外的成就几乎没有,而工作内的进展也并不理想. 仔细想想,工作外是需要学新东西 ...
- 31.网站数据监控-2(scrapy文件下载)
温州数据采集 这里采集网站数据是下载pdf:http://wzszjw.wenzhou.gov.cn/col/col1357901/index.html(涉及的问题就是scrapy 文件的下载设置,之 ...
- add_polygon_to_map
var poly = new esri.geometry.Polygon({ "rings": [ [[117.008726, 30.931672], [117.009635, 3 ...
- Dubbo的学习
Dubbo是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和 Spring框架无缝集成. Dubbo是一款高性能.轻量级的开源Java RP ...
- elcipse 安装lombok插件解决 @Slf4j 等找不到log变量问题
参考:http://blog.51cto.com/4925054/2127840 <dependency> <groupId>org.projectlombok</gro ...
- leetcode1003
class Solution: def isValid(self, S: str) -> bool: n = len(S) if n % 3 != 0: return False while n ...