這個需求常見的解決方案是使用表格拼接的方法,這個方案如果要制作靜態(tài)的網頁,或者功能簡單的動態(tài)頁面,邏輯比較簡單,技術上也不復雜,很容易實現(xiàn),但是如果要做成組件,動態(tài)功能較多的話,就需要寫大量的冗余代碼,難以維護,甚至于一個簡單的功能,都需要寫很多的代碼,比如事件處理等,這個方法就顯得比較笨拙,靈活性很差,不是一個好的方案。
經過長時間的分析研究,各種場景的試驗,我們找到了一個兼容性非常好的解決方案,總體上來講采用的是定位計算的方法,下面貼出代碼,然后做個解讀。
一、總體結構:
頁面基本元素為DIV+TABLE,固定的列采用絕對定位的方式固定,每一列都要指定固定寬度,為了解決橫豎滾動條的問題,表頭和表體的外面分別包裹兩層DIV,滾動條采用虛擬的方式,固定在固定位置通過JS控制模擬正常DIV滾動條的效果。
二、定位:
固定的列要絕對定位,通過left屬性控制左側位移,為了保證固定列浮動在上方,設置z-index為1,。為了保證有豎滾動條時的正常顯示,表體的外層DIV為絕對定位,由此導致滾動條也都要絕對定位。還有,表頭和表體以及滾動條的內層DIV通過margin-left屬性控制左側外邊距,把固定列的偏移量空余出來。
二、寬度計算:
每一列的寬度都要指定固定的值,并且要注意一個關鍵點,就是還要加上min-width和max-width屬性,這兩個屬性和width值相等,表頭表體的內層DIV,寬度為auto,自適應表格寬度,外層DIV寬度為100%,最外層的DIV通過padding-right屬性控制右側內邊距,將豎滾動條的位置空余出來。
三、高度計算:
因為絕對定位的存在,整個表格組件的高度要指定,可以通過計算得出,豎滾動條的top值也需要進行計算。
四、滾動條:
本方案一個突出特點,就是虛擬的滾動條,就是通過一個和表格一樣寬、高度為一個像素的DIV模擬出表體DIV的橫向滾動條,豎滾動條同理。之所以采用這個形式,一個是橫向滾動條這樣處理比較美觀,豎滾動條這樣處理之后,表頭和表體的外層DIV寬度不用計算了,都為100%,否則存在滾動條時,表頭和橫向滾動條要空出豎滾動條寬度的位移,否則無法對齊,這個計算倒不復雜,但是某些情況下存在問題,在此不展開了。
五、滾動事件:
因為表體的滾動條都隱藏了,導致鼠標滾輪不起作用了,這樣就需要用JS處理鼠標滾輪事件,本文的樣例代碼兼容常見瀏覽器。這里的重點是同時寫了onmousewheel和onwheel事件,onmousewheel兼容IE,在計算滾動距離時,注意deltaY和wheelDelta屬性的差異即可。
六、優(yōu)缺點分析:
本文的解決方案已經經過精簡,重點是講清楚原理,在我們的實際中,非常的復雜。這個設計考慮了非常多的兼容性,包括了瀏覽器的兼容性和各種場景的兼容性,如果需求簡單,還有簡化的空間。
這個方案的優(yōu)點是,如果要做組件的話,因為HTML結構簡單,表頭和表體都是一個TABLE,JS控制代碼非常干凈,維護容易。缺點就是計算過多。我們認為該方案比較適用于開發(fā)組件的情況,靜態(tài)頁面就有點小題大作了。
以上所述就是本文的全部內容了,希望大家能夠喜歡。
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。