1. 全栈程序员必看首页

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

全栈程序员-站长 • • 未分类 • 阅读 13

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]上网搜了一下scrollWidth和scrollHeight，大部分都是转帖，也没有具体说清楚，这两个属性值是什么，也没有图。索性自己测试一下，包含的浏览器有IE6，IE7，IE8，IE9，Firefox，Chrome，Opera，Safari，顺便把测试的截图也发上来，这样大家看着也明白。一、scrollWidth首先，我们先上MSDN上查一下scroll

大家好，又见面了，我是你们的朋友全栈君。 

上网搜了一下scrollWidth和scrollHeight，大部分都是转帖，也没有具体说清楚，这两个属性值是什么，也没有图。

索性自己测试一下，包含的浏览器有IE 6，IE 7，IE 8，IE 9，Firefox，Chrome，Opera，Safari，顺便把测试的截图也发上来，这样大家看着也明白。

一、scrollWidth

首先，我们先上MSDN上查一下scrollWidth的文档说明。

链接地址：http://msdn.microsoft.com/en-us/library/ms534619%28v=VS.85%29.aspx

scrollWidth Property

.NET Framework 3.0

Retrieves the scrolling width of the object.

返回对象的滚动宽度。（这句就是废话，和没解释一样）

Syntax

HTML N/A
Scripting [ iWidth = ] object.scrollWidth

Possible Values

iWidth Pointer to a nonnegative long integer that specifies the width, in pixels.

The property is read-only.The property has no default value.

这个属性是只读的，并且没有默认值。

Remarks

The width is the distance between the left and right edges of the object’s visible content.

这个宽度是指对象的可见内容的左边界到右边界的距离。（这个左边界和右边界是如何理解，也没有说清楚，不过下面给了个链接，我懒的去看。）

For more information about how to access the dimension and location of objects on the page through the Document Object Model (DOM), seeMeasuring Element Dimension and Location with CSSOM in Internet Explorer 9.

下面再来看看火狐的开发者网站MDN是如何解释的。

链接地址：https://developer.mozilla.org/en/DOM/element.scrollWidth

scrollWidth is a read–only property that returns either the width in pixels of the content of an element or the width of the element itself, whichever is greater. If the element is wider than its content area (for example, if there are scroll bars for scrolling through the content), the scrollWidth is larger than theclientWidth.

scrollWidth是只读属性，返回的是元素的内容宽度或者元素本身的宽度，两者之间的大者。如果元素比内容区域宽（例如，如果有滚动条用来滚动内容），scrollWidth是大于clientWidth的。

综上所述，结合IE和Firefox的官方文档的解释，我认为scrollWidth的语义就是当一个元素有滚动条的时候，scrollWidth表示的是元素内容区域的滚动宽度，当没有滚动条的时候，就是元素的本身宽度。

下面我们就来看看各个浏览器，实际是怎么解释的。

测试的html代码很简单：

（1）没有滚动条，没有内容

[html]
view plain
copy
print
?

  1. <!DOCTYPE HTML>  
  2. <html lang=“en-US”>  
  3. <head>  
  4.     <meta charset=“UTF-8”>  
  5.     <title></title>  
  6.     <script type=“text/javascript”>  
  7.     window.onload = function() {  
  8.         var div = document.getElementById(‘noScrollbar’);  
  9.         alert(div.scrollWidth);  
  10.     };  
  11.     </script>  
  12. </head>  
  13. <body>  
  14.     <div id=“noScrollbar” style=“width: 100px; height: 100px; background-color: green; margin: 100px; padding: 10px;”></div>  
  15. </body>  
  16. </html>  

（2）没有滚动条，有内容

[html]
view plain
copy
print
?

  1. <!DOCTYPE HTML>  
  2. <html lang=“en-US”>  
  3. <head>  
  4.     <meta charset=“UTF-8”>  
  5.     <title></title>  
  6.     <script type=“text/javascript”>  
  7.     window.onload = function() {  
  8.         var div = document.getElementById(‘noScrollbarWithContent’);  
  9.         alert(div.scrollWidth);  
  10.     };  
  11.     </script>  
  12. </head>  
  13. <body>  
  14.     <div id=“noScrollbarWithContent” style=“width: 100px; height: 100px; background-color: green; margin: 100px; padding: 10px;”>  
  15.         <div style=“width: 100px; height: 100px; background-color: yellow;”></div>  
  16.     </div>  
  17. </body>  
  18. </html>  

