The picture affects the chat content to roll to the bottom, how to solve it?

<div id="List" style="height: 200px;overflow-y: scroll">
    <ul id="chat-list" class="m-chat-list p-chat-list">
        <li class="u-msg item-me session-chat">
            <div idclient="cdb11992c7d2bfa1adfa8950f3fc5e9d" time="1529476888002" flow="out" type="file" style="overflow: hidden; text-align: left;">
                <a class="msg-head"><span class="ivu-avatar ivu-avatar-circle ivu-avatar-large ivu-avatar-image"><img src="../../../../static/img/avatar/unknown.png"></span></a>
                <span class="msg-text"><a href="https://nim.nosdn.127.net/NDMxNDk0Ng==/bmltYV8xOTUzNjU2NzgyXzE1Mjk0NzY4ODc2OTlfZTFkNTgwMjktNmVjNC00YWY2LWE3NTctNTIzZTA5YTJmY2Nh" target="_blank"><i class="u-icon icon-file"></i>SAAS (1).xlsx</a></span> <!---->
            </div>
        </li>
        <li class="u-msg item-time session-chat">
            <div>---- 15:56 ----</div>
        </li>
        <li class="u-msg item-me session-chat">
            <div idclient="6c515051c0acfe5dd87b36932c7467f0" time="1529481377228" flow="out" type="text" style="overflow: hidden; text-align: left;">
                <a class="msg-head"><span class="ivu-avatar ivu-avatar-circle ivu-avatar-large ivu-avatar-image"><img src="../../../../static/img/avatar/unknown.png"></span></a>
                <span class="msg-text"><div>lalal</div> <div id="6c515051c0acfe5dd87b36932c7467f0"></div></span> <!---->
            </div>
        </li>
        <li class="u-msg item-me session-chat">
            <div idclient="e7ac26afc38afd08ea8a8d8d0e200b96" time="1529481479525" flow="out" type="text" style="overflow: hidden; text-align: left;">
                <a class="msg-head"><span class="ivu-avatar ivu-avatar-circle ivu-avatar-large ivu-avatar-image"><img src="../../../../static/img/avatar/unknown.png"></span></a>
                <span class="msg-text"><div>dfadsfas</div> <div id="e7ac26afc38afd08ea8a8d8d0e200b96"></div></span> <!---->
            </div>
        </li>
        <li class="u-msg item-me session-chat">
            <div idclient="cc3f28109507cb8e107e03dc6dfd18ff" time="1529481511642" flow="out" type="text" style="overflow: hidden; text-align: left;">
                <a class="msg-head"><span class="ivu-avatar ivu-avatar-circle ivu-avatar-large ivu-avatar-image"><img src="../../../../static/img/avatar/unknown.png"></span></a>
                <span class="msg-text"><div>adfasdfa</div> <div id="cc3f28109507cb8e107e03dc6dfd18ff"></div></span> <!---->
            </div>
        </li>
        <li class="u-msg item-time session-chat">
            <div>---- 16:53 ----</div>
        </li>
        <li class="u-msg item-me session-chat">
            <div idclient="3a7f635b911f0b1d6cb2621f99dd8544" time="1529484819555" flow="out" type="image" style="overflow: hidden; text-align: left;">
                <a class="msg-head"><span class="ivu-avatar ivu-avatar-circle ivu-avatar-large ivu-avatar-image"><img src="../../../../static/img/avatar/unknown.png"></span></a>
                <span class="msg-text">
                     <!--<img src="https://nim.nosdn.127.net/NDMxNDk0Ng==/bmltYV8xOTUzNjU2NzgyXzE1Mjk0ODQ4MTkwMTBfMzc5N2Q4MGQtOGVmNS00NWZjLTgyZjctYWUzN2Y0NzIzNzAz?imageView&thumbnail=180x0&quality=85">-->
                    <div></div>
                </span>
                <!---->
            </div>
        </li>
        <li class="u-msg item-time session-chat">
            <div>---- 17:47 ----</div>
        </li>
        <li class="u-msg item-me session-chat">
            <div idclient="ed0ed204daa0a87c6cb078182096742b" time="1529488079948" flow="out" type="image" style="overflow: hidden; text-align: left;"><a class="msg-head">
                <span class="ivu-avatar ivu-avatar-circle ivu-avatar-large ivu-avatar-image">
                <img src="../../../../static/img/avatar/unknown.png">
                </span></a>
                <span class="msg-text">
                    <div></div>
                </span>
                <!---->
            </div>
        </li>
    </ul>
    <div id="bottom" style="height: 10px"></div>
</div>
<script>
document.getElementById("bottom").scrollIntoView()
//    $(function () {
//        $("-sharpList").scrollTop(999999)
////        $("-sharpList").scrollTop($("-sharpList").scrollHeight)
////        $("-sharpList").scrollTop($("-sharpList")[0].scrollHeight)
//    })
//    document.getElementById("List").scrollTop = 999999
<?script>
replace the picture to reach the bottom
everything in script above has been tried, and the problem is all the same. Does any god know how to solve it?