在網頁開發過程中,有時我們需要讓頁面固定不動,不能滾動。一種常用的實現方式是利用jQuery來實現。
$(document.body).css({ "overflow-x":"hidden", "overflow-y":"hidden" });
上述代碼將body元素的overflow-x屬性和overflow-y屬性都設置為hidden,使得頁面在水平和垂直方向都不能滾動。
如果只需要固定垂直方向,可以將overflow-x屬性設置為hidden,overflow-y屬性設置為scroll;如果只需要固定水平方向,可以將overflow-x屬性設置為scroll,overflow-y屬性設置為hidden。
$(document.body).css({ "overflow-x":"hidden", "overflow-y":"scroll" });
除了針對body元素,我們也可以利用jQuery的scrollTop()方法來實現固定頁面不能滾動。下面代碼中,假設我們要固定id為content的div元素:
var scrollTop = $(window).scrollTop(); $("#content").css("position","fixed").css("top",-scrollTop);
代碼中,我們獲取當前頁面垂直方向的滾動距離scrollTop,將id為content的元素的position屬性設置為fixed,再將其top屬性設置為負的scrollTop值,這樣就能實現固定不動的效果。
總之,使用jQuery可以方便地實現頁面的靜止效果,能提高網頁的視覺效果和用戶體驗。
下一篇div a 區別