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

最近工作比较无聊，于是就想到了写一个滚动条插件，在借鉴了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. JVM-并发-Java 内存模型

    Java内存模型 (1). 主内存与工作内存 Java内存模型规定了所有的变量都存储在主内存中． 每类线程的变量的主内存副本拷贝,线程对变量的所有操作(读操作,赋值操作等)都必须工作内存中进行,而不能 ...

  2. int a

    系统编译之后所有的变量都存储到符号表中,并且每个表项被分配一个符号ID,一般也是数字的,可以根据该符号的ID直接访问符号的值内存中的数据都是二进制的,没有ASCII值ASCII只在为便于人的理解,对二 ...

  3. struts2 标签 和 c标签的页面数据显示

    用struts2 标签显示的页面代码 <s:if test="#request.employees == null || #request.employees.size() == 0& ...

  4. HttpURLConnection发送和接受返回值

    URL url = new URL(sb.toString());//请求的地址 HttpURLConnection connection = (HttpURLConnection) url.open ...

  5. SQL分类

    SQL(Structure Query Language)结构化查询语言,是使用关系型数据库的应用语言. SQL主要可以划分为以下三个类别: DDL(Data Define Language)语句:数 ...

  6. js 中json字符串转化json对象

    JSON字符串:var str = '{ "name": "cxh", "sex": "man" }'; JSON对象: ...

  7. python 深拷贝与浅拷贝

    浅拷贝的方式有: lst=[1,2,3] (1)直接赋值: lst_cp = lst (2)for循环遍历生成:lst_cp= [i for i in lst] (3)copy模块下,copy.cop ...

  8. TP代码

    <?php// 本类由系统自动生成,仅供测试用途class IndexAction extends Action {    public function index(){        $th ...

  9. C# 中Join( )的理解

    在MSDN中对Join( )的解释比较模糊:在继续执行标准的 COM 和 SendMessage 消息泵处理期间,阻塞调用线程(线程A),直到某个线程终(线程B)止为止. 首先来看一下有关的概念: 我 ...

  10. 035. asp.netWeb用户控件之四通过用户控件实现投票和结果分析

    用户控件Vote.ascx代码 <%@ Control Language="C#" AutoEventWireup="true" CodeFile=&qu ...