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