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来完成了.常见场景:当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到 ...
随机推荐
- 基于HAProxy+Keepalived高可用负载均衡web服务的搭建
一 原理简介 1.HAProxyHAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案.HAProxy特别适用于那些负载特大的web ...
- c# 未能加载文件或程序集
最近做项目时碰到这个问题了,goole.百度了半天,整理了以下几种可能: DLL文件名与加载时的DLL文件名不一致, DLL文件根本不存在,即出现丢失情况, 加载DLL路径错误,即DLL文件存在,但加 ...
- python各种推导式
字典推导式 例一:将一个字典的key和value对调 mcase = {, } mcase_frequency = {mcase[k]: k for k in mcase} print(mcase_f ...
- 使用Solrj 获取语句分词结果的代码
import java.util.ArrayList; import java.util.Iterator; import java.util.List; import org.apache.log4 ...
- angularjs中阻止事件冒泡,以及指令的注意点
appModule.directive('newStr',function(){ return{ restrict:'AE', //阻止事件冒泡需要加$event参数 template:`<di ...
- django 之admin使用
Admin注册 内容发布的部分由网站的管理员负责查看.添加.修改.删除数据,开发这些重复的功能是一件单调乏味.缺乏创造力的工作,为此,Django能够根据定义的模型类自动地生成管理模块. 1)准备工作 ...
- CPU Usage Sampling Profiles (cpu=samples)
HPROF工具通过对采样线程搜集CPU使用信息.以下是从运行的javac中样例输出的一部分. $ javac -J-agentlib:hprof=cpu=samples Hello.java CPU ...
- 2.HTML+CSS制作一闪一闪亮晶晶的星星(stars)
效果地址:https://codepen.io/flyingliao/pen/NJxbdB?editors=1100 HTML code: <div class="stars" ...
- ck
ck
- CDH 安装遇到的问题
CDH 遇到的问题 l JAVA_HOME问题 这里, 很明显可以看到, JAVA_HOME 并没有设置成功.using as ... 感觉完全就是没有设置JAVA_HOME 这个环境变量.可是呢 ...