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

  首先说明一下原理:

  ①生成一个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. 数据结构基础(2) --顺序查找 & 二分查找

    顺序查找 适用范围: 没有进行排序的数据序列 缺点: 速度非常慢, 效率为O(N) //实现 template <typename Type> Type *sequenceSearch(T ...

  2. Useful Articles for the Oracle E-Business Suite Technology Stack for Technical Consultant / DBA [ID

    Applies to:  Oracle Applications Technology Stack - Version: 11.5.10.2 to 12.1.3 - Release: 11.5.10 ...

  3. 反对抄袭 正解spring的@Autowired 不要相信网上的错误版本

    首先,最重要的, @Autowired的就是用来来消除 set ,get方法. 有些介绍,如著名的马士兵,说要在set方法上进行注入.我当时就看不明白了,既然只取消了一个GET,这个@Autowire ...

  4. 安卓笔记-- ListView点击和长按监听

    其中点击监听为setOnItemClickListener() 具体实现代码如下 listView.setOnItemClickListener(new AdapterView.OnItemClick ...

  5. CoordinatorLayout

    CoordinatorLayout作为"super-powered FrameLayout"基本实现两个功能:  1.作为顶层布局  2.调度协调子布局 CoordinatorLa ...

  6. lpad函数

    函数介绍 lpad函数是Oracle数据库函数,lpad函数从左边对字符串使用指定的字符进行填充.从其字面意思也可以理解,l是left的简写,pad是填充的意思,所以lpad就是从左边填充的意思. 2 ...

  7. 【省带宽、压成本专题】深入解析 H.265 编码模式,带你了解 Apple 全面推进 H.265 的原因

    过去几年,又拍云一直在点播.直播等视频应用方面潜心钻研,取得了不俗的成果.我们结合点播.直播.短视频等业务中的用户场景,推出了"省带宽.压成本"系列文章,从编码技术.网络架构等角度 ...

  8. AngularJS中service,factory,provider的区别

    一.service引导 刚开始学习Angular的时候,经常被误解和被初学者问到的组件是 service(), factory(), 和 provide()这几个方法之间的差别.This is whe ...

  9. properties类是Hashtable的子类

    properties类是Hashtable的子类 增加了将Hashtable对象中的关键字保存到文件和从文件中读取关键字和值到Hashtable对象中的方法 Properties.store方法存储P ...

  10. java基础语法(一)

    java基础语法(一) 1.类是一种抽象的概念,对象是类的一种具体表示形式,是具体的概念.先有类,然后由类来生成 对象(Object).对象又叫做实例(Instance). 2.类由两大部分构成:属性 ...