萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jQuery頁面的滾動位置scrollTop、scrollLeft

jQuery頁面的滾動位置scrollTop、scrollLeft

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

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

   代碼如下:

  $(document).scrollTop()

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

   代碼如下:

  $(document).scrollLeft()

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

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

copyright © 萬盛學電腦網 all rights reserved