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

最近工作比较无聊，于是就想到了写一个滚动条插件，在借鉴了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. 反射+泛型+缓存 ASP.NET的数据层通用类

    using System; using System.Collections.Generic; using System.Text; using System.Reflection ; using S ...

  2. iOS学习之NSPredictae及搜索框的实现

    NSPredicate Predicate 即谓词逻辑, Cocoa框架中的NSPredicate用于查询,作用是从数据堆中根据条件进行筛选.计算谓词之后返回的结果永远为BOOL类型的值,当程序使用谓 ...

  3. 在文章没有缩略图的时候，如何去掉织梦官方的 DEDECMS无缩略图 图片

    1.打开 list_article.htm.2.替换代码 将 [field:array runphp='yes']@me = (empty(@me['litpic']) ? “<a href=’ ...

  4. 算法（第4版）-1.3.1 API

    总结:本小节介绍了泛型.自动装箱.迭代.Bag.Queue.Stack以及一个栈用例的经典例子--算术表达式求值. 重点: 1. 集合类的抽象数据类型的一个关键特性是我们应该可以用它们储存任意类型的数 ...

  5. 字体Unicode编码

    客专家福利     有奖试读&征文——我们在互联网上奋斗的故事      10月推荐文章汇总      加入“技术热心人”,赢丰厚奖品 html-中文字体在CSS中的显示(Unicode编码) ...

  6. 自定义EditText实现可以一键删除输入的内容

    public class MyEditText extends EditText { private Drawable dRight; private Rect rRounds; public MyE ...

  7. cocos2d-x 3.2 listview scorllview 等容器在小米华为等部分手机显示泛白解决

    感觉记不住,代码贴上以免以后难找 在proj.android\src\org\cocos2dx\cpp\AppActivity.java 中的 public class AppActivity ext ...

  8. web安全之sql注入联合查询

    联合查询的条件: 有显示位.当然要有注入点!! 提前需要了解的函数: union可合并两个或多个select语句的结果集,前提是两个select必有相同列.且各列的数据类型也相同 distinct 去 ...

  9. decimal(a,b)

    decimal(a,b)a指定指定小数点左边和右边可以存储的十进制数字的最大个数,最大精度38.b指定小数点右边可以存储的十进制数字的最大个数.小数位数必须是从 0 到 a之间的值.默认小数位数是 0 ...

  10. Sources

    作为一个初学者显然是没有能力自己写教程向的文章的 所以就写个整合资源贴整合一下自己学每个知识点的来源 (其实不是很全因为不记得之前看了什么) ————————————————————————————— ...