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

  首先说明一下原理:

  ①生成一个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. 教你自己写Android第三方库

    其实Android studio的出现很大程度上方便了我们Android开发人员,今天我们说说怎么构建我们自己的库. 依次按File->New Moudle->android Librar ...

  2. InfoQ访谈:Webkit和HTML5的现状和趋势

    原网址: http://www.infoq.com/cn/interviews/status-and-trends-of-webkit-and-html5 个人一些不成熟的见解,望讨论和指正. 节选 ...

  3. 理解WebKit和Chromium: Chromium网络栈

    转载请注明原文地址:http://blog.csdn.net/milado_nju ## 概述 前面讲到Chromium的资源加载机制,在调用栈上,提到URLRequest之后就戛然而止,在这之下就是 ...

  4. (NO.00001)iOS游戏SpeedBoy Lite成形记(二)

    打开SpriteBuilder生成的Xcode项目文件,首先在MainScene添加play回调函数: -(void)play{ CCScene *gameScene = [CCBReader loa ...

  5. STL中算法分类

    操作对象 直接改变容器的内容 将原容器的内容复制一份,修改其副本,然后传回该副本 功能: 非可变序列算法 指不直接修改其所操作的容器内容的算法 计数算法        count.count_if 搜 ...

  6. Saiku去掉登录模块

    1.修改applicationContext-saiku-webapp.xml <security:intercept-url pattern="/rest/**" acce ...

  7. 【一天一道LeetCode】#8. String to Integer (atoi)

    一天一道LeetCode系列 (一)题目 Implement atoi to convert a string to an integer. Hint: Carefully consider all ...

  8. unity用PUN进行信息交互模块

    using UnityEngine; using System.Collections.Generic; public class MessageChat : Photon.MonoBehaviour ...

  9. Android使用SVG矢量动画(二)

    上篇我们学习了怎么显示SVG矢量图像,当然还有一个更强大的功能,就是让SVG图像动起来,先上一张效果图吧: 要实现上述动画效果,就得用AnimatedVectorDrawable这个类了,它就是负责V ...

  10. Linux进程管理(第二版) --进程管理命令

    进程管理命令 一.查看用户信息.5.15 分钟内的系统的,优先值越小,优先权越大 ] 1.nice 指定程序运行的优先级 格式 nice -n command 例如 nice -5 myprogrem ...