[IONIC / AngularJS] 아이오닉 스크롤 위치 제어하기

IONIC에서는 LIST나 다른 여러 컴포넌트를 사용하면 자동으로 스크롤을 만들어주죠?

근데 이 스크롤 위치(화면위치) 를 제어하기가 쉽지 않습니다.

IONIC에서는

transform : translate3d(x,y,z); 을 사용해서 스크롤 효과를 주고있습니다.

이 css를 제어하는 것 대신 매우 손쉽게 스크롤의 위치를 제어할 수 있는 방법을

채팅기능과 관련하여 소개해드릴게요.

사용된 코드는 이렇습니다.

chat.html

<ion-view title="My Images" ng-init=""> <ion-content> <div class="list"> <a class="item item-avatar" ng-repeat="chat in chats" style="border:0"> <img src=""> <img ng-src="https://t1.daumcdn.net/cfile/tistory/2323B63756EAEE3103" width="40%" /> <h2>{{chat.user}}</h2> <p ng-if="chat.image==null">{{chat.message}}</p> </a> </div> <form> <!-- form 태그 생략--> </form> </ion-content> </ion-view>

app.js (controller를 그냥 app.js에 선언해놓았어요.)

imageApp2 //ng-repeat 종료 이벤트를 위한 디렉티브선언.. 이전 블로그 참조하세요 .directive('ngRepeatEndWatch', function () { return { restrict: 'A', scope: {}, link: function (scope, element, attrs) { if (attrs.ngRepeat) { if (scope.$parent.$last) { if (attrs.ngRepeatEndWatch !== '') { if (typeof scope.$parent.$parent[attrs.ngRepeatEndWatch] === 'function') { scope.$parent.$parent[attrs.ngRepeatEndWatch](); } else { scope.$parent.$parent[attrs.ngRepeatEndWatch] = true; } } else { scope.$parent.$parent.ngRepeatEnd = true; } } } else { throw 'ngRepeatEndWatch: `ngRepeat` Directive required to use this Directive'; } } }; }) .controller("SecureController", function($scope, $ionicHistory, $firebaseArray, $cordovaCamera, $firebase, $ionicScrollDelegate) { $ionicHistory.clearHistory(); /*사용할 함수*/ $scope.setScrollPos = function(){ $ionicScrollDelegate.scrollBottom(); } $scope.images = []; $scope.upload = function() { }; });

1. ng-repeat으로 채팅의 메시지를 전부 띄운 상황입니다.

당연히 html문서의 최상단을 보여주고 있는데요.

2. 하지만 제가 원하는 초기 화면은 이런 화면이겠죠?

채팅 페이지이니 만큼

해당 html문서의 최하단을 보여주어서 최근메시지가 가장 먼저 보이도록 해주어야 하겠습니다..

3. Controller에서 scrollBottom을 실행시키겠습니다.

.controller("SecureController", function($scope, $ionicHistory, $firebaseArray, $cordovaCamera, $firebase, $ionicScrollDelegate) { $ionicHistory.clearHistory(); $scope.setScrollPos = function(){ $ionicScrollDelegate.scrollBottom(); } //....이하 생략

여기가 핵심

controller에 $ionicScrollDelegate 를 추가해주었구요,

ng-repeat이 끝나면 $ionicScrollDelegate.scrollBottom을 실행하도록 했습니다.

4. 그리고 ng-repeat을 선언한 태그에 ng-repeat-watch-end (이전 글 참조)를 실행해줍니다.

<div class="list"> <a class="item item-avatar" ng-repeat="chat in chats" style="border:0" ng-repeat-end-watch="setScrollPos"> <img src=""> <img ng-src="https://t1.daumcdn.net/cfile/tistory/2235274556EAEE3207" width="40%" /> <h2>{{chat.user}}</h2> <p ng-if="chat.image==null">{{chat.message}}</p> </a> </div>

2번째줄에 ng-repeat-end-watch="setScrollPos" 만 넣어준 상황입니다.

완성입니다!!

***

1. document.scrollTop 같은 순수 js코드로도 제어가 가능할텐데요.

scroll 때문에 쉽지 않아서 이렇게 구글링을 통해 찾았습니다.

2. transform css요소를 바꾸는걸로도 해보았는데.. 이역시 스크롤과 동시제어가 거의 힘들어요

3 올린 코드에는 가독성때문에 생략한 코드가 많이 있습니다. 참조만 해주세요.