（3）有滚动条，有内容

[html]
view plain
copy
print
?

  1. <!DOCTYPE HTML>  
  2. <html lang=“en-US”>  
  3. <head>  
  4.     <meta charset=“UTF-8”>  
  5.     <title></title>  
  6.     <script type=“text/javascript”>  
  7.     window.onload = function() {  
  8.         var div = document.getElementById(‘scrollbarWithContent’);  
  9.         alert(div.scrollWidth);  
  10.     };  
  11.     </script>  
  12. </head>  
  13. <body>  
  14.     <div id=“scrollbarWithContent” style=“width: 100px; height: 100px; background-color: green; margin: 100px; padding: 10px; overflow: auto;”>  
  15.         <div style=“width: 200px; height: 83px; background-color: yellow;”></div>  
  16.     </div>  
  17. </body>  
  18. </html>  


1、IE 6

做中文网站IE 6还是要考虑的，因为IE 6在中国还是有很大份额的。

（1）没有滚动条，没有内容。如下图，scrollWidth = 左内边距 + 右内边距

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

（2）没有滚动条，有内容。如下图，scrollWidth = 左内边距 + 内容宽度 +  右内边距

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

（3）有滚动条，有内容。如下图，scrollWidth = 左内边距 + 内容宽度 +  右内边距

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

综上，IE 6的scrollWidth = 左内边距 + 内容宽度 + 右内边距，这个内容宽度不等于元素的宽度。

2、IE 7

（1）没有滚动条，没有内容。如下图，scrollWidth = 左内边距 + 右内边距

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

（2）有滚动条，有内容。如下图，scrollWidth = 左内边距 + 内容宽度 +  右内边距

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

（3）有滚动条，有内容。如下图，scrollWidth = 左内边距 + 内容宽度 +  右内边距

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

综上，IE 7的scrollWidth = 左内边距 + 内容宽度 + 右内边距，这个内容宽度不等于元素的宽度。

3、IE 8

（1）没有滚动条，没有内容。如下图，scrollWidth = 左内边距 + 内容宽度 + 右内边距

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

（2）有滚动条，有内容。如下图，scrollWidth = 左内边距 + 内容宽度 +  右内边距

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

（3）有滚动条，有内容。如下图，scrollWidth = 左内边距 + 内容宽度

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

综上，IE 8的scrollWidth = 左内边距 + 内容宽度。

IE 6和IE 7的表现是一致的，IE 8的修正了IE 6和IE 7在解释内容宽度的不正确，但是IE 8的scrollWidth为什么没有了padding-right？真是奇怪！

再来看看firefox是如何表现的。

4、Firefox

（1）没有滚动条，没有内容。如下图，scrollWidth = 左内边距 + 内容宽度 + 右内边距

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

（2）有滚动条，有内容。如下图，scrollWidth = 左内边距 + 内容宽度 +  右内边距

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

（3）有滚动条，有内容。如下图，scrollWidth = 左内边距 + 内容宽度

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

Html元素的scrollWidth和scrollHeight详解 .[通俗易懂]

综上，Firefox的scrollWidth = 左内边距 + 内容宽度。

最后，结果是ie8、ie9、firefox、chrome、opera、safari的表现都是一致的，具体我就不截图了。IE 6和IE 7表现一致，但是他们的内容宽度有bug。

我们来看看w3是如何解释的，链接地址：http://www.w3.org/TR/cssom-view/#dom-element-scrollwidth

The scrollWidth attribute must return the result of running these steps:

  1. If the element does not have any associated CSS layout box return zero and terminate these steps.

  2. If the element is the root element and the Document is not inquirks mode return max(document content width, value ofinnerWidth).

  3. If the element is the HTML body element and the Document is inquirks mode return max(document content width, value ofinnerWidth).

  4. Return the computed value of the ‘padding-left‘ property, plus the computed value of the ‘padding-right‘, plus thecontent width of the element.

