首頁 > web前端 > html教學 > overflow的滾動有哪些重要性

overflow的滾動有哪些重要性

php中世界最好的语言
發布: 2018-02-22 10:07:41
原創
2382 人瀏覽過

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

原理

設定一個區塊級作用域溢出的效果,只需要在外部區塊的位置上設定overflow:scroll和height:xx即可。

此時,區塊級作用域的內容位移超出外部區塊的位移就會出現捲軸,當內部區塊滾動時,我們能看到滾動效果。這裡的實作方式有二種,對父元素(簡稱外部區塊)進行設定(top:0和bottom:0)能固定捲動區域,還有一種設定父元素的高度height:xx來完成捲動效果。

如果你看到的捲軸是瀏覽器邊緣的捲軸,那麼就說明沒有綁定scroll滾動事件。

以往,我們使用他是為了不讓文字內容暴露出來,把子元素和父元素的資源隔絕開來,如果要透過一個http埠存取包含的資料內容,一般要載入資料時會使用這個方法,使用者滑鼠滾動到對應的位置才會去同步載入數據,如一個頁面的list列表資料從後台獲取,透過ajax更新資料同步到HTML上。還有滾動綁定事件的作用,這就是視覺交叉的功能。

滾動事件

overflow滾動包含overflow-xoverflow-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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板