這個回應留給我自己當警惕
給看不懂或太長不想看但又想知道發生什麼事的人
我用目測測量房子尺吋然後我賣給了村民一個只能關起來而沒辦法上掀打開的窗戶,之後我遭到村民毆打。
經過高手指點,可以用calc()來計算最大尺寸
測試後果然好上許多,但是我注意到瀏覽器的支援度好像沒有統一..
故...
max-height: calc(100% - 120px);
max-height: -ms-calc(100% - 120px);
max-height: -moz-calc(100% - 120px);
max-height: -webkit-calc(100% - 120px);
我全都要!...對不起我只能想到這麼寫而已....
另外我為了聊天訊息能自動滾動到最下面使用了
scroll-snap-type: y proximity;
再配合
.chat-messages > div:last-child {
scroll-snap-align: end;
}
讓訊息自動滾動到最下面
原理是scroll-snap-type設定成 proximity (我一開始設定成 mandatory 然後就滾不上去ww)
可以在靠近時觸發 scroll-snap-align 設定的值,這邊我設定end,
每次送出訊息一定都會是靠近end,所以可以達成自動滾動..
我真的以為我可以用這個邪道方法來自動滾動,而不使用javascript
但經過測試目前只有Google Chrome支援這方法,其餘瀏覽器都不能自動靠近..
即使加上-moz -webkit-等等之類的也不行...
只是手動測試是有效的,但就是沒辦法像Google Chrome把它當成自動滾動用
而且不加上
.chat-messages > div:first-child {
scroll-snap-align: start;
}
這個的話,Firefox居然還沒辦法用滑鼠滾輪往上滾動訊息..
我以為用css方法達成而不用javascript只是個單純的技術負債,
但感覺上我好像是跟不是很厲害的小惡魔借了一個不是很厲害的小法術
除了死後要付出靈魂,每天還要扣精神值...(這只是比喻,其實錯是在我亂用)
我想,我還是想辦法找時間學javascript好了.....(/ω\)