ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [IONIC / AngularJS] 아이오닉 스크롤 위치 제어하기
    코딩은 주댕이로/IONIC+Firebase 2015. 5. 25. 20:22

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

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


    IONIC에서는

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

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

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


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

    chat.html


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



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

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




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

    채팅 페이지이니 만큼

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




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

    여기가 핵심

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

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


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

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

    완성입니다!!



    ***

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

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


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


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


    댓글 5

    • csh6222 2016.06.24 17:42

      수고많으십니다.. 이부분 적용이 안되던데,. (카메라 촬영 및 앨범 사진 선택까지 구현햇습니다만..)
      스크롤이 제어가안되요 ㅜ,.ㅜ 똑같이 넣어도 ㅜ,.ㅜㅜㅜㅜ

      • 고무망치 2016.06.24 18:09 신고

        분명히 다른 소스가 포함되어 다른 결과가 나올텐데,

        먼저 setScrollPos 메소드에 alert(1)이나 로그를 찍는 방법을 통해
        호출이 되는지 먼저 확인해보시겠어요?
        IONIC은 안한지 1년이 넘어 가물가물합니다 ㅎㅎ 한 스텝씩 해보져

      • csh6222 2016.06.27 09:03

        항상친절한답변감사드립니다! 하나하나 디버깅해보면서 다시 시도해보겠습니다!!!^^ 즐거운 한주되십시요!

    • 패러블 2017.03.02 17:19

      와 잘되네요... 짱입니다^.^

Designed by Tistory.