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

最近工作比较无聊，于是就想到了写一个滚动条插件，在借鉴了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. disconnected no supported authentication methods available(server sent: publickey，keyboard interae）

    因为乌龟Git和Git的冲突 我们需要把乌龟Git设置改正如下. 找到TortoiseGit -> Settings -> Network 将SSH client指向~\Git\bin\s ...

  2. 安装生物信息学软件-Samtools

    装完Bowtie2,官方文档给出的栗子说可以玩一玩samtools,所以我入个坑 参考这篇http://m.010lm.com/roll/2016/0620/2343389.html Step 1: ...

  3. C++ Primer----智能指针类 2

    指针带给了 C++巨大的灵活性,然而同样也带来无数的问题,悬挂指针,内存泄漏等. int *pInt = new int(1); // Do not forget delete pInt; 智能指针就 ...

  4. LintCode Search Insert Position

    找出指定target的位置(没有此数时为按顺序应当位置). public class Solution { /** * param A : an integer sorted array * para ...

  5. C#对象复制 ICloneable

    在.net framework中,提供了ICloneable接口来对对象进行克隆.当然,你也可以不去实现ICloneable接口而直接自己定义一个Clone()方法,当然,还是推荐实现ICloneab ...

  6. VS2013添加使用lib的方法

    使用第三方厂家的库,一般都会有三个文件: xxx.h xxx.lib xxx.dll 头文件很明显,就在需要用到的文件里面include就好. lib文件,可以直接在IDE中添加,具体步骤有两个: 1 ...

  7. 使用pt-stalk分析MySQL的性能波动 (转)

    简介 在MySQL服务器出现短暂(5~30秒)的性能波动的时候,一般的性能监控工具都很难抓住故障现场,也就很难收集对应较细粒度的诊断信息.另外,如果这种波动出现的频率很低,例如几天才一次,我们也很难人 ...

  8. 在Ext JS 6中添加本地化包

    我在官方论坛发的帖子终于有人恢复了,也终于知道如何添加本地化包了.在Ext JS 6中,Ext JS属于经典工具包,而本地化是包含在经典工具包中,因而在app.json中,要添加本地化包,必须在cla ...

  9. [linux] Nginx编译安装错误error: the HTTP rewrite module requires the PCRE library

    nginx编译错误: 执行如下命令安装缺少的文件即可

  10. 三、Spring——数据访问

    1.Spring 对 DAO的支持 Spring支持目前大多数常用的数据持久化技术,Spring定义了一套面向DAO层的异常体系,并未各种支持的持久化技术提供了异常转换器.这样,我们在设计DAO接口时 ...