W3C的解释是scrollWidth应该是计算过的左右padding值加上内容宽度，从上面的测试来看，我觉得所有浏览器都表现的不正确，IE 6和IE 7没有正确计算内容宽度。IE 8及firefox等其他浏览器都没有加上padding-right。

最后，我向bugzilla提交了一个firefox的bug。受理的很快，中午提交，下午就有人回复。

地址在这里：https://bugzilla.mozilla.org/show_bug.cgi?id=718548

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/163756.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • 男女之间的友情和爱情

    男女之间的友情和爱情

    男女之间的友情和爱情

    全栈程序员-站长的头像 全栈程序员-站长
    2021年8月5日
    58
  • 磁珠的作用

    磁珠的作用

    磁珠的作用磁珠的作用在成品电路板上，我们会看到一些导线或元件的引脚上套有黑色的小磁环，这就是本文要介绍的磁珠。磁珠的全称为铁氧体磁珠滤波器(另有一种是非晶合金磁性材料制作的磁珠)，是一种抗干扰元件，滤除高频噪声

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月5日
    3
  • php清除浏览器缓存代码,js清除浏览器缓存

    php清除浏览器缓存代码,js清除浏览器缓存

    php清除浏览器缓存代码,js清除浏览器缓存本篇文章的内容是js清除浏览器缓存，在这里分享给大家，也可以给有需要的朋友做一下参考，大家一起来看一看吧一、meta方式一开始百度后的做法，但是在360中并不适应二、动态引入js+时间戳去除静态html的缓存–动态引入js文件动态引入js文件以及在js文件后边添加动态参数代码window.onload=function(){varscript=document.createElement(“s…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月18日
    9
  • scikit-learn工具包中分类模型predict_proba、predict、decision_function用法详解「建议收藏」

    scikit-learn工具包中分类模型predict_proba、predict、decision_function用法详解「建议收藏」

    scikit-learn工具包中分类模型predict_proba、predict、decision_function用法详解「建议收藏」在使用sklearn训练完分类模型后，下一步就是要验证一下模型的预测结果，对于分类模型，sklearn中通常提供了predict_proba、predict、decision_function三种方法来展示模型对于输入样本的评判结果。说明一下，在sklearn中，对于训练好的分类模型，模型都有一个classes_属性，classes_属性中按顺序保存着训练样本的类别标记。下面是使用LogisticRegression分类器在为例，展示一下分类器的classes_属性。1、先看一下样本标签从0…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月6日
    0
  • <span role="heading" aria-level="2">测试15

    测试15

    测试15无意中发现了一个巨牛的人工智能教程，忍不住分享一下给大家。教程不仅是零基础，通俗易懂，而且非常风趣幽默，像看小说一样！觉得太牛了，所以分享给大家。点这里可以跳转到教程。HTTP的接口测试工具有很多，

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月3日
    21
  • 轻松搞懂【TF-IDF、word2vec、svm、cnn、textcnn、bilstm、cnn+bilstm、bilstm+attention实现】英文长文本分类[通俗易懂]

    轻松搞懂【TF-IDF、word2vec、svm、cnn、textcnn、bilstm、cnn+bilstm、bilstm+attention实现】英文长文本分类[通俗易懂]

    轻松搞懂【TF-IDF、word2vec、svm、cnn、textcnn、bilstm、cnn+bilstm、bilstm+attention实现】英文长文本分类[通俗易懂]项目来源：https://www.kaggle.com/c/word2vec-nlp-tutorial/之前我写过几篇博客：就这？word2vec+BiLSTM、TextCNN、CNN+BiLSTM、BiLSTM+Attention实现中英文情感分类代码详解就这？word2vec+SVM（支持向量机）实现中英文情感分类代码详解这两篇博客主要是基于中文进行情感分类的，那么本篇博客，我会以这个kaggle项目来介绍如何实现英文长文本情感分类。1实验数据本次数据集来源于kaggle项目“Bago

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月28日
    27

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号