再了无生趣的工作也是能够帮助我们提高的~

最近工作比较无聊，于是就想到了写一个滚动条插件，在借鉴了mCustomerScrollbar这个组件之后我简单的写了一个类似的，当然，相比于它的2000多行代码来说，我还是精简了一下，大概200多行。

但是在做这个组件的时候，遇到的问题还是很多的，但是其中最有记录意义的是一个叫scrollWidth的DOM属性。

大致情况如下：

当内容的宽度是自适应的时候，也就是宽度随着内容增减，不会换行，然后外层的容器设置了固定的宽度，同时设置了overflow:hidden;此时要获取内容总宽度时，

最常用的clientWidth和offsetWidth都将失效，因为他们只能获取到可见区域的宽度，而要获取内容总宽度时就要用scrollWidth了。

scrollWidth：内容的宽度，当然也包括了隐藏部分。

虽然时简简单单的一个属性，但是还是困扰了我好久，jquery用多了，只会width()了，所以在这里还是提倡大家多学学js原生的属性和方法~

scrollWidth的巧妙运用的更多相关文章

  1. 完全图解scrollLeft,scrollWidth,clientWidth,offsetWidth 获取相对途径，滚动图片(网上找的,未经试验,但觉得比较好)

    获取元素的位置属性可以通过 HTMLElement.offsetLeft HTMLElement.offsetTop 但是,这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其 ...

  2. 谈谈一些有趣的CSS题目（九）-- 巧妙的实现 CSS 斜线

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  3. 页面元素坐标和偏移（clientX/pageX/screenX/layerX/offsetWidth/scrollWidth/clientWidth等）相关整理

    鼠标事件都是在特定位置发生的,我们可以通过event事件对象的各种属性来获得事件发生的坐标位置,有相对于视口的,有相对于整个文档的,同样页面元素的位置也有相对视口的,也有滚动后的,这些都比较容易混淆, ...

  4. JS巧妙思路

    <script type="text/javascript"> window.onload = function () { var btn = document.get ...

  5. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...

  6. scrollWidth,clientWidth,offsetWidth的区别

      通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包 ...

  7. 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  8. JS中关于clientWidth offsetWidth scrollWidth 等的含义

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  9. CSSOM视图模式(CSSOM View Module)相关整理：scrollWidth，scrollLeft，offsetLeft，clientX ，offsetX 定义和区别

    转:http://www.zhangxinxu.com/wordpress/2011/09/cssom%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%BC%8Fcssom-view-mo ...

随机推荐

  1. C# 6.0新特性（转载）

    简介 VS 2015中已经包含C# 6.0. C#在发布不同版本时,C#总是会有新特性,比如C#3.0中出现LINQ,C#4.0中的动态特性,c#5.0中的异步操作等.. C# 6.0中与增加了不少新 ...

  2. mac 下配置protobuf 3.0 golang环境

    protobuf 3.0  与 之前的 protobuf 2.6 的语法是不一样的.需要重新安装一下,本机的环境是 OS X Yosemite  10.10.2 1. 不采用home brew安装,用 ...

  3. 正则验证 手机号 QQ号和邮箱

    + (BOOL) validateEmail:(NSString *)email{    NSString *emailRegex = @"^[\\w-]+(\\.[\\w-]+)*@[\\ ...

  4. HDU1005（矩阵快速幂）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1005 #include<cstdio> using namespace std; int ...

  5. RPM卸载软件包

    如何卸载rpm包 首先:通过  rpm -q <关键字> 可以查询到rpm包的名字 然后:调用 rpm -e <包的名字> 删除特定rpm包 如果遇到依赖,无法删除,使用 rp ...

  6. 论文笔记之：Conditional Generative Adversarial Nets

    Conditional Generative Adversarial Nets arXiv 2014   本文是 GANs 的拓展,在产生 和 判别时,考虑到额外的条件 y,以进行更加"激烈 ...

  7. Qt之QComboBox（基本应用、代理设置）(转)

    QComboBox下拉列表比较常用,用户可以通过选择不同的选项来实现不同的操作,如何实现自己的下拉列表呢? 很多人在问QComboBox如何设置选项的高度.代理等一些问题!今天就在此分享一下自己的一些 ...

  8. Nginx-ngx_lua模块原理和内置函数

    ngx_lua模块的原理: 1.每个worker(工作进程)创建一个Lua VM,worker内所有协程共享VM:2.将Nginx I/O原语封装后注入 Lua VM,允许Lua代码直接访问:3.每个 ...

  9. NodeJS的小应用

    server.js: //引入require 模块 var http=require('http'); //创建服务器 http.createServer(function(request,respo ...

  10. ls

    -a, –all 列出目录下的所有文件,包括以 . 开头的隐含文件 -h, –human-readable 以容易理解的格式列出文件大小 (例如 1K 234M 2G) -l 除了文件名之外,还将文件 ...