js scroll相關內容

2021-09-13 01:40:23 字數 1314 閱讀 9020

看下面這段**:

父元素的高度小於子元素的高度,子元素的內容根據父元素的視區會有內容裁剪,這時我們設定父元素的overflow屬性值為auto,我們可以看到此時顯示了滾動條。

那麼問題來了,究竟是以哪個元素為視窗,滾動條是屬於哪個元素呢?通過設定background-color,可以知道,是以parent高度為視窗,滾動條也是屬於parent元素的。

看下面這段**:

onscroll為元素的滾動條滾動時觸發的事件,同時通過這段**也驗證了,滾動條是屬於parent元素的。

scrolltop:滾動條當前位置距離滾動條頂部的高度,也就是相對于父元素頂部,子元素被隱藏內容的高度;

只是dom元素的乙個屬性(不包括window和document)。

看下面這段**:

首先在控制台會輸出乙個0. //這是body元素的scrolltop值;

然後滾動滾動條的時候,會列印觸發每次滾動事件時scrolltop的值。

現在我們知道了如何獲取scrolltop的值,那麼如何改變呢?

我們可以看到當重新整理頁面時,滾動條直接顯示在中間位置,所以我們通過直接給scrolltop賦值就可以改變滾動條的位置。

除了scrolltop屬性外,dom元素還有scrollheight,scrollwidth,scrollleft等與滾動條相關的屬性,這些屬性表達的含義不同,但是用法都是相同,值得注意的是,這些屬性都是唯讀的。

既然dom元素可以通過scrolltop屬性獲取或是設定滾動條的位置,那麼document和window如何操作呢?

這三個屬性,都是window物件的方法,也是全域性的方法。

window.scroll(x:***,y:***):把視窗滾動到指定的位置;

window.scrollto(x,y):與window.scroll相同

window.scrollby(x,y):把視窗相對x,y滾動

window.scrollby(10,-20)//把視窗向右移動10px,向上移動20px。

ORACLE相關內容

1 em,dbca,netca,netmgr出現亂碼方案 cd oracle home jre lib mv font.properties font.properties.bak mv font.properties.zh font.properties em,dbca,netca,netmgr詳...

JVM相關內容

本地 native code 每個因素對記憶體占用的影響又會隨著應用程式 執行環境和系統平台的不同而變化,那怎樣計算總的記憶體佔用量?是的,想得到乙個準確的數字不是那麼容易,因為 你很難控制本地 native 部分。你能控制的部分只有堆大小 xmx,類占用的記憶體 xx maxpermsize,還有...

指標相關內容

1.指標是變數,佔4位元組,存放的是位址 2.指標型別與零值比較 if n null 或者if n null 3.野指標 int p 空指標 int p null 避免野指標 以char型別為例 char p char mallloc sizeof char 10 要包含標頭檔案 include 使...