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; 이부분은 단지 에디터 메뉴가 스크롤이 내려가도 상단에 고정 되도록 하는 것입니다.
링크에서 테스트 해보시면 좋을듯..... 그리고
"에디터 패널을 클릭하면 커서가 있는 곳이 툴바 아래도 들어가는데.." 이말이 무슨뜻인지 모르겠습니다.....ㅠㅠ
아무래도 모든 브라우저를 호환하려면 fixed를 사용하는 방법이 가장 낫다고 생각합니다..
아니면 그냥 사파리는 고정을 지원하지 않거나.. ^^.....