Не получается прокрутить до конца div при загрузке страницы (angularJS) - PullRequest
Новая
       6

Не получается прокрутить до конца div при загрузке страницы (angularJS)

0 голосов
/ 30 июня 2019

Я хочу прокрутить до конца div при загрузке страницы, но он этого не делает.Я могу прокручивать страницу после загрузки.

CSS (скрытая полоса прокрутки) 

.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 - использует функцию init для попытки прокрутки вниз при загрузке 

<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>&nbsp;&nbsp;{{message.message}}
         </div>
      </div>
   </div>   
</div>

Контроллер 

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;
   };

}]);

1 Ответ

1 голос
/ 02 июля 2019

С помощью приведенной выше справки я сделал следующее:

Директива 

//automatically scrolls to the bottom of the list on load
app.directive('scrollToBottom', function($timeout) {
    return {
        link: function(scope, element, attr) {
            if (scope.$last === true) {
                  $timeout(function() {
                      var scroll_id = attr.scrollId;
                      var objDiv = document.getElementById(scroll_id);
                      objDiv.scrollTop = objDiv.scrollHeight;
                  }, 0);
            }
        }
    };
});

HTML 

<div class="scrollable-hidden-parent">
   <div class="scrollable-hidden-child" id="scrollable-hidden">
      <div ng-repeat="message in chats" scroll-to-bottom scroll-id="scrollable-hidden">
          <div>{{message.name}}&nbsp;&nbsp;{{message.message}}</div>
       </div>
    </div>
</div>

CSS 

.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;
}
...