CSS positon:sticky 안드로이드/아이폰에서
본문
사용하기 편한 마크다운 위지위그 에디터를 만들고 있습니다.
CSS, PHP는 아주 조금 알고 있고, javascript(Typescript)는 조금 알고 있는 정도인데..
데스크탑용은 어느정도 사용이 가능한 정도입니다. (크롬과 파이어폭스 지원)
이번에 스마트폰(안드로이드 폰과 아이폰)에서 사용하기 편하게 만들고 있는 중입니다.
3가지 모드중, 위지위그 모드와 타이포라 모드입니다.
http://74.208.27.41/ 로 접속하면 타이포라 모드입니다. (타이포라를 잘 모르시면 typora로 검색해서 다운로드해 보세요.)
마크다운도 조금 알고 있어야 됩니다.
위지위그 모드는 일반적인 에디터의 모드와 같지만, 마크다운을 알면 좀 더 편하게 사용이 가능합니다.
여기서 해결해 줘야 될 문제점.
position: -webkit-sticky;
position: sticky;
로 설정되어 있는데, 에디터 패널을 클릭하면 커서가 있는 곳이 툴바 아래도 들어가는데.. (제 폰(픽셀4XL)에서는)
이것을 막는 자바스크립트 코드나 CSS 코드를 알고 싶습니다.
아이폰에서도 잘 동작되는 코드 부탁드립니다.
답변 2
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_sticky
position: -webkit-sticky;
position: sticky; 이부분은 단지 에디터 메뉴가 스크롤이 내려가도 상단에 고정 되도록 하는 것입니다.
링크에서 테스트 해보시면 좋을듯..... 그리고
"에디터 패널을 클릭하면 커서가 있는 곳이 툴바 아래도 들어가는데.." 이말이 무슨뜻인지 모르겠습니다.....ㅠㅠ
예. 이미 그렇게 구현되어 있습니다. 링크에.. 그래서 질문이 이렇게 안되는 방법에 대해서 문의 중입니다. ㅎㅎ
가지고 계신 아이폰에서는 상단에 안 붙을 때가 있습니다.
그래서 상단에 고정시킬수 있는 솔루션을 찾고 있는 중입니다.
아이폰에서는 에디터 하단까지는 상단에 메뉴가 붙어있지만 test 글씨 있는데 까지 내려가면 메뉴가 사라지는군요.
이러면 아래 포지션을 test 있는곳까지 지정하면 되지 않을까요?
position: -webkit-sticky;
position: sticky;
여러곳에 넣어 봤는데, 안되더군요.. 검색을 해보면 froala도 문제가 있다는 이슈가 있고, ckeditor가 그래도 제일 괜찮은 것 같은데, 툴바 한줄이 가려지는 문제도 있고..
sticky로 쓰면 안드로이드서는 그럭저럭 쓸만합니다. (입력창이 툴바 아래로 들어가는 문제빼고..)
아이폰도 툴바를 미리 탑에 붙여 놓고 쓰면 그럭저럭..
안되면 이정도에 만족하고, 그냥 최대화해서 입력하라고 하면 될 것 같습니다.
그런데 스마트 폰에서 이렇게 작성하는 사람이 있을까 생각도 들고..
키보드 붙은 타블릿정도면 충분할 것 같기도 하고..
저는 불편한걸 딱히 못느끼겠던데요......ㅎㅎ
그냥 그러려니 하고 사용 합니다....^^;;
예.. 맞습니다. 그냥 사용하셔도 충분할수 있습니다.
코로라 19로 집에 있다보니, 가능하면 불편한 점을 뺀 나름 최선의 에디터를 만들어 볼까하고 생각중입니다.
아직 갈길이 멀지만.. 사파리도 지원해야되고..
아무래도 모든 브라우저를 호환하려면 fixed를 사용하는 방법이 가장 낫다고 생각합니다..
아니면 그냥 사파리는 고정을 지원하지 않거나.. ^^.....
fixed를 자바스크립트로 제대로 구현한 코드를 찾고 있습니다.
그누보드에서는 위의 제목도 있어서
