class="prettyprint linenums">js位子表示
一般的通过mousedown、mousemove、mouseup等打造的拖动,仅仅在普通的键盘 鼠标的电脑设备上可以工作。而到了ios设备上(iphone itouch ipad),则不能工作了。最近因为做个东西,需要支持ios设备,所以只好看了下webkit浏览器的触摸事件。 其实也很简单,对应mousedown、mousemove、mouseup的触摸事件分别是touchstart、touchmove、touchend。为了写个demo,花了不少的时间,所以为了节省时间,我文章里就不多说了,仅贴一下相关代码。

ie(ie9,chrome,ff基本一致)中:
offsetHeight(返回元素的高度和宽度,以像素为单位,包含内边距):
200 4 4 3 3=214(自身200的高度 上下各为4的内边距 上下的各为3的border,注意不包括外边距)
offsetWidth(返回元素的高度和宽度,以像素为单位,包含内边距):、
100 3 3 4 4=114 同上
offsetLeft(返回当前元素的左边界到它的包含元素的左边界的偏移量,以像素为单位):
2 3 1=6(ie6下为3)(父级div的内左边距2 父级div外左边距 3 子div左外边距 1,注意这里子div内边距是不会影响到offsetLeft)
没有offsetRight的概念。
offsetTop(返回当前元素的上边界到它的包含元素的上边界的偏移量,以像素为单位。)
2 3 1=6(ie6下为2)道理和offsetLeft一样
scrollHeight(返回元素的完整的高度和宽度,以像素为单位。当一个元素拥有滚动条时(比如由于 CSS 的 overflow:scroll 属性,如果为hidden,得到的只是能显示文字所能看到的高度)
474(div的实际的高度,由里面的文字来决定,overflow:scroll )
如果overflow:hidden,就只有390,其它的被隐藏了
如果去调overflow,就是390,为什么 overflow:scroll 却等于474呢?因为还包含了滚动条的高度
scrollWidth:(和scrollheight道理一样)
overflow:hidden值为108(子div实际的宽度)
overflow:scroll 值为90(这里为什么会这样?难道不包括滚动条的宽度?)
去掉overflow,值为108
scrolltop(返回已经滚动到元素的左边界或上边界的像素数。只有在元素有滚动条的时候,例如,元素的 CSS overflow 属性设置为 auto 的时候,这些像素才有用。这些属性也只在文档的 <body> 或 <html> 标记上定义(这和浏览器有关),并且一起来制定滚动文档的位置。注意,这些属性并不会指定一个 <iframe> 标记的滚动量)
如果不拖动滚动条,默认的值为0;
scrollLeft同上

js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍的更多相关文章

  1. javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解

    javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解,实例修正版。

  2. jQuery居中元素scrollleft计算方法示例

    这篇文章主要介绍了jQuery居中元素scrollleft计算方法,结合实例形式分析了jQuery获取及计算页面滚动元素的相关操作技巧,需要的朋友可以参考下

  3. js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍

    js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍,需要的朋友可以看看

  4. JS获取各种宽度、高度的简单介绍

    这篇文章主要介绍了JS获取各种宽度、高度的简单介绍的相关资料,需要的朋友可以参考下

  5. JavaScript中clientWidth,offsetWidth,scrollWidth的区别

    这篇文章主要介绍了Element中clientWidth,offsetWidth,scrollWidth的区别,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部