AngularJS initial scroll down functionality

Question

AngularJS initial scroll down functionality

I am currently working with this div container setup:

<div class="col-md-8 grid-wrapper-div chatHistory">
...
</div>

Here is the CSS associated with it:

.chat .chatHistory {
    overflow-y:scroll;
    height: 550px;
}

If the page loads, I want the scroll bar to be at the bottom. I am using AngularJS for this functionality. Is there a way to achieve this using CSS or AngularJS?

[EDIT]

I have attempted the following method but chatHistoryContainer.scrollHeight is showing as undefined. Can anyone offer insight into why? https://i.sstatic.net/5SB4w.png

css angularjs

Answer 1

Answer №1

To ensure the content is fully rendered before scrolling, utilize ngInit for initial rendering and $timeout to delay the scroll until the next digest cycle.

<div id="chat_history" class="col-md-8 grid-wrapper-div chatHistory" ng-init="scrollToBottom()">
...
</div>

myApp
  .controller(function($scope, $timeout){
    $scope.scrollToBottom = function() {
      $timeout(function(){
        var objDiv = document.getElementById("chat_history");
        objDiv.scrollTop = objDiv.scrollHeight;
      });
    };
  });

Answer 2

To ensure the content is fully rendered before scrolling, utilize ngInit for initial rendering and $timeout to delay the scroll until the next digest cycle.

<div id="chat_history" class="col-md-8 grid-wrapper-div chatHistory" ng-init="scrollToBottom()">
...
</div>

myApp
  .controller(function($scope, $timeout){
    $scope.scrollToBottom = function() {
      $timeout(function(){
        var objDiv = document.getElementById("chat_history");
        objDiv.scrollTop = objDiv.scrollHeight;
      });
    };
  });

AngularJS initial scroll down functionality

Answer №1

Similar questions

Creating a div that expands to fill up the remaining height within a flex-child

What are the limitations of using a CSS transition alongside a separate animation created with jQuery's animate method?

When using $http get, it returns a "not found" error, but the direct request

I require a browse button on my JSP page that allows users to select folders, not individual files

How to implement scrollspy in Bootstrap 4 without relying on nav or list-group components?

How to Use the env() Variable in CSS Styling?

CSS may occasionally fail to load correctly when the page is first opened

Creating inline form groups within a form

Loading AngularJS modules

Troubleshooting: ng-model items not appearing in AngularJS $scope object

What is the best way to connect individual buttons to a dynamic div that displays different content depending on the button clicked?

Check for compatibility of overflow:scroll with mobile browsers

Adhesive Bottom Navigation, Top Banner, and Full-Height Page Content

Creating a table-like structure in HTML using `<div>` elementsWould you like to

Verify that the text entered in the form is accurate, and if it meets the required criteria, proceed to the next

What could be causing the lack of functionality in the responsive feature?

Tips on resetting the position of a div after filtering out N other divs

The hamburger menu appears to be missing when viewing in Safari, while it functions properly on both Chrome and Firefox browsers

Switching between slides by utilizing anchor tags or buttons located in separate div containers

The Angular checkbox must always remain checked on the user interface whenever I attempt to log in or re-open the browser