overflow的滾動有哪些重要性

這次帶給大家overflow的滾動有哪些重要性，overflow的滾動重要性的注意事項有哪些，下面就是實戰案例，一起來看一下。

原理

設定一個區塊級作用域溢出的效果，只需要在外部區塊的位置上設定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和位移量。

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

html+css+jquery做選項卡

html超級連結a的click事件之後跳轉href所指向的位址

HTML中定義多個class屬性無效

以上是overflow的滾動有哪些重要性的詳細內容。更多資訊請關注PHP中文網其他相關文章！