元素滾動 scroll 系列

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

如果瀏覽器的高（或寬）度不足以顯示整個頁面時，會自動出現滾動條。當滾動條向下滾動時，頁面上面被隱藏掉的高度，我們就稱為頁面被卷去的頭部。滾動條在滾動時會觸發 onscroll事件。

原先側邊欄是絕對定位

當頁面滾動到一定位置，側邊欄改為固定定位

頁面繼續滾動，會讓 返回頂部顯示出來

需要用到頁面滾動事件 scroll  因為是頁面滾動，所以事件源是document

滾動到某個位置，就是判斷頁面被卷去的上部值。

頁面被卷去的頭部：可以通過window.pageyoffset 獲得  如果是被卷去的左側window.pagexoffset

注意，元素被卷去的頭部是element.scrolltop  , 如果是頁面被卷去的頭部 則是 window.pageyoffset

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

//

1. 獲取元素
var sliderbar = document.queryselector('.slider-bar');
var banner = document.queryselector('.banner');
就是被卷去頭部的大小 一定要寫到滾動的外面
var bannertop =banner.offsettop
//當我們側邊欄固定定位之後應該變化的數值
var sliderbartop = sliderbar.offsettop -bannertop;
//獲取main 主體元素
var main = document.queryselector('.main');
var goback = document.queryselector('.goback');
var maintop =main.offsettop;
//2. 頁面滾動事件 scroll
document.addeventlistener('scroll', function
() 
else
//4. 當我們頁面滾動到main盒子，就顯示 goback模組
if (window.pageyoffset >=maintop) 
else
})

宣告了 dtd，使用 document.documentelement.scrolltop

未宣告 dtd，使用  document.body.scrolltop

新方法 window.pageyoffset和 window.pagexoffset，ie9 開始支援

function

getscroll() ;
} 使用的時候 getscroll().left
他們主要用法：
1.offset系列 經常用於獲得元素位置    offsetleft  offsettop
2.client經常用於獲取元素大小  clientwidth clientheight
3.scroll 經常用於獲取滾動距離 scrolltop  scrollleft  
4.注意頁面滾動的距離通過 window.pagexoffset  獲得
 
判斷元素是否可以滾動scroll
因為要做類似於微博的懶載入功能，所以要寫乙個懶載入元件lazyload.js。寫的過程中，有乙個很坑的問題 比如一般監聽整個body頁面的lazyload，則需要監聽window.onscroll事件。如果每屏載入10條資料，但是電腦螢幕大了，10條資料也沒有佔滿螢幕，此時就沒法觸發body的滾動，...
頁面滾動事件scroll
在mounted鉤子函式裡面註冊scroll事件 mounted window.addeventlistener scroll this.about methods 判斷元素到達當前視窗的什麼位置 簡介 let isup true let titlediv document.getelementsb...
js中scroll滾動相關
scroll，滾動，一般討論的是網頁整體與瀏覽器之間的關係。屬性 方法 解釋element.scrollheight 返回元素的整體高度。element.scrollwidth 返回元素的整體寬度。element.scrollleft 返回元素左邊緣與檢視之間的距離。element.scrollto...