資訊專欄INFORMATION COLUMN
摘要：當前卷去的豎向高度的大小當前卷去的橫向寬度的大小注意存在最大值和最小值。最小值真實的高度一屏的高度最大值讀寫屬性系列的系列的系列的上面的對屬性中除這對屬性之外的其他屬性都是只讀屬性只能通過屬性獲取而不能修改屬性的值。
scrollWidth/scrollHeight
在沒有滾動條的時候，即沒有內容溢出時：
scrollWidth/scrollHeight獲取的結果和clientWidth/clientHeight是一樣的，即：
scrollWidth === clientWidth; scrollHeight === clientHeight;
有滾動條的時候,即內容溢出時：
真實內容的寬度和高度（包含溢出的內容），在加上左邊的padding 和上邊的padding 值，即：
scrollWidth === clientWidth + paddingLeft(或者clientLeft); scrollHeight === clientHeight + paddingTop(或者clientTop);scrollTop/scrollLeft
scrollTop: 豎向滾動條卷去的高度。
scrollLeft：橫向滾動條卷去的寬度。
//當前卷去的豎向高度的大小 document.documentElement.scrollTop||document.body.scrollTop //當前卷去的橫向寬度的大小 document.documentElement.scrollLeft||document.body.scrollLeft
注意：
scrollTop/scrollLeft存在最大值和最小值。
最小值mini === 0; //真實的高度 - 一屏的高度 最大值max === scrollHeight - clientHeight;
‘讀寫屬性’
client系列的clientWidth/clientHeight、clientLeft/clientTop;
offset系列的offsetWidth/offsetHeight、offsetLeft/offsetTop;
scroll系列的scrollWidth/scrollHeight、scrollLeft/scrollTop;
上面的6對屬性中除scrollLeft/scrollTop這對屬性之外的其他屬性都是只讀屬性（只能通過屬性獲取而不能修改屬性的值）。
scrollLeft/scrollTop：是可讀寫屬性，我們不僅僅可以獲取它的值，還可以修改它的值。
//例如，讓滾動條出現在最頂部，我們需要這樣設置 document.documentElement.scrollTop = 0; document.body.scrollTop = 0;
PS: 因為有最大和最小值，如果我們給他設置，該值比最大值大，則默認設置為最大值；如果該值比最小值小，則默認設置為最小值。
我們可以寫一個方式把他們封裝在一起。
var boxModal = function (attr, value) {
//只有scrollTop/scrollLeft可以修改，其他既是修改了也不會生效，所以我們可以這么寫
if (typeof value !== "undefined") {
document.documentElement[attr] = value;
document.body[attr] = value;
}
return document.documentElement[attr] || document.body[attr];
}
這么使用：
utils.boxModal("scrollTop", 0);
utils.boxModal("scrollTop");
utils.boxModal("clientHeight");
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108927.html
摘要：由于為外層元素設置了，所以內層元素會向上卷。和全面支持，而和不支持除外。認為是網頁內容高度，不過最小值是。認為和都是網頁內容高度，只不過當網頁內容高度小于等于時，的值是，而可以小于。認為是可視區域滾動條加邊框。 轉載自http://www.cnblogs.com/seven_...網頁可見區域寬： document.body.clientWidth;網頁可見區域高： document....
摘要：中的盒子模型通過中提供一系列的方法和屬性獲取頁面中元素的樣式信息值系列內容的寬高是給元素定義的這兩個樣式。 1、js中的盒子模型 通過js中提供一系列的方法和屬性獲取頁面中元素的樣式信息值； 2、client系列 內容的寬高：是給元素定義的width/height這兩個樣式。如果沒有設置height值，容器的高度會根據里面內容自己適應，這樣獲取的值就是真實的內容的高；如果設置固定的高...
摘要：所以由此來看重繪不一定導致回流，回流一定會導致重繪前面我們說回流和重繪是會對進行修改，會消耗性能，所以我們要盡可能減少回流和重繪的次數。瀏覽器自己也清楚，如果每次操作都即時地反饋一次回流或重繪，那么性能上來說是扛不住的。 回流（Reflow）重繪（Repaint） 什么時候會觸發回流或重繪呢？ 當我們對dom 進行修改當時候會引發它外觀（樣式）上的改變時，就會觸發回流或重繪。這個過程本...
摘要：而像和會增加作用域鏈的長度，所以也會降低性能。但是用獲取一些屬性時，會不由自主地強迫隊列中的所有渲染事件前不完成。在條件增加時，所帶來的性能負擔要高于，因此建議使用。它代價昂貴，且容易失控。 正巧看到在送書，于是乎找了找自己博客上記錄過的一些東西來及其無恥的蹭書了~~~ 小廣告：更多內容可以看我的博客 以下內容均來自《高性能JavaScript》 JavaScript文件加載 ...
摘要：而像和會增加作用域鏈的長度，所以也會降低性能。但是用獲取一些屬性時，會不由自主地強迫隊列中的所有渲染事件前不完成。在條件增加時，所帶來的性能負擔要高于，因此建議使用。它代價昂貴，且容易失控。 正巧看到在送書，于是乎找了找自己博客上記錄過的一些東西來及其無恥的蹭書了~~~ 小廣告：更多內容可以看我的博客 以下內容均來自《高性能JavaScript》 JavaScript文件加載 ...
閱讀 2384·2023-04-26 02:54
閱讀 2307·2021-10-14 09:43
閱讀 3341·2021-09-22 15:19
閱讀 2837·2019-08-30 15:44
閱讀 2697·2019-08-30 12:54
閱讀 980·2019-08-29 18:43
閱讀 1932·2019-08-29 17:12
閱讀 1325·2019-08-29 16:40
