Froala editor 막바지인데 모바일에서 스크롤 위치 문제 떄문에 고심이 많습니다.

IOS는 브라우저에서 input이나 textarea가 등장하면 키보드가 나타나며 최초 클릭시의 커서 위치로 화면을 자체를 스크롤링해서 밀어버리죠.

 

IMG_3097.jpg  IMG_3099.jpg

 

 

처음에는 이게 브라우저의 window나 document영역을 통채로 밀어버리는건가 하고 입력도구들을 영역 하단에 fixed 해버렸지만 실제로 브라우저를 키보드 시작점까지 밀어버리는가, 꼭 그런것도 아니더군요. 그냥 커서가 키보드 영역에 가려지지 않을 정도로만 스크롤을 조정해줄 뿐 웹 브라우저는 그대로 유지 됩니다. 그렇기 때문에 글을 쓰고 엔터를 누르다보면 어느새 키보드 영역 안으로 들어가 내가 글쓰는 위치가 키보드영역 밑으로 가려져 버립니다.

 

현재 XE의 모바일 용 입력 화면에서는 textarea 영역을 아예 고정으로 해버려서 이 문제를 해결하려고 합니다. CKeditor나 그밖에 에디터도 이 문제를 극복할 방법없이 입력 영역을 고정해놔야 그나마 글을 써내려가다 화면에서 사라지는 문제를 해결할 수 있을 것입니다.

 

하지만 이렇게 되면 또 불편한 사실이 가뜩이나 자그마한 화면에 스크롤바 영역이 두개나 생겨버려서 내가 원하는 포인트를 컨트롤 하기가 힘들다는 점 입니다. 실제로 많은 분들이 이곳 xetown에 모바일로 글을 쓸때 스크롤 이동을 수도없이 하셨을 것 입니다.

 

 

element.getBoundingRect()

getBoundingRect라는 함수를 아십니까? 이것을 잘 활용하면 이 문제를 극복 할 수 있습니다. 적절한 예시문이 어려워 아래 링크로 대체합니다.

 

http://stackoverflow.com/questions/25630035/javascript-getboundingclientrect-changes-while-scrolling

 

froala editor에서는 API로써 본문의 커서 위치의 포지셔닝을 상시 취득하고 있는데요. 위 기능으로 정의된 값으로 포인터가 있는 곳을 찾아냅니다. 에디터 자체가 위치를 찝어서 자동으로 키보드 영역에 숨지 않게 되어있다면 얼마나 좋겠습니까만 그렇게 까지는 구현되어있지 않는 관계로 저는 이 API를 활용하여 현재의 스크롤 값을 찾고 내가 원하는 위치에서 얼마나 밑으로 내려가 있는지의 차액값을 계산해서 스크롤을 조금 더 내리도록 했습니다.

 

.on('froalaEditor.keyup', function (e, editor, event) {// console.log('keydown');

    changeQueue = true;

    if(editor.helpers.isMobile()) {
        var top = editor.position.getBoundingRect().top;
        var document_scroll = editor.$document.scrollTop();
        var wp_scroll = editor.$wp.scrollTop();
        var limitTop = 185;
        if(top > limitTop) {
            if(!editor.$box.hasClass('fr-fullscreen')) {
                editor.$document.scrollTop(document_scroll - (limitTop - top));
            }
            else if(editor.$box.hasClass('fr-fullscreen')) {
                editor.$wp.scrollTop(wp_scroll - (limitTop - top));
            }
        }
    }
})

 

이렇게 했더니 제가 원하던 모습이 나오더군요. 어플이 아니면 못할 뻔했던 기술인데 getBoundingRect라는 정보를 알게되고 또 실제 만들려하니 froala editor는 이미 가지고 있던 것이었습니다. (두둥) 그제 부터 삽질해서 자체적으로 시늉만 했었는데 이렇게 기능을 알고 나니 무려 10분도 안걸려 구현이 되더군요.. 어느 선에서 스크롤을 내려야할지는 제가 일본어도 염두해서 만들고 있기 때문에 200보다는 조금 낮은 185로 조정했습니다.

 

위 설명이 뭔소린지 어려우신 분들은 이곳에서 테스트해보세요. 글쓰기 버튼 누르고 글을 엔터와 함께 계속 쳐 내려가면 무슨말인지 아실겁니다.

 

http://romanesque.me/post

 

※ 모바일에서만 됩니다.

  • ?
    우와!!.. 완전체에 가깝습니다!
  • ? profile
    모바일에서 자음모음 문제만 해결된다면 이 에디터는 완벽해집니다 ㅎ
    근데 Neculai Stefan 씨가 아직도 안고쳐주네요 ㅠㅠ
  • profile ?
    무슨 문제인지 모르지만 안드로이드의 모바일에서는 문제가 전혀 없어요 ㅎㅎ
    고생하셨어요!!
  • ?
    완벽 해지려고 하네요
  • profile
    어느샌가 공홈에서 자취를 감추신 분들이 여기오니 뵙는군요 ^^