使用 justify-content: flex-end 時無法 scroll 滑動畫面
Mar 13, 2021
目標
使用 vue.js 做出如上圖聊天室的功能與樣子。
- 最新的訊息置底
- 可滾動看上方歷史訊息。
遇到問題
直覺想到使用以下方法：
display: flex;
flex-direction: column;
justify-content: flex-end; //置底
overflow: scroll; // 溢出時能滑動看更多訊息
在訊息還沒滿出來時一切都很完美，直到訊息超過可讀範圍後，發現加了 “overflow: scroll;” 卻無法滾動畫面！
找尋解法
下關鍵字 ”justify-content flex-end overflow scroll” 東查西查，原來大家都是為了做聊天視窗遇到這個問題ＸＤ
找到很多種解法，但用起來都沒效（有的說在 FireFox 才有效），而且還有超複雜要動用到 JavaScript 的方法。
瀏覽了大約一小時，看起來其實都是用繞開的方式解決這個狀況。
既然如此，就決定自己想一個簡單的！
自創解法
靈感來源：
找尋解法時看到有人說用 “flex-direction: column-reverse;”
確實是能置底，但順序卻反過來不是我想要的成果。
突發奇想：
那用反序處理 for 迴圈呢？
就等於反兩次回到正的順序，又可以置底。
事不宜遲立刻查查看，下關鍵字 “v-for reverse”，立刻看到方法來試試：
<template>
v-for=”chatData in chatDatas.slice().reverse()”
<style scoped>
display: flex;
flex-direction: column-reverse;
overflow: auto;
搭配起來就成功啦😭
覺得超感動的～
不能只有我知道！
分享給需要的人💛