스크롤3

• 

  티스토리 스크롤 시 글 위치 표시 프로그레스바 간단하게 만들기 지금부터 본문 글을 위 아래로 이동할 때마다 위치를 표시해 주는 프로그레스바를 만들어 보겠습니다. 인디케이터, 진행바 등으로도 불립니다. 취향에 따라 수평(horizontal) 방향, 수직(vertical) 방향으로 적용할 수 있도록 둘 다 만들어 보았습니다. 제 블로그에는 일단 그냥 둘 다 적용해 놓았습니다. 생각보다 간단합니다. 참고로 북클럽 스킨 기준이오니 다른 스킨에서 정상적으로 작동하지 않을 수 있습니다. 수평 방향은 웬만하면 모든 스킨에서 정상 작동 할 것 같고 수직 방향은 스킨별로 수정을 좀 해야할 가능성이 높습니다. 다른 스킨에서 적용하다가 막히시는 분은 댓글 남겨 주시면 도와 드리도록 할게요. 내용 추가) 스크롤바가 있는데 굳이 프로그레스바가 왜 필요한 지 궁금하신 분이 계실텐데, 보통 .. 정보/블로그 운영팁 2021. 3. 9.

• 

  티스토리 스크롤 자연스럽게 이동하기 목차를 누르면 너무 딱딱하게 이동하는 모습이 그다지 마음에 들지 않아서 수정해 보았습니다. 목차 CSS 수정하는 방법 가장 간단하지만 최신 브라우저가 아니면 적용이 되지 않을 수 있고 브라우저 설정에 따라 액션이 달라질 수 있으므로 아직은 완전한 방법이 될 수 없을 것 같습니다. 그래도 간단히 적용하고 싶으신 분들은 하셔도 괜찮아 보입니다. 참고로 고래스킨은 이 방법을 이용하였습니다. 관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다. html 편집을 클릭합니다. 그럼 다음과 같은 HTML 에디터가 뜨는데 CSS 탭으로 이동하여 작업을 해 보겠습니다. 간단하게 다음과 같이 입력만 하면 됩니다. html { scroll-behavior: smooth; } 다음은 브라우저별 호환성을 나타낸 표입니다. j.. 정보/블로그 운영팁 2021. 2. 24.

• [Ionic4] Scroll Event를 활용한 데이터 추가 로딩 방법 Scroll을 맨 아래까지 이동했을 경우 자동으로 데이터가 로딩되도록 하는 방법입니다. Ionic4에서 ion-infinite-scroll 태그를 제공하지만 원하는대로 동작하지 않는 경우가 있어서 직접 구현했습니다. 1. Scroll Event를 받아 처리하는 코드를 작성합니다. private scrollDepthTriggered = false; async scrollingToBottom($event: any) { if (this.scrollDepthTriggered) { return; } if ($event.target.localName != "ion-content") { return; } const scrollElement = await $event.target.getScrollElement(); c.. 프로그래밍 & IT 정보/Etc. 2020. 7. 3.