元素scroll系列屬性

2022-09-23 08:17:03 字數 2113 閱讀 6197

scroll翻譯過來,就是滾動的,我們使用scroll系列的相關屬性可以動態的得到該元素的大小、滾動距離等。

scroll系列屬性

作用

element.scrolltop

返回被捲上去的上側距離,返回數值不帶單位

element.scrollleft

返回被捲上去的左側距離,返回數值不帶單位

element.scrollwidth

返回自身實際的寬度,不含邊框,返回數值不帶單位

element.scrollheight

返回自身實際的高度,不含邊框,返回數值不帶單位

1.原先側邊欄是絕對定位。

2.當頁面滾動到一定位置,側邊欄改為固定定位。

3.頁面繼續滾動,會讓返回頂部顯示出來。

分析:1.需要用到頁面滾動事件scroll,因為是頁面滾動,所以事件源是document。

2.滾動到某個位置,就是判斷頁面被捲上去的上部值。

3.頁面被捲上去的頭部:可以通過window.pageyoffset獲得。

4.注意: 元素被捲上去的頭部是element.scrolltop,如果是頁面被捲去的頭部,則是window.pageyoffset。

5.其實這個值 可以通過盒子的 offsettop可以得到,如果大於等於這個值,就可以讓盒子固定定位了。

1

//1. 獲取元素

2var sliderbar = document.queryselector('.slider-bar');

3var banner = document.queryselector('.banner');4//

banner.offesttop 就是被捲去頭部的大小 一定要寫到滾動的外面

5var bannertop =banner.offsettop6//

當我們側邊欄固定定位之後應該變化的數值

7var sliderbartop = sliderbar.offsettop -bannertop;8//

獲取main 主體元素

9var main = document.queryselector('.main');

10var goback = document.queryselector('.goback');

11var maintop =main.offsettop;

12//

2. 頁面滾動事件 scroll

13 document.addeventlistener('scroll', function

() else

24//

4. 當我們頁面滾動到main盒子,就顯示 goback模組

25if (window.pageyoffset >=maintop) else

30 })

需要注意的是,頁面被捲上去的頭部,有相容性問題,因此被捲上去的頭部通常有如下幾種寫法:

1.宣告瞭dtd,使用了document.documentelement.scrolltop

2.未宣告dtd,使用document.body.scrolltop

3.新方法window.pageyoffset和window.pagexoffset, ie9開始支援。

封裝統一方法getscroll(),使用getscroll().left

1

function

getscroll() ;

6}

他們主要用法:

1.offset系列,經常用於獲得元素位置: offsetleft offsettop

2.client經常用於獲取元素大小clientwidth、 clientheight

3.scroll經常用於獲取滾動距離scrolltop、scrollleft

4.注意頁面滾動的距離通過window.pagexoffset獲得

JS offset系列和scroll系列

元素的樣式屬性是無法直接通過 物件 style 屬性來獲取 樣式在style屬性中設定 offset系列 offsetleft 距離左邊位置...

Chart系列(一) Chart的基本元素

如何使用一個chart,則首先必須要了解其組織結構,其次知道其api。 首先,來看看chart組成元素。 axis label 座標軸標籤...

css系列 六種實現元素水平居中方法

一 前言 居中效果在css中很是普通的效果,平時大家所看到的居中效果主要分為三大類 水平居中 垂直居中和水平垂直居中。而其中水平居中相對於後...