网站开发中使用javascript获取浏览器滚动条宽度
在网站开发中,有时候需要获取浏览器滚动条的宽度,在武汉蚂蹄软件服务中心的技术人员指导之下,我实现了该需求。记录如下:
首先说明一下原理:
①生成一个div,设置滚动条不可见,记录其宽度;
②将上面的div设置滚动条可见,在记录div宽度;
③取两次宽度的差值,即为滚动条的宽度。
使用jQuery简单实现如下:
function getScrollWidth() {
var $div = $("<div style='position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;'></div>");
$("body").append($div);
var noScroll = $div[0].clientWidth;
$div.css("overflow-y", "scroll");
var scroll = $div[0].clientWidth;
$div.remove();
return noScroll - scroll;
}

网站开发中使用javascript获取浏览器滚动条宽度的更多相关文章
- 网站开发中很实用的 HTML5 & jQuery 插件
这篇文章挑选了15款在网站开发中很实用的 HTML5 & jQuery 插件,如果你正在寻找能优化网站,使其更具创造力和视觉冲击,那么本文正是你需要的.这些优秀的 jQuery 插件能为你的网 ...
- JavaScript获取浏览器类型与版本
从网上找到一段使用JavaScript判断浏览器以及浏览器版本的比较好的代码,在此记录一下: <script type="text/javascript"> var S ...
- JavaScript获取浏览器版本等信息
** 不同浏览器版本可能存在差异,使用时请测试自己的环境 ** 测试时各个浏览器版本 IE: 11.953.14393.0 Edge: Microsoft Edge 38.14393.0.0;Micr ...
- JavaScript学习总结(十八)——JavaScript获取浏览器类型与版本
从网上找到一段使用JavaScript判断浏览器以及浏览器版本的比较好的代码,在此记录一下: 1 <script type="text/javascript"> 2 v ...
- 整合Spring.net到asp.net网站开发中初探
整合Spring.net到asp.net网站开发中初探 http://www.veryhuo.com 2009-10-21 烈火网 投递稿件 我有话说 Spring提供了一个轻量级的用于构建企业级 ...
- Javascript获取图片原始宽度和高度的方法详解
前言 网上关于利用Javascript获取图片原始宽度和高度的方法有很多,本文将再次给大家谈谈这个问题,或许会对一些人能有所帮助. 方法详解 页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能 ...
- JQuery或JavaScript获取网页的宽度、高等
最近多次使用JQery或JavaScript获取网页的宽度或者高度,在网上搜索N久之后发现很多都是粘贴上去并没有详细的介绍,这里我将会对经常使用的一些获取页面宽高的属性,方法做详细的介绍,以便能够更加 ...
- 网站开发中的相对URL问题--JSP
问题描述: 入门网站开发时,我们会在相对URL问题上有疑惑.例如,在一个jsp页面中引入css外部文件, <link rel="stylesheet" hr ...
- 使用JavaScript获取浏览器Chrome版本信息
Navigator对象包含了有关浏览器的信息 可通过访问其属性appVersion或userAgent来获取浏览器Chrome版本 例如,我所使用的QQ浏览器的appVersion和userAgent ...
随机推荐
- 基于VB中WINSOCK控件的网上象棋系统的实现
本文发表在<微型机与应用>杂志2001年第3期. 基于VB中WINSOCK控件的网上象棋系统的实现 马根峰1 , 孙艳2 , 王平1 (1.重庆邮电学院自动化学院,重庆,40006 ...
- [查阅]Dalvik opcodes
Dalvik opcodes Dalvik opcodes Author: Gabor Paller Vx values in the table denote a Dalvik register. ...
- C++链表模板类
思想和上篇文章差不多,只是换了层包装. 直接上代码: // linklist.h #include <iostream> #include <cstdio> using nam ...
- UML之协作图
面向对象动态建模,用于建立行为的实体间行为交互的四种图,状态图(Stage Diagram),时序图(Sequence Diagram),活动图(Activity Diagram)前面的博客中,我们已 ...
- TCP的核心系列 — SACK和DSACK的实现(三)
不论是18版,还是37版,一开始都会从TCP的控制块中取出SACK选项的起始地址. SACK选项的起始地址是保存在tcp_skb_cb结构的sacked项中的,那么这是在什么时候做的呢? SACK块并 ...
- Myexclipse创建Junit测试
. 下载JUnit的jar文件,下载地址在这里 2. 在MyEclipse中新建一个要测试的项目HelloJUnit 3. 添加一个要测试的类HelloJUnit,代码如下,注意需要先建package ...
- Apache Hadoop 2.0.2-alpha
原文出处http://hadoop.apache.org/docs/r2.0.2-alpha/hadoop-yarn/hadoop-yarn-site/Federation.html HDFSF分为2 ...
- SQLite数据库中多线程使用问题
由于项目是接手之前的烂尾项目,经常被吐槽说界面卡半天,后来发现项目里的网络请求,数据库操作都是在主线程.将一些长时间的操作换到多线程或者异步之后后,用户交互是变的顺畅多了,可是经常出现莫名其妙的闪退, ...
- 真机测试遇到0xE8008016错误修改方法
错误描述 真机测试过程中,更换Provisioning Profile之后,出现错误:The entitlements specified in your application's Code Sig ...
- Unity PUN插件多人在线同步角色坐标旋转角度和动作
用PUN插件的话,就在OnJoinedRoom()回调函数里,表示加入房间,可以实例化角色,GameObject go=PhotonNetwork.Instantiate(prefabPlayer.n ...