I am trying to automatically scroll to the bottom of a div when the page loads, but for some reason it's not working. I can manually scroll once the page is loaded.
CSS (hidden scrollbar)
.scrollable {
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.scrollable-hidden-parent {
width: 100%;
height: 100%;
overflow: hidden;
}
.scrollable-hidden-child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px;
box-sizing: content-box;
}
HTML - utilizing the init function in an attempt to scroll to the bottom on load
<div class="scrollable" ng-controller="MatchDetailController as matchdetail"
ng-init="init()">
<div class="scrollable-hidden-parent" >
<div class="scrollable-hidden-child" id="scrollable-hidden">
<div ng-repeat="message in chats>
<b>{{message.name}}</b> {{message.message}}
</div>
</div>
</div>
</div>
Controller
app.controller('MatchDetailController', ['$scope', '$http', '$location', '$rootScope', '$window', function MatchDetailController($scope,$http,$location,$rootScope, $window) {
$scope.init = function() {
var objDiv = document.getElementById("scrollable-hidden");
objDiv.scrollTop = objDiv.scrollHeight;
};
}]);