快捷導(dǎo)航

淺談jQuery頁(yè)面的滾動(dòng)位置scrollTop、scrollLeft

更新時(shí)間：2015年05月19日 08:53:23 投稿：hebedich

官方文檔的解釋有點(diǎn)含糊，其實(shí)換個(gè)角度就很容易理解了，scrollTop獲取的是內(nèi)部元素超出外部容器的高度。例如：$('window').scrollTop()獲取的就是當(dāng)前這個(gè)頁(yè)面超出窗口最上端的高度，scrollLeft與此同理

Web頁(yè)面常常比顯示該頁(yè)面的瀏覽器窗口還要大，因?yàn)閃eb文檔具有很多內(nèi)容，往往會(huì)導(dǎo)致頁(yè)面比瀏覽器還要高，有時(shí)候甚至還要寬，這迫使訪問者通過滾動(dòng)來查看整個(gè)頁(yè)面（如圖10-8所示）。當(dāng)訪問者滾動(dòng)頁(yè)面的時(shí)候，一部分文檔會(huì)從視線中消失。例如，Web頁(yè)面不能完全放入瀏覽器窗口中，文檔會(huì)向左或向上滾動(dòng)，因此，頁(yè)面的頂部和左邊都會(huì)消失在視野之內(nèi)。這意味著瀏覽器窗口的左上角和文檔的左上角并不相同。如果試圖放置一個(gè)新元素，例如，屏幕頂部的一個(gè)動(dòng)態(tài)Banner；而如果只是試圖將元素的left和top位置設(shè)置為0，將會(huì)遇到麻煩，你實(shí)際上只是將其放到了文檔的頂部，但是卻位于瀏覽器窗口之外。

幸運(yùn)的是，jQuery提供了兩個(gè)函數(shù)，允許你確定從頂部和左邊滾動(dòng)頁(yè)面的多少部分（換句話說，文檔的多少像素存在于瀏覽器窗口的上邊和左邊）。要確定文檔的多少部分在瀏覽器窗口之上，使用如下所示這行代碼：

復(fù)制代碼代碼如下:

$（document）.scrollTop（）

要確定文檔的多少部分位于屏幕的左邊，使用如下所示這行代碼：

復(fù)制代碼代碼如下:

$（document）.scrollLeft（）

這兩個(gè)函數(shù)都返回一個(gè)像素值，你可以用它來定位頁(yè)面上的另一個(gè)元素。例如，如果你想要將一個(gè)彈出窗口定位于頁(yè)面的中心，即便在某人向下滾動(dòng)之后也是如此，那么，你需要確定訪問者滾動(dòng)了多遠(yuǎn)，并且移動(dòng)彈出窗口，以使得很多額外元素位于頁(yè)面的下方。在彈出工具的提示的例子中，當(dāng)訪問者已經(jīng)向下滾動(dòng)一個(gè)頁(yè)面，要定位工具提示時(shí)，你需要小心：很容易意外地將工具提示放到頁(yè)面空間中，但是，卻在瀏覽器的視口中可見區(qū)域之外。使用scrollTop（）來避免將一個(gè)工具提示放在瀏覽器窗口頂部的可視區(qū)域之上。

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: