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

最近工作比较无聊，于是就想到了写一个滚动条插件，在借鉴了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. Xcode真机测试could not find developer disk image解决方法（支持iOS9.2）

    这个问题开发者经常碰到,因为当我们更新手机iOS版本的时候,可能我们开发人员因为项目的需要等原因并一定愿意更新xcode到最新版本.但是老版本的xcode极有可能不支持最新的iOS版本,也有一些旧的i ...

  2. Web页中table导出到execl（带模板）

    1.将excel另存为html,将其复制到aspx文件中 2.输出格式为excel InitData(); Response.Clear(); Response.Buffer = true; Resp ...

  3. watir学习系列--Watir API介绍

    文本框:          <INPUT id="email" name="_fmu.u._0.e" value="" />   ...

  4. Python::OS 模块 -- 进程参数

    os模块的简介请参看 Python::OS 模块 -- 简介 os模块的文件和目录操作 Python::OS 模块 -- 文件和目录操作 os模块的进程管理 Python::OS 模块 -- 进程管理 ...

  5. NIC bonding

    Bonding is the same as port trunking. In the following I will use the word bonding because practical ...

  6. Map/Reduce 工作机制分析 --- 错误处理机制

    前言 对于Hadoop集群来说,节点损坏是非常常见的现象. 而Hadoop一个很大的特点就是某个节点的损坏,不会影响到整个分布式任务的运行. 下面就来分析Hadoop平台是如何做到的. 硬件故障 硬件 ...

  7. Flume 实战(1) -- 初体验

    前言: Flume-ng是数据收集/聚合/传输的组件, Flume-ng抛弃了Flume OG原本繁重的zookeeper和Master, Collector, 其整体的架构更加的简洁和明了. 其基础 ...

  8. mm/swap

    /* *  linux/mm/swap.c * *  Copyright (C) 1991, 1992  Linus Torvalds */ /* * This file should contain ...

  9. 图论--最近公共祖先问题（LCA）模板

    最近公共祖先问题(LCA)是求一颗树上的某两点距离他们最近的公共祖先节点,由于树的特性,树上两点之间路径是唯一的,所以对于很多处理关于树的路径问题的时候为了得知树两点的间的路径,LCA是几乎最有效的解 ...

  10. HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...