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

最近工作比较无聊，于是就想到了写一个滚动条插件，在借鉴了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. Windows环境下 PHP+Apache+Mysql配置

    网上关于这种搭配的配置有许多许多,但是不知道大家有否碰到这么一个问题,就是做好的PHP程序(内含访问mysql数据库的操作)发布到Apache服务器上之后, 运行程序,提示未找到数据库函数. 仔细检查 ...

  2. source insight 相对路径

    source insight项目 在移动到另外一个地方时,会因为之前是绝对路径而导致,项目中的文件都不可用,需要重新把这些文件添加一遍. 这是个令人讨厌的事情. 解决办法为创建项目时设定为绝对路径.方 ...

  3. 关于HTML标签（元素）的那些事？

    关于HTML标签(元素)的那些事? 在战场上,知己知彼,方能百战百胜:在商场上,知己知彼,亦能呼风唤雨:在情场上,知己知彼,才能幸福美满.当然啦,在我们前端开发上,亦要知己知彼,才能叱咤风云.关于HT ...

  4. LeetCode() Repeated DNA Sequences 看的非常的过瘾！

    All DNA is composed of a series of nucleotides abbreviated as A, C, G, and T, for example: "ACG ...

  5. Android——课堂整理：assets目录和手机外部存储

    layout文件: <Button android:layout_width="match_parent" android:layout_height="wrap_ ...

  6. MYSQL分库分表和不停机更改表结构

    在MYSQL分库分表中我们一般是基于数据量比较大的时间对mysql数据库一种优化的做法,下面我简单的介绍一下mysql分表与分库的简单做法. .分库分表 很明显,一个主表(也就是很重要的表,例如用户表 ...

  7. HDU-2778 DNA Sequence（AC自动机）

    题目大意:统计模式串出现的次数. 题目分析:模板题. 代码如下: # include<iostream> # include<cstdio> # include<queu ...

  8. pull方法解析xml

    private void getData() {        new Thread() { public void run() {                try {              ...

  9. R中的统计检验函数

    正态性W检验 shapiro.test()用Shapiro-Wilk W统计量做数据的正态性检验. 经验分布的Kolmogorov-Smirnov检验 ks.test()Kolmogorov-Smir ...

  10. AutoFac使用~IOC容器（DIP,IOC,DI）

    #cnblogs_post_body h1 { background-color: #A5A5A5; color: white; padding: 5px } Autofac一款IOC容器,据说比Sp ...