在网站开发中,有时候需要获取浏览器滚动条的宽度,在武汉蚂蹄软件服务中心的技术人员指导之下,我实现了该需求。记录如下:

  首先说明一下原理:

  ①生成一个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获取浏览器滚动条宽度的更多相关文章

  1. 网站开发中很实用的 HTML5 & jQuery 插件

    这篇文章挑选了15款在网站开发中很实用的 HTML5 & jQuery 插件,如果你正在寻找能优化网站,使其更具创造力和视觉冲击,那么本文正是你需要的.这些优秀的 jQuery 插件能为你的网 ...

  2. JavaScript获取浏览器类型与版本

    从网上找到一段使用JavaScript判断浏览器以及浏览器版本的比较好的代码,在此记录一下: <script type="text/javascript"> var S ...

  3. JavaScript获取浏览器版本等信息

    ** 不同浏览器版本可能存在差异,使用时请测试自己的环境 ** 测试时各个浏览器版本 IE: 11.953.14393.0 Edge: Microsoft Edge 38.14393.0.0;Micr ...

  4. JavaScript学习总结(十八)——JavaScript获取浏览器类型与版本

    从网上找到一段使用JavaScript判断浏览器以及浏览器版本的比较好的代码,在此记录一下: 1 <script type="text/javascript"> 2 v ...

  5. 整合Spring.net到asp.net网站开发中初探

    整合Spring.net到asp.net网站开发中初探 http://www.veryhuo.com 2009-10-21 烈火网 投递稿件 我有话说   Spring提供了一个轻量级的用于构建企业级 ...

  6. Javascript获取图片原始宽度和高度的方法详解

    前言 网上关于利用Javascript获取图片原始宽度和高度的方法有很多,本文将再次给大家谈谈这个问题,或许会对一些人能有所帮助. 方法详解 页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能 ...

  7. JQuery或JavaScript获取网页的宽度、高等

    最近多次使用JQery或JavaScript获取网页的宽度或者高度,在网上搜索N久之后发现很多都是粘贴上去并没有详细的介绍,这里我将会对经常使用的一些获取页面宽高的属性,方法做详细的介绍,以便能够更加 ...

  8. 网站开发中的相对URL问题--JSP

    问题描述: 入门网站开发时,我们会在相对URL问题上有疑惑.例如,在一个jsp页面中引入css外部文件, <link rel="stylesheet"          hr ...

  9. 使用JavaScript获取浏览器Chrome版本信息

    Navigator对象包含了有关浏览器的信息 可通过访问其属性appVersion或userAgent来获取浏览器Chrome版本 例如,我所使用的QQ浏览器的appVersion和userAgent ...

随机推荐

  1. JAVA之旅(五)——this,static,关键字,main函数,封装工具类,生成javadoc说明书,静态代码块

    JAVA之旅(五)--this,static,关键字,main函数,封装工具类,生成javadoc说明书,静态代码块 周末收获颇多,继续学习 一.this关键字 用于区分局部变量和成员变量同名的情况 ...

  2. Android 免Root实现Apk静默安装,覆盖兼容市场主流的98%的机型

    地址:http://blog.csdn.net/sk719887916/article/details/46746991 作者: skay 最近在做apk自我静默更新,在获取内置情况下,或者已root ...

  3. 【算法导论】图的深度优先搜索遍历(DFS)

    关于图的存储在上一篇文章中已经讲述,在这里不在赘述.下面我们介绍图的深度优先搜索遍历(DFS). 深度优先搜索遍历实在访问了顶点vi后,访问vi的一个邻接点vj:访问vj之后,又访问vj的一个邻接点, ...

  4. Web应用程序设计十个建议

    原文链接:  Top 10 Design Tips for Web Apps 原文日期: 2014年04月02日 翻译日期: 2014年04月11日 翻译人员: 铁锚 现代web应用通常在互联网上通过 ...

  5. Struts2技术内幕 读书笔记三 表示层的困惑

    表示层能有什么疑惑?很简单,我们暂时忘记所有的框架,就写一个注册的servlet来看看. index.jsp <form id="form1" name="form ...

  6. 将html5项目部署到tomcat上,并实现安卓手机访问

    最近在使用Webstorm开发项目中前端相关的内容,但是涉及到使用ajax技术,不能够跨域访问相关json文件和服务,需要将前端代码部署到tomcat服务器上.但是,如果通过手动拷贝的方式,太过于复杂 ...

  7. multiset基础学习,可以有重复类型的多重集合容器

    #include <set> #include <iostream> using namespace std; struct Student { char *name; int ...

  8. C#基础随手笔记之基础操作优化

    对数据的查询,删除等基本操作是任何编程语言都会涉及到的基础,因此,研究了一下C#中比较常用的数据操作类型,并顺手做个笔记. List查询时,若是处理比较大的数据则使用HashSet<T>类 ...

  9. CoolBlog开发笔记第5课:请求与响应

    教程目录 1.1 CoolBlog开发笔记第1课:项目分析 1.2 CoolBlog开发笔记第2课:搭建开发环境 1.3 CoolBlog开发笔记第3课:创建Django应用 1.4 CoolBlog ...

  10. R实战 第七篇:绘图文本表

    文本表是显示数据的重要图形,一个文本表按照区域划分为:列标题,行标题,数据区,美学特征有:前景样式.背景央视.字体.网格线等. 一,使用ggtexttable绘图文本表 载入ggpubr包,可以使用g ...