我正在尝试创建一个消息传递网站，当消息加载时，它应该使用scrolltTop和scrollHeight滚动到div的底部，但无法正常工作。当我控制台这些值时，它将返回0。
我尝试使用scrollTop = scrollHeight但仍然无济于事，我想知道我在哪里做错了。 这是我的一部分代码。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="Mobirise v4.11.4, mobirise.com">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link rel="shortcut icon" href="../assets/images/logo.svg" type="image/x-icon">
<meta name="description" content="Website Builder Description">
<title>Linkster | Chat. Meet. Eat.</title>
<link rel="stylesheet" href="../assets/web/assets/mobirise-icons/mobirise-icons.css">
<link rel="stylesheet" href="../assets/web/assets/mobirise-icons2/mobirise2.css">
<link rel="stylesheet" href="../assets/web/assets/mobirise-icons-bold/mobirise-icons-bold.css">
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="../assets/tether/tether.min.css">
<link rel="stylesheet" href="../assets/dropdown/css/style.css">
<link rel="stylesheet" href="../assets/animatecss/animate.min.css">
<link rel="stylesheet" href="../assets/theme/css/style.css">
<link rel="preload" as="style" href="../assets/mobirise/css/mbr-additional.css">
<link rel="stylesheet" href="../assets/mobirise/css/mbr-additional.css" type="text/css">
<link rel="shortcut icon" href="../assets/images/logo.png" type="images/png">
<link rel="stylesheet" href="../assets/custom/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
<style>
::-webkit-scrollbar {
display: none;
width: 0px;
height: 0px;
}
.messages-avaliable:hover{
overflow-y: scroll;
}
.box{
display: block;
margin: 20px;
padding: 20px;
background: #ccc;
width: 80%;
}
.demo{
height: 300px;
display: block;
overflow:scroll;
}
</style>
</head>
<body class="cus-body" style="min-height: 100vh; font-family: 'Raleway', sans-serif !important; margin: 0px 16px;">
<span id="cus-preload">
<img src="../assets/images/logo.png" width="100" height="100" class="fade-in">
</span>
<div class="row hide-until h-100 w-100 p-0" style="overflow: hidden; ">
<!-- aside -->
<div class="col-12 col-lg-3 h-100 cus-content-home p-0">
<div class="cus-top-nav bg-primary">
<a id="normal-profile">
<div class="prof-image h-100 dis-inline">
<img src="../assets/images/cliff.jpg" alt="" class="prof-image-img h-100 mr-2 ">
<h5 class="text-white" style="font-weight: 50; align-self: center;">My Account</h5>
</div>
<img src="../assets/custom/icons/controls.svg" alt="" class="setting-icon d-none d-lg-block" height="50" width="50">
</a>
<img src="../assets/custom/icons/back.svg" id="change-view-2" alt="" class="setting-icon d-lg-none" height="50" width="50" style="transform: rotate(180deg);">
<a id="setting-profile" style="display: none;">
<div class="prof-image h-100 dis-inline">
<img src="../assets/custom/icons/back.svg" alt="" class="mr-4 " height="25" width="25" style="align-self: center; margin-bottom: .5rem; margin-left: 1.5rem;">
<h5 class="text-white" style="font-weight: 50; align-self: center;">My Account</h5>
</div>
<img src="../assets/images/cliff.jpg" alt="" class="prof-image-img2" height="50" width="50">
</a>
</div>
</div>
<!-- end of aside -->
<!-- main part -->
<div class="col-12 col-lg-9 cus-content-home-col-9 p-0" style="background: rgba(243, 243, 243, 0.33); min-height: 100vh;">
<?php //include("pages-include/nav-2.php"); ?>
<div class="row m-0 " style="min-height: 100vh;">
<!-- start of col-8 -->
<div class="col-8 p-0 rubik-2" style="border-right: 1px solid #e8e8e8; min-height: 100vh;">
<div class="demo">
<div class="box">Demo</div>
<div class="box">Demo</div>
<div class="box">Demo</div>
<div class="box">Demo</div>
<div class="box">Demo</div>
<div class="box">Demo</div>
<div class="box">Demo</div>
<div class="box">Demo</div>
<div class="box">Demo</div>
</div>
</div>
<!-- end of col-8 -->
<!-- start of col-4 -->
<div class="col-4 h-100 p-0">
<div class="h-100 w-100">
<div class="w-100" style="height: calc(100vh - 70px); overflow-y: scroll;">
<div class="w-100" style="height: calc(100% - 35%)">
<div class="img-for-display h-100 w-100" style="background: linear-gradient(0deg,rgba(0,0,0,.7),transparent 40%),url(../assets/images/shugatiti2-1.jpg); background-position: 50% 0%;background-size: auto 100%;background-repeat: no-repeat; top: 0; bottom: 0; right: 0; left: 0; width: 100%;">
</div>
</div>
<div class="p-3 w-100">
<div class="" style="display: flex;">
<h3>Chairwoman <span class="rubik-2">22</span></h3>
</div>
<div class="px-2 pt-2" style="width: 100%; display: flex; color: #757575;">
<div class="pr-1">
<svg class="Sq(16px)" viewBox="0 0 24 24" width="17px" height="17px" focusable="false" aria-hidden="true" role="presentation"><g stroke="#757575" stroke-width=".936" fill="none" fill-rule="evenodd"><path d="M19.695 9.518H4.427V21.15h15.268V9.52zM3.109 9.482h17.933L12.06 3.709 3.11 9.482z"></path><path d="M9.518 21.15h5.086v-6.632H9.518z"></path></g></svg>
</div>
<div style="margin-top: 2.5px;">Lives in Accra</div>
</div>
<div class="px-2 pt-2" style="width: 100%; display: flex; color: #757575;">
<div class="pr-1">
<svg class="Sq(16px)" viewBox="0 0 24 24" width="17px" height="17px" focusable="false" aria-hidden="true" role="presentation"><path d="M15.507 13.032c1.14-.952 1.862-2.656 1.862-5.592C17.37 4.436 14.9 2 11.855 2 8.81 2 6.34 4.436 6.34 7.44c0 3.07.786 4.8 2.02 5.726-2.586 1.768-5.054 4.62-4.18 6.204 1.88 3.406 14.28 3.606 15.726 0 .686-1.71-1.828-4.608-4.4-6.338" stroke="#757575" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg>
</div>
<div style="margin-top: 2.5px;">Woman</div>
</div>
<div class="px-2 pt-2" style="width: 100%; display: flex; color: #757575;">
<div class="pr-1">
<svg class="Sq(16px)" viewBox="0 0 24 24" width="17px" height="17px" focusable="false" aria-hidden="true" role="presentation"><g fill="#757575" stroke="#757575" stroke-width=".5" fill-rule="evenodd"><path d="M11.436 21.17l-.185-.165a35.36 35.36 0 0 1-3.615-3.801C5.222 14.244 4 11.658 4 9.524 4 5.305 7.267 2 11.436 2c4.168 0 7.437 3.305 7.437 7.524 0 4.903-6.953 11.214-7.237 11.48l-.2.167zm0-18.683c-3.869 0-6.9 3.091-6.9 7.037 0 4.401 5.771 9.927 6.897 10.972 1.12-1.054 6.902-6.694 6.902-10.95.001-3.968-3.03-7.059-6.9-7.059h.001z"></path><path d="M11.445 12.5a2.945 2.945 0 0 1-2.721-1.855 3.04 3.04 0 0 1 .641-3.269 2.905 2.905 0 0 1 3.213-.645 3.003 3.003 0 0 1 1.813 2.776c-.006 1.653-1.322 2.991-2.946 2.993zm0-5.544c-1.378 0-2.496 1.139-2.498 2.542 0 1.404 1.115 2.544 2.495 2.546a2.52 2.52 0 0 0 2.502-2.535 2.527 2.527 0 0 0-2.499-2.545v-.008z"></path></g></svg>
</div>
<div style="margin-top: 2.5px;">8 kilometers away</div>
</div>
</div>
<div style="border-top: 1px solid #e8e8e8; color: #757575;" class="w-100">
<div class="p-3">Really a sweet girl, looking for a partner.</div>
</div>
</div>
<div class="" style="position: relative; bottom: 0; border-top: 1px solid #e8e8e8; display: flex; height: 70px;">
<div style="width: 50%; line-height: 70px; text-align: center;border-right: 1px solid #e8e8e8;" class="h-100">
<a href="" class="text-center cus-b text-uppercase" style="color: #757575;">Unmatch</a>
</div>
<div style="width: 50%; line-height: 70px; text-align: center;" class="h-100">
<a href="" class="text-center cus-b text-uppercase" style="color: #757575;">Report</a>
</div>
</div>
</div>
</div>
<!-- end of col-4 -->
</div>
</div>
<!-- end of main part -->
</div>
<!-- end of main part -->
<script src="../assets/web/assets/jquery/jquery.min.js"></script>
<script src="../assets/popper/popper.min.js"></script>
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/tether/tether.min.js"></script>
<script src="../assets/dropdown/js/nav-dropdown.js"></script>
<script src="../assets/dropdown/js/navbar-dropdown.js"></script>
<script src="../assets/touchswipe/jquery.touch-swipe.min.js"></script>
<script src="../assets/viewportchecker/jquery.viewportchecker.js"></script>
<script src="../assets/smoothscroll/smooth-scroll.js"></script>
<script src="../assets/theme/js/script.js"></script>
</body>
</html>
<script type="text/javascript">
$(window).load(function(){
$("#cus-preload").fadeOut("fast",function(){
$(".hide-until").show().css("display","inline-flex");
});
});
</script>
<script type="text/javascript">
$(function(){
// var e = document.getElementById('start_scroll_bottom');
// var eHeight = e.height();
$('.demo').scrollTop($('.demo')[0].scrollHeight);
});
</script>
如果有人能帮助我，我会很高兴。谢谢