AngularJS에서 div의 맨 위로 스크롤하시겠습니까?

AngularJS에서 div의 맨 위로 스크롤하시겠습니까?

Angular를 사용하고 있습니다.작은 웹 앱의 JS에서 문제가 발생했습니다.사용하고 있다ng-repeatdiv 안에 목록을 채웁니다.div의 높이는 고정되어 있으며 다음과 같이 설정됩니다.overflow-y: auto즉, 목록이 div에 비해 너무 크면 스크롤바가 표시됩니다.문제는 목록을 다시 그릴 때(즉, 데이터 백업 ng-repeat 변경) 스크롤바가 div의 맨 위로 리셋되지 않는다는 것입니다.대신 스크롤바가 ng-repeat 변경 전 위치에 머무릅니다.이는 매우 열악한 사용자 환경입니다.나는 다음을 시도했지만 아무런 운이 없었다.

<div id="myList">
  <ul>
    <li ng-repeat="item in items">{{item}}</li>
  </ul>
</div>

<a ng-click="switchItems()">Switch</a>

<script>
function MyApp($scope) {
  $scope.switchItems = function() {
    $('#myList').scrollTop();
    $scope.items = [1, 2, 3, 4]; // new items
  };
}
</script>

저도 같은 문제를 겪었고, 보통 다음과 같은 일반적인 지시로 해결합니다.특정 이벤트를 듣고 해당 이벤트가 발생할 때마다 요소를 로 스크롤합니다.y = 0당신이 해야 할 일은$broadcast컨트롤러의 이벤트가 표시됩니다.

angular.module("ui.scrollToTopWhen", [])
.directive("scrollToTopWhen", function ($timeout) {
  function link (scope, element, attrs) {
    scope.$on(attrs.scrollToTopWhen, function () {
      $timeout(function () {
        angular.element(element)[0].scrollTop = 0;
      });
    });
  }
});

사용방법:

// Controller
$scope.items = [...];
$scope.$broadcast("items_changed")

// Template
<div id="myList" scroll-to-top-when="items_changed">

DIV의 내용을 감시하는 지시를 추가할 뿐입니다.그런 다음 내용이 변경될 때마다 맨 위로 스크롤됩니다!이 솔루션에서는 이벤트 처리가 필요하지 않습니다(여기서는 불필요하다고 생각합니다).

mod.directive('scrollToTop', function(){
    return {
        restrict: 'A',
        link: function postLink(scope, elem, attrs) {
            scope.$watch(attrs.scrollToTop, function() {
                elem[0].scrollTop = 0;
            });
        }
    };
});

그러면 html 마크업은 다음과 같이 명령을 사용하여 스크롤을 트리거합니다.

<div class='myList' data-scroll-to-top='data.items.length'>
  <ul>
    <li data-ng-repeat='item in data.items'>{{item}}</li>
  </ul>
</div>

목록에 항목을 추가하면 DIV가 맨 위로 스크롤됩니다!여기 작업 코드를 가진 jsFiddle이 있습니다.http://jsfiddle.net/pkgbtw59/89/

테이블 본체 스크롤에 대해서도 같은 문제에 직면해 있습니다.나는 그것을 다음과 같이 해결했다.

여기 샘플 html이 있습니다.

<table id="rateplanmapping-scroll">
    <thead>
       <th></th>....
    </thead>
    <tbody >
        <tr ng-repeat="data in datas"> //this is the data
            <td></td>.....
        </tr>
    </tbody>
</table>

맨 위로 스크롤할 각도 코드입니다.

<script>

  angular.element("#rateplanmapping-scroll tbody")[0].scrollTop=0; 

</script>

도움이 됐으면 좋겠어요.
이 스크립트는 필요한 기능에 넣을 수 있기 때문에 특정 상황이 발생했을 때 자동으로 트리거됩니다.또는 이벤트에 첨부할 수도 있습니다.

div 요소의 경우 다음과 같은 방법으로 수행할 수 있습니다.

http://plnkr.co/edit/0B4zrFTho6GYuPAS0S1A?p=preview

감사해요.

문서에 따라 $anchorScroll을 사용할 수도 있습니다.

// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('bottom');

// call $anchorScroll()
$anchorScroll();

이것은 $timeout 내에 포장해야 합니다.

$timeout(function() {
  $location.hash('myList');
  $anchorScroll();
})

언급URL : https://stackoverflow.com/questions/24040985/scroll-to-top-of-div-in-angularjs