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