[英]How to scroll div height to the bottom in HTML?
I've been searching a lot for this question and I found some answers but none of them were compatible for my situation. 我一直在寻找这个问题很多,我找到了一些答案,但没有一个适合我的情况。
I am working on Chat Application
and one of its functionalities is to show older messages
for some chat channel
. 我正在研究“
Chat Application
,其功能之一是为某些chat channel
显示较旧的messages
。 The element which holds the messages
is <table>
and it is set in <div>
,and I've set a fixed height and width for this div
. 存放
messages
的元素是<table>
并且在<div>
设置,我为此div
设置了固定的高度和宽度。
I bring channel's messages from SQL table
by calling the appropriate servlet
,and show them in the table
using AngularJS
.In this situation:is there a way in html
/ css
/ angular
/ javascript
to scroll the div
automatically after finishing to upload all the messages? 我通过调用适当的
servlet
从SQL table
通道的消息,并使用AngularJS
在table
显示它们。在这种情况下: html
/ css
/ angular
/ javascript
是否有一种方法可以在完成上传所有消息后自动滚动div
?
my code is like that: 我的代码是这样的:
HTML
: HTML
:
<div ng-show="channelmsg">
<div style="max-width: 500px; max-length: 500px; height: 500px; overflow: auto;" id="mydiv">
<table>
<tr ng-repeat="c in ChannelMsgResult">
<td style="border: 1px; border-color =light gray; max-width:400px;">
<span><img ng-src={{c.Photo}} style="border-radius:0.5cm; width: 50px; height: 50px;" />
<a href="#" style="color: gray;"> {{ c.Nickname }} :</a> </span>
<br /> {{ c.Content }} <a href="#"><small>reply</small></a>
<a href="#">see replies</a> <br />
<label style="color: #9fa1a3;"><small>{{ c.DateTime }}</small></label>
</td>
</tr>
</table>
</div>
</div>
The Controller's function
that calls the servlet
and shows (by ng-show
) the div "mydiv": 调用
servlet
并显示(通过ng-show
)div“ mydiv”的Controller's function
:
$scope.displayChannelMsg = function(x) {
$http.get("http://localhost:8080/ExampleServletv3/displaychannelmsgservlet",{
params:{
channelid : x.ChanID
}
}).success(function(response) {
setTimeout(function () {
$scope.$apply(function(){
console.log("went to servlet and succeeded")
$scope.ChannelMsgResult = response;//this variable will hold the channels
$rootScope.channelmsg=true;
});
});
});
};
Can I do this in a simple way without using any external libraries (like angular-glue) ? 我可以不使用任何外部库(例如angular-glue)以简单的方式执行此操作吗?
Please guide me. 请指导我。
Thanks 谢谢
Assign an id to each message and then use $anchorScroll("latest message id");
为每条消息分配一个ID,然后使用
$anchorScroll("latest message id");
to scroll to the message 滚动到消息
Can you try putting: 你可以试一下:
setTimeout(function () {
var objDiv = document.getElementById("mydiv");
objDiv.scrollTop = objDiv.scrollHeight;
}, 0);
after your first timeout function? 您的第一个超时功能之后?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.