最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

HTML+CSS+JS實現(xiàn)完美兼容各大瀏覽器的TABLE固定列_javascript技巧

來源:懂視網 責編:小采 時間:2020-11-27 21:37:33
文檔

HTML+CSS+JS實現(xiàn)完美兼容各大瀏覽器的TABLE固定列_javascript技巧

HTML+CSS+JS實現(xiàn)完美兼容各大瀏覽器的TABLE固定列_javascript技巧:BS架構的企業(yè)級應用中,當一個表格列數較多時,用戶一個常見的需求就是把前面幾個重要的列固定住,這樣拖動滾動條時固定的列會方便用戶查看數據,用戶體驗很好。一些重量級的JS組件庫也都有這個功能,那么有沒有更簡單的方法實現(xiàn)這個功能呢? 這個需求常見的
推薦度:
導讀HTML+CSS+JS實現(xiàn)完美兼容各大瀏覽器的TABLE固定列_javascript技巧:BS架構的企業(yè)級應用中,當一個表格列數較多時,用戶一個常見的需求就是把前面幾個重要的列固定住,這樣拖動滾動條時固定的列會方便用戶查看數據,用戶體驗很好。一些重量級的JS組件庫也都有這個功能,那么有沒有更簡單的方法實現(xiàn)這個功能呢? 這個需求常見的

BS架構的企業(yè)級應用中,當一個表格列數較多時,用戶一個常見的需求就是把前面幾個重要的列固定住,這樣拖動滾動條時固定的列會方便用戶查看數據,用戶體驗很好。一些重量級的JS組件庫也都有這個功能,那么有沒有更簡單的方法實現(xiàn)這個功能呢?

這個需求常見的解決方案是使用表格拼接的方法,這個方案如果要制作靜態(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(抖音搜索懂视),直接咨询即可。

文檔

HTML+CSS+JS實現(xiàn)完美兼容各大瀏覽器的TABLE固定列_javascript技巧

HTML+CSS+JS實現(xiàn)完美兼容各大瀏覽器的TABLE固定列_javascript技巧:BS架構的企業(yè)級應用中,當一個表格列數較多時,用戶一個常見的需求就是把前面幾個重要的列固定住,這樣拖動滾動條時固定的列會方便用戶查看數據,用戶體驗很好。一些重量級的JS組件庫也都有這個功能,那么有沒有更簡單的方法實現(xiàn)這個功能呢? 這個需求常見的
推薦度:
  • 熱門焦點
專題
Top
fffffffffffff

抖音扫码关注

手机端二维码

每天分享百科知识!