首頁 > web前端 > js教程 > 主體

淺談jQuery頁面的滾動位置scrollTop、scrollLeft_jquery

WBOY
發布: 2016-05-16 15:58:14
原創
1101 人瀏覽過

Web頁面常常比顯示該頁面的瀏覽器視窗還要大,因為Web文件具有許多內容,往往會導致頁面比瀏覽器還要高,有時甚至還要寬,這迫使訪客透過捲動來查看整個頁面(如圖10-8所示)。當訪客捲動頁面的時候,一部分文件會從視線中消失。例如,Web頁面不能完全放入瀏覽器視窗中,文件會向左或向上捲動,因此,頁面的頂部和左邊都會消失在視野之內。這意味著瀏覽器視窗的左上角和文件的左上角並不相同。如果試圖放置一個新元素,例如,螢幕頂部的一個動態Banner;而如果只是試圖將元素的left和top位置設為0,將會遇到麻煩,你實際上只是將其放到了文件的頂部,但是卻位於瀏覽器視窗之外。

幸運的是,jQuery提供了兩個函數,允許你確定從頂部和左邊滾動頁面的多少部分(換句話說,文件的多少像素存在於瀏覽器視窗的上邊和左邊)。要確定文件的多少部分在瀏覽器視窗之上,請使用如下所示這行程式碼:

複製程式碼 程式碼如下:

$(document).scrollTop()

要確定文件的多少部分位於螢幕的左邊,使用如下所示這行程式碼:

複製程式碼 程式碼如下:

$(document).scrollLeft()

這兩個函數都會傳回一個像素值,你可以用它來定位頁面上的另一個元素。例如,如果你想要將一個彈出視窗定位於頁面的中心,即便在某人向下滾動之後也是如此,那麼,你需要確定訪客滾動了多遠,並且移動彈出窗口,以使得很多額外元素位於頁面的下方。在彈出工具的提示的例子中,當訪客已經向下滾動一個頁面,要定位工具提示時,你需要小心:很容易意外地將工具提示放到頁面空間中,但是,卻在瀏覽器的視口中可見區域之外。使用scrollTop()來避免將一個工具提示放在瀏覽器視窗頂部的可視區域之上。

以上所述就是本文的全部內容了,希望大家能夠喜歡。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板