css 在聊天框中向下滚动 justify-content flex-end

【问题标题】：css scroll down justify-content flex-end in chating boxcss 在聊天框中向下滚动 justify-content flex-end
【发布时间】：2022-01-26 12:06:57
【问题描述】：

我想在 Facebook、Instagram 或专业聊天等聊天框中向下滚动条。 我已经通过在消息框区域中使用名为 justify-content: flex-end; 的 CSS 属性来完成它。 但是，当我在聊天框区域使用justify-content: flex-end; 属性时，滚动条被隐藏，它没有显示。

我想通过 CSS 完成，我不想通过 Javascript 向下滚动。我知道如何通过 Javascript 向下滚动，但是，我想通过 JS 来实现。 我想非常专业，喜欢专业聊天应用或 Facebook、Messenger。

如果你知道 Facebook 是如何做到的，请告诉我

我的例子：

    .conversation .cn-header{
        border-bottom: 1px solid #e5e5e5;
        box-shadow: 0px 1px 2px 0px #e5e5e5;
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 1;
        flex-grow: 1;
        flex-direction: row;
        grid-template-columns:auto;
        grid-template-rows: auto;
        grid-gap: 0;
        grid-template-areas: "profile content";
    }
    .conversation .cn-header .profile{
        display: flex;
        align-items: center;
        justify-content: flex-start;    
    }
    .conversation .cn-header .picture-link{
        grid-area: profile;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: auto;
        padding: 10px 0;
    }
    .conversation .cn-header .picture-link .profile-picture{
        background: url(https://analiq.vip//upload/images/2_1630685233_287449760.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 60px;
        width: 60px;
        border-radius: 100px;
    }
    .conversation .cn-header .content .name{
        cursor: pointer;
        font-size: 18px;
        font-weight: bold;
        color: #2f2f2f;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-transform: capitalize;
    }
    .conversation .cn-header .option .nagivation{
        cursor: pointer;
        display: flex;
        background: #f9f9f9;
        color: #435b66;
        align-items: center;
        justify-content: center;
        border-radius: 100px;
        padding: 3px;
        margin-right: 10px;
    }
    .conversation .cn-header .content .active-status{
        color: #00d500;
        font-size: 15px;
        font-weight: 300;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-transform: capitalize;
    }
    .conversation .message-content{
        height: calc(100vh - 100px);
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: space-between;
        flex-grow: 1;
    }
    .conversation .message-content .message{
        padding: 5px 10px; 
    }
    .conversation .message-content .message-row{
        display: flex;
        flex-flow: column;
        justify-content: flex-end;
        padding-bottom: 20px;
        height: calc(100vh - 150px);
        overflow-x: hidden;
        overflow-y: auto;
    }
    .conversation .message-content .message-row .text{
        line-height: normal;
        display: block;
        font-size: 18px;
        font-weight: 400;
    }
    .conversation .message-content .message-row .incoming,
    .conversation .message-content .message-row .outgoing{
        margin: 5px 8px 5px 0px;
    }
    .conversation .message-content .message-row .outgoing{
        align-self: flex-end;
        display: inherit;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        background: #2196f3;
        color: #ffff;
        padding: 5px 16px;
        border-radius: 20px;
    }
    .conversation .message-content .message-row .incoming{
        align-self: flex-start;
        display: inherit;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        background: #f1f1f1;
        color: #050505;
        padding: 5px 16px;
        border-radius: 20px;
    }
    .conversation .message-content .message-form{
        display: grid;
        flex-direction: row;
        align-content: flex-start;
        align-items: center;
        justify-content: flex-start;
        grid-template-columns:90% 23px;
        grid-template-rows: auto;
        grid-gap:0;
        grid-template-areas: "input-field tools submit";
    }
    .conversation .message-content .message-form .tools{
        grid-area: tools;
        display: grid;
        grid-auto-flow: column;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-direction: row;
        row-gap: 10px;
        column-gap: 10px;
    }
    .conversation .message-content .message-form .tools div{
        display: flex;
        color: #6c6c6c;
        cursor: pointer;
    }
    .conversation .message-content .message-form .tools div:hover{
        color: #2196f3;
    }
    .conversation .message-content .message-form .input-field{
        display: flex;
        align-items: center;
        background: #f7f7f7;
        border-radius: 100px;
        padding: 10px 20px;
        margin-left: 10px;
    }
    .conversation .message-content .message-form .input-field input[type=text]{
        background: inherit;
        border: inherit;
        border-radius: 0;
        padding: 0;
        margin: 0;
        outline: 0;
        width: 100%;
        padding-right: 15px;
        font-size: 18px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .conversation .message-content .message-form .input-field .emoji{
        display: flex;
        color: #6c6c6c;
        cursor: pointer;
    }
    .conversation .message-content .message-form .input-field .emoji:hover{
        color: #2196f3;
    }
    .conversation .message-content .message-form .submit{
        grid-area: submit;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .conversation .message-content .message-form .submit button[type=submit]{
        background: none;
        color: #9e9e9e;
        border: 0;
        outline: 0;
        display: flex;
        padding: 0;
        margin: 0;
    }
<div class="conversation" role="conversation">
    <div class="message-content" role="content">
        <div class="message">
            <div class="message-row"> 
                <div class="outgoing">
                    <div class="text">Hi</div>
                </div> 
                <div class="incoming">
                    <div class="text">Hi</div>
                </div> 
                <div class="outgoing">
                    <div class="text">How are you ?</div>
                </div> 
                <div class="incoming">
                    <div class="text">I am fine.</div>
                </div> 
                <div class="incoming">
                    <div class="text">and you?</div>
                </div> 
                <div class="outgoing">
                    <div class="text">Thanks! I am also fine</div>
                </div> 
                <div class="incoming">
                    <div class="text">How are you doing</div>
                </div>
                <div class="outgoing">
                    <div class="text">Nothing special</div>
                </div>
                <div class="outgoing">
                    <div class="text">I am just doing code for my new apps</div>
                </div>
                <div class="incoming">
                    <div class="text">WOW!! ????</div>
                </div>
                <div class="incoming">
                    <div class="text">What that's the name of the app?</div>
                </div>
                <div class="outgoing">
                    <div class="text">Quick Sender</div>
                </div> 
                <div class="outgoing">
                    <div class="text">Nothing! Have you take evening foods?</div>
                </div>
                <div class="incoming">
                    <div class="text">Not yet. I'll goto outside</div>
                </div> 

            </div>
        </div>
        <div class="form">
            <form method="post" autocomplete="off" class="message-form">

                <div class="input-field">
                    <input type="text" placeholder="Type a message" name="message">
                    <div class="emoji">
                        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-emoji-wink" viewBox="0 0 16 16">
                          <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                          <path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm1.757-.437a.5.5 0 0 1 .68.194.934.934 0 0 0 .813.493c.339 0 .645-.19.813-.493a.5.5 0 1 1 .874.486A1.934 1.934 0 0 1 10.25 7.75c-.73 0-1.356-.412-1.687-1.007a.5.5 0 0 1 .194-.68z"/>
                        </svg>
                    </div>
                </div>
 

                <div class="submit">
                    <button type="submit" class="send">
                        <svg xmlns="http://www.w3.org/2000/svg" width="43" height="43" fill="currentColor" class="bi bi-telegram" viewBox="0 0 16 16">
                          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"/>
                        </svg>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

【问题讨论】：

    标签： javascript jquery css flexbox scrollbar


    【解决方案1】：

    你需要设置overflow-y属性来滚动消息容器并使用css自定义设计滚动条

      .conversation .cn-header{
        border-bottom: 1px solid #e5e5e5;
        box-shadow: 0px 1px 2px 0px #e5e5e5;
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 1;
        flex-grow: 1;
        flex-direction: row;
        grid-template-columns:auto;
        grid-template-rows: auto;
        grid-gap: 0;
        grid-template-areas: "profile content";
    }
    .conversation .cn-header .profile{
        display: flex;
        align-items: center;
        justify-content: flex-start;    
    }
    .conversation .cn-header .picture-link{
        grid-area: profile;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: auto;
        padding: 10px 0;
    }
    .conversation .cn-header .picture-link .profile-picture{
        background: url(https://analiq.vip//upload/images/2_1630685233_287449760.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 60px;
        width: 60px;
        border-radius: 100px;
    }
    .conversation .cn-header .content .name{
        cursor: pointer;
        font-size: 18px;
        font-weight: bold;
        color: #2f2f2f;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-transform: capitalize;
    }
    .conversation .cn-header .option .nagivation{
        cursor: pointer;
        display: flex;
        background: #f9f9f9;
        color: #435b66;
        align-items: center;
        justify-content: center;
        border-radius: 100px;
        padding: 3px;
        margin-right: 10px;
    }
    .conversation .cn-header .content .active-status{
        color: #00d500;
        font-size: 15px;
        font-weight: 300;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-transform: capitalize;
    }
    .conversation .message-content{
        height: calc(100vh - 100px);
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: space-between;
        flex-grow: 1;
    }
       .conversation .message-content .message {
        padding: 5px 10px;
        overflow-y: scroll;
      }
      .conversation .message-content .message::-webkit-scrollbar {
        width: 10px;
        border-radius: 5px;
      }

      .conversation .message-content .message::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 5px;
        background-color: darkgrey;
      }
    .conversation .message-content .message-row{
        display: flex;
        flex-flow: column;
        justify-content: flex-end;
        padding-bottom: 20px;
        height: calc(100vh - 150px);
        overflow-x: hidden;
        overflow-y: auto;
    }
    .conversation .message-content .message-row .text{
        line-height: normal;
        display: block;
        font-size: 18px;
        font-weight: 400;
    }
    .conversation .message-content .message-row .incoming,
    .conversation .message-content .message-row .outgoing{
        margin: 5px 8px 5px 0px;
    }
    .conversation .message-content .message-row .outgoing{
        align-self: flex-end;
        display: inherit;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        background: #2196f3;
        color: #ffff;
        padding: 5px 16px;
        border-radius: 20px;
    }
    .conversation .message-content .message-row .incoming{
        align-self: flex-start;
        display: inherit;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        background: #f1f1f1;
        color: #050505;
        padding: 5px 16px;
        border-radius: 20px;
    }
    .conversation .message-content .message-form{
        display: grid;
        flex-direction: row;
        align-content: flex-start;
        align-items: center;
        justify-content: flex-start;
        grid-template-columns:90% 23px;
        grid-template-rows: auto;
        grid-gap:0;
        grid-template-areas: "input-field tools submit";
    }
    .conversation .message-content .message-form .tools{
        grid-area: tools;
        display: grid;
        grid-auto-flow: column;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-direction: row;
        row-gap: 10px;
        column-gap: 10px;
    }
    .conversation .message-content .message-form .tools div{
        display: flex;
        color: #6c6c6c;
        cursor: pointer;
    }
    .conversation .message-content .message-form .tools div:hover{
        color: #2196f3;
    }
    .conversation .message-content .message-form .input-field{
        display: flex;
        align-items: center;
        background: #f7f7f7;
        border-radius: 100px;
        padding: 10px 20px;
        margin-left: 10px;
    }
    .conversation .message-content .message-form .input-field input[type=text]{
        background: inherit;
        border: inherit;
        border-radius: 0;
        padding: 0;
        margin: 0;
        outline: 0;
        width: 100%;
        padding-right: 15px;
        font-size: 18px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .conversation .message-content .message-form .input-field .emoji{
        display: flex;
        color: #6c6c6c;
        cursor: pointer;
    }
    .conversation .message-content .message-form .input-field .emoji:hover{
        color: #2196f3;
    }
    .conversation .message-content .message-form .submit{
        grid-area: submit;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .conversation .message-content .message-form .submit button[type=submit]{
        background: none;
        color: #9e9e9e;
        border: 0;
        outline: 0;
        display: flex;
        padding: 0;
        margin: 0;
    }
    <div class="conversation" role="conversation">
    <div class="message-content" role="content">
        <div class="message">
            <div class="message-row"> 
                <div class="outgoing">
                    <div class="text">Hi</div>
                </div> 
                <div class="incoming">
                    <div class="text">Hi</div>
                </div> 
                <div class="outgoing">
                    <div class="text">How are you ?</div>
                </div> 
                <div class="incoming">
                    <div class="text">I am fine.</div>
                </div> 
                <div class="incoming">
                    <div class="text">and you?</div>
                </div> 
                <div class="outgoing">
                    <div class="text">Thanks! I am also fine</div>
                </div> 
                <div class="incoming">
                    <div class="text">How are you doing</div>
                </div>
                <div class="outgoing">
                    <div class="text">Nothing special</div>
                </div>
                <div class="outgoing">
                    <div class="text">I am just doing code for my new apps</div>
                </div>
                <div class="incoming">
                    <div class="text">WOW!! ?</div>
                </div>
                <div class="incoming">
                    <div class="text">What that's the name of the app?</div>
                </div>
                <div class="outgoing">
                    <div class="text">Quick Sender</div>
                </div> 
                <div class="outgoing">
                    <div class="text">Nothing! Have you take evening foods?</div>
                </div>
                <div class="incoming">
                    <div class="text">Not yet. I'll goto outside</div>
                </div> 

            </div>
        </div>
        <div class="form">
            <form method="post" autocomplete="off" class="message-form">

                <div class="input-field">
                    <input type="text" placeholder="Type a message" name="message">
                    <div class="emoji">
                        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-emoji-wink" viewBox="0 0 16 16">
                          <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                          <path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm1.757-.437a.5.5 0 0 1 .68.194.934.934 0 0 0 .813.493c.339 0 .645-.19.813-.493a.5.5 0 1 1 .874.486A1.934 1.934 0 0 1 10.25 7.75c-.73 0-1.356-.412-1.687-1.007a.5.5 0 0 1 .194-.68z"/>
                        </svg>
                    </div>
                </div>
 

                <div class="submit">
                    <button type="submit" class="send">
                        <svg xmlns="http://www.w3.org/2000/svg" width="43" height="43" fill="currentColor" class="bi bi-telegram" viewBox="0 0 16 16">
                          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"/>
                        </svg>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

    【讨论】：

      猜你喜欢
      • 2022-01-15
      • 2016-07-07
      • 2017-06-11
      • 2015-12-13
      • 2013-12-06
      • 1970-01-01
      • 1970-01-01
      • 2022-07-19
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode