滾動條與元素尺寸

2021-08-17 14:09:57 字數 3153 閱讀 2517

js中有兩套方法可以檢視當前滾動條的滾動距離。

第一套是這樣的:

這個方法可以檢視滾動條的橫軸和縱軸的滾動距離,但是很遺憾的是ie8以及以下的版本不相容。

因此針對於ie,我們就需要有第二套方法:

document.body.scrollleft/doucment.body.scrolltop

document.documentelement.scrollleft/document.documentelement.scrolltop

雖然ie可以使用這兩個方法,但是這兩個方法不僅僅是ie才可以使用。

這裡要說明的是,這兩種方法要一起使用,因為瀏覽器的相容性問題,有的瀏覽器是document.body有值,有的是document.documentelement有值,但是所有的瀏覽器都只有乙個有值,不會兩個都有或者乙個都沒有,而且這裡的沒有值不代表是null,而是0,因此我們使用的時候一般都是兩個一起使用。

封裝方法:

function getscrolloffset()

}return

當瀏覽器不是ie的時候,可以直接使用window.pagexoffset和window.pageyoffset的方法,當沒有這兩個的時候,我們才需要來計算。

視口就是我們的可視區,因為我們改變瀏覽器的大小的時候會改變可視區的大小,那麼我們如何來檢視當前瀏覽器的可視區大小?

這裡我們依然有兩套方法:

第一套是window.innerheight/window.innerwidth;

這個方法可以直接獲取到當前可視區的寬高,但是依然很遺憾的是ie8以及以下的版本不相容。

這個時候就需要第二套方法了:

在標準模式下,doucment.documentelement.clientwidth/document.documentelement.clientheight

在任何瀏覽器都相容。

在怪異模式(混雜模式)下,

document.body.clientwidth/document.body.clientheight

才能檢視視口大小,而不能使用上面標準模式下的方法。

• 什麼是怪異模式和標準模式呢?

瀏覽器的渲染模式有兩種:標準模式和怪異模式。我們常用的是標準模式,怪異模式是防止瀏覽器公升級版本過高對後面版本你的**不相容,讓瀏覽器可以向後相容其他低版本的**的法規則,比如ie6的怪異模式下可以相容ie5個ie4的語法。

•  我們如何變成怪異模式呢?

其實很簡單,只需要把我們html**的第一行的去掉就可以變成怪異模式了,而加上這一行**就可以變成標準模式。

• 如何判斷怪異模式還是標準模式?

document上中有乙個方法叫做compatmode,當瀏覽器處於怪異模式的時候會返回字串「backcompat」,在標準模式下可以返回「css1compat」,通過這個方法我們就可以判斷了。

知道了什麼是標準模式和怪異模式以及如何判斷的情況下,我們就可以封裝乙個相容性的函式,返回瀏覽器的視口大小。

function getviewportoffset () 

}if(document.compatmode == 'css1compat') else }}

domele.getboundingclientrect()

在獲取的dom元素上,有乙個getboundingclientrect方法,這個方法可以獲取到元素的寬高和左上點的位置以及有下點的位置(width、height、top、left、right、bottom),注意這裡的寬高是指除去了margin的盒子模型的寬高。

但是老版本的ie瀏覽器沒有實現width和height,那麼我們在老版本的ie計算寬高的時候就需要用bottom-top和right-left來計算寬高值了。

還有一點需要注意的是,這裡的寬高也不是實時更新的,資料只是乙個副本。

我們依然可以封裝乙個函式,可以返回元素的寬高。

element.getelementoffset() 

}else }}

滾動條滾動

讓滾動條滾動的方法有三個:scroll、scrollto、scrollby。

這三個方法都有兩個引數,分別是x值和y值。前兩個方法的作用一模一樣,都是讓滾動條滾動到(x,y)的位置,但是最後乙個scrollby有一些區別,它是讓滾動條相對於上乙個位置滾動多少距離。

我們可以簡單的用這個方法來實現乙個自動閱讀的功能:

setinterval(function () ,50);

另乙個檢視元素尺寸的方法

dom.offsetwidth/dom.offsetheight

雖然前面有乙個ele.getboundingclientrect()方法,但是由於這個方法名字是在太長了,因此用的並不是非常多,相比較而言,這兩個dom元素的屬性用的更多一些。

這裡獲取的寬高值和上面的一樣,都是除去margin後的盒子模型的寬高。

檢視元素的位置

dom.offsetleft/dom.offsettop

這兩個值分別是元素距離左側和上側的距離,這裡的值是相對於有定位的父級而言的,如果沒有有定位的父級的話,才是相對於文件的座標。

那麼現在就來了乙個問題:如何找到有定位的父級呢?

domele上面還有乙個屬性是offsetparent,這個屬性可以檢視到元素的有定位的父級,如果沒有的話就會返回body,而body的offsetparent則是null。

我們利用上面的資訊,可以來封裝乙個函式,求元素的相對於文件的座標。

element.prototype.getposition = function ()

}var width = this.offsetleft,

height = this.offsettop,

ele = this.offsetparent;

while (ele.offsetparent)

return

}

滾動條與元素尺寸距離頂部的高度

js中有兩套方法可以檢視當前滾動條的滾動距離。第一套是這樣的 window.pagexoffset window.pageyoffset 這個方法可以檢視滾動條的橫軸和縱軸的滾動距離,但是很遺憾的是ie8以及以下的版本不相容。因此針對於ie,我們就需要有第二套方法 document.body.scr...

元素圓角與內部滾動條的矛盾

方案實現 自定義滾動條擴充套件 遺留問題 我們在寫 web 頁面的時候,除了頁面原生的滾動條,比如 html 的滾動條,body 的滾動條之外,還有一種比較常見的滾動條,那就是元素內部滾動條,我們在利用元素內部滾動條的時候會遇到什麼問題呢,我們如何自定義滾動條。比如迅雷客戶端,除了最右邊的滾動條是頁...

python橫向滾動條 控制滾動條

調過js指令碼控制 python 1.coding utf 8 2.from selenium import webdriver 3.import time 5.driver webdriver.firefox 6.driver.get 7.搜尋 8.driver.find element by i...