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?

Jquery html javascript
Oct.09,2021

the reason for this problem is that the image itself takes time to load, and the process is loaded asynchronously, which you can see in the browser request resource file. So the JS you wrote above was executed in the first place, of course it didn't work. Specifically, you can add an onload () event to the picture, wait for the picture to load, and then set the chat window scrollTop = chat window scrollHeight

execute $(window). ScrollTop (infinitely large)

the picture is not loaded when you scroll, scroll to the bottom before the picture is loaded, and then expand the list again. This requires you to determine the size of the picture in advance and occupy the size it needs to display before it is loaded. There will be no high content caused by this kind of picture loading.

127Where did the picture outside the link be uploaded

Previous: Elements that extract the same attribute values from an array are rearranged into a new array

Next: How to achieve vertical centering of iview Modal box

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e3407b-4c620.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e3407b-4c620.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?