CSS 전용 읽기 위치 표시기

6357 단어 htmlwebdevcss
일부 페이지(주로 뉴스 기사 및 블로그 게시물) 상단에서 진행률 표시기를 읽는 사람들을 보았을 것입니다. 기사를 읽을수록 커지는 막대이며 시각적으로 읽을 거리가 얼마나 남았는지 알려줍니다. 이 구성 요소는 스크롤 막대가 항상 표시되지 않는 모바일에서 특히 좋은 기능입니다. 그러나 단일 HTML 요소와 약간의 CSS만으로 읽기 표시기를 코딩할 수 있다는 것을 알고 계셨습니까? JavaScript 코드가 전혀 없습니다.

이 게시물에서는 CSS에서 읽기 표시기를 빌드하는 방법에 대해 설명합니다. 여기에서 소스 코드를 확인할 수 있습니다CodePen demo.



코드



먼저 빈 HTML 요소가 하나만 필요합니다.

<div class="reading-indicator"></div>


이 태그는 페이지의 루트(절대 위치 지정을 사용하여 문서 높이 가져오기)로 이동한 다음 ::before 및 ::after 의사 요소를 사용하여 진행률 표시줄을 "그립니다".

참고: <body> 및 ::before를 사용하여 ::after...에 직접 명시적 요소 없이 더 간단한 읽기 진행률 표시기를 만들 수 있지만 구식이라고 합니다. "예기치 않은 부작용, "그래서 나는 그것에 대한 요소를 만드는 것을 좋아합니다.

읽기 지표 클래스의 스타일은 다음과 같습니다.

.reading-progress {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: calc(100% - 100vh);
   z-index: -1;
   overflow: hidden;
}


이 코드와 관련된 몇 가지 중요한 사항:
  • 높이는 펑키한 값입니다. 왜 그런 겁니까? 왜 100%만 안되나요? 100%를 사용하면 페이지의 전체 크기가 사용되어 100%에 도달하기 전에 읽기 표시기 진행이 중지됩니다(100%가 페이지의 정확한 하단이 되기 때문). 뷰 프레임의 높이(100vh)를 고려하고 요소의 높이로 리팩터링해야 합니다.
  • overflow: hidden는 필수는 아니지만 알다시피 표시기 가장자리가 수직이 아니라 대각선이므로 100%에 도달하면 전체 막대가 전체 너비를 차지하지 않습니다. 이를 수정하기 위해 의사 요소를 컨테이너보다 약간 넓게 만들고 overflow: hidden을 사용하여 불필요한 수평 스크롤 막대를 방지합니다.

    • 이 요소는 컨테이너일 뿐입니다. 읽기 표시기를 그리는 것은 의사 요소입니다.

    .reading-progress::before {
   content: "";
   position: fixed;
   top: 0;
   left: -0.5%;
   width: 101%;
   height: 10px;
   background: linear-gradient(90deg, #369, #396);
}


    그러나 이것으로 우리는 단지 수평선을 갖게 됩니다. 그렇다면 사용자가 스크롤할 때 크기를 늘리거나 줄이려면 어떻게 해야 할까요? 그것이 속임수가 시작되는 곳입니다. 우리는 ::before 부모 요소의 전체 크기와 대각선 배경, 배경 색상의 절반(나중에 문제가 되므로 주의) 및 나머지 절반을 차지하는 의사 요소를 사용합니다.

    .reading-progress::after {
   content: "";
   position: absolute;
   top: 0;
   left: -0.5%;
   width: 101%;
   height: 100%;
   background: linear-gradient(to bottom left, #fff 50%, #fff0 50%);
}


    그리고 마지막(그러나 중요한) 스타일 변경: html 태그에 상대 위치를 지정해야 하므로 높이가 읽기 표시기에 영향을 미칩니다.

    html {
   position: relative;
}


    그게 다야. 이것이 요령입니다. ::after 의사 요소가 ::after 를 완전히 덮지만 페이지를 스크롤하고 삼각형 배경에서 진행함에 따라 점점 더 많은 막대가 표시됩니다(고정된 위치에 있으므로 항상 보입니다).

    몇 가지 생각



    읽기 표시기를 만드는 이 방법은 완벽하지 않습니다. 몇 가지 흥미로운 점과 몇 가지 단점이 있습니다. 찬반 양론의 짧은 목록은 다음과 같습니다.

    장점:
  • 코딩 및 개발이 간단합니다.
  • 반응형(상대 단위 FTW!)
  • 모든 브라우저에서 지원됩니다.

    • 단점:
  • 평평한 배경이 필요합니다.
  • 시각적으로 매력적이지 않음(끝이 기울어짐)
  • 페이지 수준에서만 작동합니다
    • .

    약간의 조정을 통해 기사 수준에서 작동할 수 있습니다. 그러나 현재 구현에서는 다른 어떤 것보다 미화된 스크롤바 표시기에 가깝습니다. 실용적이지 않다는 의미는 아닙니다. 위에서 언급했듯이 일부 시나리오, 특히 휴대폰이나 태블릿에서 관여할 수 있습니다.

    몇 가지 실패한 테스트를 수행했지만 여전히 다른 방법이 있어야 한다고 생각합니다(아마도 ::before 및 배경 첨부?)
    속삭임 대 현재 대안 평가
    Cucumber/JUnit 5를 사용한 극작가 - PicoContainer를 사용한 종속성 주입

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage