JS基礎 關於滾動條scroll

2021-10-09 14:24:28 字數 1616 閱讀 6031

這裡主要介紹滾動條的位置,查詢文件當前水平和垂直的滾動的畫素數,以及怎麼改變他們的值

我們可以發現在很多網頁的導航以及側邊導航都根據了滾動條的長度來進行了一些設定,那麼我們如何獲取他呢?

var scrolltop = document.documentelement.scrolltop || document.body.scrolltop;

var scrollleft = document.documentelement.scrollleft || document.body.scrollleft;

當然在確定我們使用的瀏覽器版本的情況下,如果能使用第一種,當然是以一種更為簡單明瞭,所有我們也可以這樣封裝方便後續直接使用

/**

* 獲取滾動條的距離

* @returns 返回文件當前水平和垂直的滾動的畫素數的物件

*/getscrollpx()

}else}}

,

scroll(x,y),scrollto(x,y) 把內容滾動到指定的座標,絕對移動當前頁面有滾動條語法:window.scrollto(x,y)

scrollby(x,y) 滾動條累加,在原來的基礎之上,相對移動當前頁面有滾動條

lang

="en"

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

>

documenttitle

>

>

body,

html

divstyle

>

head

>

>

>

div>

body

>

html

>

初始狀態

改變scrollto(x,y) 的值

這裡我們可以發現,scrollto(x,y) 是乙個絕對單位,我們可以直接設定他的x,y來控制位置,那麼如果越界了怎麼辦呢?

我們會發現他始終有乙個最大值,為我們設定的寬高減去視口,那麼回到初始值觀察一下 scrollby(x,y) !

我們可以發現他每一次都是累加,但是同樣也都不能越界,我們將上面的設定的body和html的樣式刪除那麼還有沒有用呢?看下面:

我們可以發現,當頁面沒有滾動條的時候,對滾動條的設定是沒有用的

總結 scrollto(x,y)和scrollby(x,y)的共同點和不同點

共同點

不同點

CSS定義Scroll滾動條樣式。

scrollbar face color 000000 scrollbar shadow color ffc300 scrollbar highlight color 000000 scrollbar 3dlight color ffc300 scrollbar darkshadow color 0...

關於滾動條

定義滾動條軌道 style 3 webkit scrollbar track 定義滾動條高寬及背景 style 3 webkit scrollbar 定義滑塊 style 3 webkit scrollbar thumb 要在兩個div裡面顯示滾動條 1.首先div需要設定高度 2.內容必須超過di...

有關滾動條Scroll樣式的設定

1.overflow內容溢位時的設定 設定被設定物件是否顯示滾動條 overflow x水平方向內容溢位時的設定 overflow y垂直方向內容溢位時的設定 以上三個屬性設定的值為visible 預設值 scroll hidden auto。2 scrollbar 3d light color立體...