Vue cannot scroll to the bottom of the dialog box using el-scrollbar

for example, the assignment is as follows:

var div = self.$refs["dialog-wrap"].$refs["wrap"];
this.$nextTick(() => {
    div.scrollTop = div.scrollHeight
    console.log("scrollHeight", div.scrollHeight)
    console.log("scrollTop", div.scrollTop)
})

console.log comes out like this, the assignment is invalid, and the dialog box scrolls, but not completely to the bottom:

clipboard.png

May.22,2021

if you send a long picture, have you considered whether the picture has been loaded? if not, the calculated scrollHeight may not be correct.


instead of directly assigning values to scrollTop , scroll window.scrollTo (x coordinates, Y coordinates)

.
window.scrollTo(0, div.scrollHeight)
< hr >

it should be as said downstairs that the height was calculated before your picture was loaded, which was caused by incorrect height calculation. You add an onload event to the image, and then re-call the method that moves to the bottom after loading.

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-1b2adfa-2ba54.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-1b2adfa-2ba54.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?