溢出：滚动-使我的电话按钮/扬声器滚动

Question

由于overflow-y: scroll;，顶部的我的电话按钮和扬声器向下滚动。我需要overflow-y: scroll;才能滚动消息-如何在保持滚动效果的同时添加按钮？

        $(document).ready(function () {
            var m = -1;
            var msg = [
                "Hi Chris, you have an appointment tomorrow at 4:20pm",
                "Thank you, I totally forgot! See you then.",
                "Ooops, I forgot to ask, what do you charge?",
                "It's $40 for the hour. Is that ok?",
                "Perfect! See you tomorrow.",
                ""
            ];
            var from = [
                "Jeff <small>(Automated)</small>",
                "Chris",
                "Chris",
                "Jeff <small>(Manual)</small>",
                "Chris",
                "none"
            ];
            setInterval(function () {

                m++;

                if (from[m] != 'none') {
                    if (m >= msg.length) {
                        m = -1;
                        $("#chat").children().fadeOut(2000);
                    }
                    else {
                        $('#chat').append('<div class="' + from[m] + '">' + from[m] + '</div><div class="message">' + msg[m] + '</div>');

                        var wtf = $('#chat');
                        var height = wtf[0].scrollHeight;
                        wtf.scrollTop(height);
                    }
                }
            }, 5000);
        });

        #chat {
            position: relative;
            width: 100%;
            height: 540px;
            margin: auto;
            border: 16px black solid;
            border-top-width: 60px;
            border-bottom-width: 60px;
            border-radius: 36px;
            overflow-y: scroll;
            background-color: #fff;
        }
     
     /** THIS IS THE ISSUE **/
     #chat:before {
                content: '';
                display: block;
                width: 60px;
                height: 5px;
                position: absolute;
                top: -30px;
                left: 50%;
                transform: translate(-50%, -50%);
                background: #333;
                border-radius: 10px;
            }

        #chat:after {
            content: '';
            display: block;
            width: 35px;
            height: 35px;
            position: absolute;
            left: 50%;
            bottom: -65px;
            transform: translate(-50%, -50%);
            background: #333;
            border-radius: 50%;
       }
       /** ISSUE END **/
       
        .Jeff {
            background: #fff;
            border: 1px solid #aaa;
            margin: 10px;
            border-radius: 25px;
            padding: 10px;
        }

        .Jeff {
            background: #f12545;
            width: 100%;
            color: #fff;
            padding: 5px;
            text-align: center;
        }

            .Jeff:not(:first-child), .Chris:not(first-child) {
                margin-top: 30px;
            }

        .Chris {
            background: #0E112B;
            width: 100%;
            color: #fff;
            padding: 5px;
            text-align: center;
        }

 <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
 
 <div id="chat"></div>