設置一個塊級做用域溢出的效果,只須要在外部塊的位置上設置overflow:scroll和height:xx便可。css
此時,塊級做用域的內容位移超出外部塊的位移就會出現滾動條,當內部塊滾動時,咱們能看到滾動效果。這裏的實現方式有二種,對父元素(簡稱外部塊)進行設置(top:0和bottom:0)能固定滾動區域,還有一種設置父元素的高度height:xx來完成滾動效果。ajax
若是你看到的滾動條是瀏覽器邊緣的滾動條,那麼說明沒有綁定scroll滾動事件。瀏覽器
以往,咱們使用他是爲了避免讓文本內容暴露出來,把子元素和父元素的資源隔絕開來,若是要經過一個http端口訪問包含的數據內容,通常要加載數據時會使用這個方法,用戶鼠標滾動到相應的位置纔會去同步加載數據,如一個頁面的list列表數據從後臺獲取,經過ajax更新數據同步到HTML上。還有滾動綁定事件的做用,這就是視覺交叉的功能。spa
overflow滾動包含overflow-x 和overflow-y 以及overflow直接滾動多餘的部分,不過水平滾動和垂直滾動的效果不一樣,咱們能夠根據滾動的width寬和height高的大小來作不一樣的滾動事件處理。事件
overflow滾動的事件處理,在css上要寫三個關鍵因素,一爲position:absolute,二爲overflow:scroll,三爲top:位移,bottom:位移(或height固定),若是咱們在組件上調用其餘事件時,使用到overflow滾動的效果,就會讓組件變得更加豐富多彩。資源
若是你忘了設置overflow:scroll和高度height或top和bottom,你可能會一直在這個地方繞彎路,因此爲了不出現滾動綁定事件,咱們須要設置overflow和位移量。作用域