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

  首先说明一下原理:

  ①生成一个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. (二十)即时通信的聊天气泡的实现I

    Tip:通过xib和storyboard不可能将一个控件作为ImageView的子控件,只能通过代码的addSubview方法实现. 设置图片的细节:如果button比图片大(为了方便对齐),将图片设 ...

  2. 《java入门第一季》之类String类小案例

    案例一: /* * 需求:把数组中的数据按照指定个格式拼接成一个字符串 * 举例: * int[] arr = {1,2,3}; * 输出结果: * "[1, 2, 3]" * 分 ...

  3. Leetcode_94_Binary Tree Inorder Traversal

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/42876657 Given a binary tree, r ...

  4. react-native-android之初次相识

    作为一名Android开发者,我的感觉就是,一步一卡,卡的潇洒. 但是我还是要学react-native,不要问我为什么,因为我相信一门解决了原生app,开发周期长,开发成本高,升级代价大的语言一定会 ...

  5. NDK 与 JNI 的关系

    简介 JNI是java语言提供的Java和C/C++相互沟通的机制,Java可以通过JNI调用本地的C/C++代码,本地的C/C++的代码也可以调用java代码.JNI 是本地编程接口,Java和C/ ...

  6. 使用Ext JS,不要使用页面做组件重用,尽量不要做页面跳转

    今天,有人请教我处理办法,问题是: 一个Grid,选择某条记录后,单击编辑后,弹出编辑窗口(带编辑表单),编辑完成后单击保存按钮保存表单,并关闭窗口,刷新Grid. 这,本来是很简单的,但囿于开发人员 ...

  7. The type java.lang.Object cannot be resolved. It is indirectly referenced from required .class files

    The type java.lang.Object cannot be resolved.It is indirectly referenced from required .class files ...

  8. java--加强之 Java5的线程并发库

    转载请申明出处:http://blog.csdn.net/xmxkf/article/details/9945499 01. 传统线程技术回顾 创建线程的两种传统方式: 1.在Thread子类覆盖的r ...

  9. LeetCode(49)-Valid Parentheses

    题目: Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the ...

  10. LeetCode(42)-Best Time to Buy and Sell Stock(卖股票)

    题目: Say you have an array for which the ith element is the price of a given stock on day i. If you w ...