資訊專欄INFORMATION COLUMN
摘要：當(dāng)前卷去的豎向高度的大小當(dāng)前卷去的橫向?qū)挾鹊拇笮∽⒁獯嬖谧畲笾岛妥钚≈怠Ｗ钚≈嫡鎸嵉母叨纫黄恋母叨茸畲笾底x寫屬性系列的系列的系列的上面的對屬性中除這對屬性之外的其他屬性都是只讀屬性只能通過屬性獲取而不能修改屬性的值。
scrollWidth/scrollHeight
在沒有滾動條的時候，即沒有內(nèi)容溢出時：
scrollWidth/scrollHeight獲取的結(jié)果和clientWidth/clientHeight是一樣的，即：
scrollWidth === clientWidth; scrollHeight === clientHeight;
有滾動條的時候,即內(nèi)容溢出時：
真實內(nèi)容的寬度和高度（包含溢出的內(nèi)容），在加上左邊的padding 和上邊的padding 值，即：
scrollWidth === clientWidth + paddingLeft(或者clientLeft); scrollHeight === clientHeight + paddingTop(或者clientTop);scrollTop/scrollLeft
scrollTop: 豎向滾動條卷去的高度。
scrollLeft：橫向滾動條卷去的寬度。
//當(dāng)前卷去的豎向高度的大小 document.documentElement.scrollTop||document.body.scrollTop //當(dāng)前卷去的橫向?qū)挾鹊拇笮?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：是可讀寫屬性，我們不僅僅可以獲取它的值，還可以修改它的值。
//例如，讓滾動條出現(xiàn)在最頂部，我們需要這樣設(shè)置 document.documentElement.scrollTop = 0; document.body.scrollTop = 0;
PS: 因為有最大和最小值，如果我們給他設(shè)置，該值比最大值大，則默認設(shè)置為最大值；如果該值比最小值小，則默認設(shè)置為最小值。
我們可以寫一個方式把他們封裝在一起。
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");
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/108927.html
摘要：由于為外層元素設(shè)置了，所以內(nèi)層元素會向上卷。和全面支持，而和不支持除外。認為是網(wǎng)頁內(nèi)容高度，不過最小值是。認為和都是網(wǎng)頁內(nèi)容高度，只不過當(dāng)網(wǎng)頁內(nèi)容高度小于等于時，的值是，而可以小于。認為是可視區(qū)域滾動條加邊框。 轉(zhuǎn)載自http://www.cnblogs.com/seven_...網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth;網(wǎng)頁可見區(qū)域高： document....
摘要：中的盒子模型通過中提供一系列的方法和屬性獲取頁面中元素的樣式信息值系列內(nèi)容的寬高是給元素定義的這兩個樣式。 1、js中的盒子模型 通過js中提供一系列的方法和屬性獲取頁面中元素的樣式信息值； 2、client系列 內(nèi)容的寬高：是給元素定義的width/height這兩個樣式。如果沒有設(shè)置height值，容器的高度會根據(jù)里面內(nèi)容自己適應(yīng)，這樣獲取的值就是真實的內(nèi)容的高；如果設(shè)置固定的高...
摘要：所以由此來看重繪不一定導(dǎo)致回流，回流一定會導(dǎo)致重繪前面我們說回流和重繪是會對進行修改，會消耗性能，所以我們要盡可能減少回流和重繪的次數(shù)。瀏覽器自己也清楚，如果每次操作都即時地反饋一次回流或重繪，那么性能上來說是扛不住的。 回流（Reflow）重繪（Repaint） 什么時候會觸發(fā)回流或重繪呢？ 當(dāng)我們對dom 進行修改當(dāng)時候會引發(fā)它外觀（樣式）上的改變時，就會觸發(fā)回流或重繪。這個過程本...
摘要：而像和會增加作用域鏈的長度，所以也會降低性能。但是用獲取一些屬性時，會不由自主地強迫隊列中的所有渲染事件前不完成。在條件增加時，所帶來的性能負擔(dān)要高于，因此建議使用。它代價昂貴，且容易失控。 正巧看到在送書，于是乎找了找自己博客上記錄過的一些東西來及其無恥的蹭書了~~~ 小廣告：更多內(nèi)容可以看我的博客 以下內(nèi)容均來自《高性能JavaScript》 JavaScript文件加載 ...
摘要：而像和會增加作用域鏈的長度，所以也會降低性能。但是用獲取一些屬性時，會不由自主地強迫隊列中的所有渲染事件前不完成。在條件增加時，所帶來的性能負擔(dān)要高于，因此建議使用。它代價昂貴，且容易失控。 正巧看到在送書，于是乎找了找自己博客上記錄過的一些東西來及其無恥的蹭書了~~~ 小廣告：更多內(nèi)容可以看我的博客 以下內(nèi)容均來自《高性能JavaScript》 JavaScript文件加載 ...
閱讀 2472·2023-04-26 02:54
閱讀 2409·2021-10-14 09:43
閱讀 3501·2021-09-22 15:19
閱讀 2901·2019-08-30 15:44
閱讀 2763·2019-08-30 12:54
閱讀 1047·2019-08-29 18:43
閱讀 1996·2019-08-29 17:12
閱讀 1384·2019-08-29 16:40
