스크롤 진행률 표시줄 효과를 얻기 위해 순수 CSS를 사용하는 여러 기술에 대한 자세한 설명

이 기사에서는 놀라운 순수 CSS 스크롤 진행률 표시줄 효과를 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

첫 번째 질문, CSS를 사용하여 다음 스크롤 막대 효과를 얻는 방법은 무엇입니까?

은 상단에 있는 노란색 스크롤 진행률 표시줄로, 페이지가 스크롤됨에 따라 길이가 변합니다.

아래를 계속 읽기 전에 잠시 시간을 내셔도 됩니다. 위의 효과에 대해 생각해 보거나 JS를 사용하지 않고도 위의 효과를 영리하게 얻을 수 있는지 직접 시도해 보세요.

좋아요, 계속하세요. 이 효과는 제가 사업을 전개하는 과정에서 겪었던 작은 문제와 비슷합니다. 사실 자바스크립트를 사용해도 첫 반응은 매우 번거롭다는 것입니다. 그래서 CSS만 사용하여 이 효과를 얻을 수 있는지 궁금합니다.

요구 사항 분석

처음 이 효과를 봤을 때 다음 스크롤 애니메이션은 페이지 스크롤 거리를 계산해야 하기 때문에 CSS만으로는 완성할 수 없다고 느꼈습니다.

CSS만 사용하려면 다른 방법을 찾아 영리한 방법을 사용해야 합니다.

좋아요. CSS를 사용하여 단계별로 이 효과를 얻기 위해 몇 가지 트릭을 사용해 보겠습니다. 난이도 분석:

• 사용자가 현재 페이지를 스크롤하는 거리를 파악하고 상단 진행률 표시줄에 알리는 방법은 무엇입니까?

일반적인 분석은 이래야 하는데 이는 전통적인 사고방식에 속합니다. 진행률 표시줄은 페이지 스크롤 거리를 수신하고 너비를 변경하는 진행률 표시줄일 뿐입니다. 페이지 스크롤과 진행 표시줄이 전체라면 어떨까요?

Achieve 요구 사항

이제 더 이상 문제가 되지 않습니다. Linear Gradient를 사용하여 이 기능을 실현해 봅시다.

페이지가 로 둘러싸여 있고 전체 본문을 스크롤할 수 있다고 가정해 보겠습니다. 왼쪽 하단에서 오른쪽 상단으로 선형 그래디언트를 추가하세요. 中，可以滚动的是整个 body，给它添加这样一个从左下到到右上角的线性渐变：

body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-repeat: no-repeat;
}

那么，我们可以得到一个这样的效果：

Wow，黄色块的颜色变化其实已经很能表达整体的进度了。其实到这里，聪明的同学应该已经知道下面该怎么做了。

我们运用一个伪元素，把多出来的部分遮住：

body::after {
    content: "";
    position: fixed;
    top: 5px;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    z-index: -1;
}

为了方便演示，我把上面白色底改成了黑色透明底，：

实际效果达成了这样：

眼尖的同学可能会发现，这样之后，滑到底的时候，进度条并没有到底：

究其原因，是因为 body 的线性渐变高度设置了整个 body 的大小，我们调整一下渐变的高度：

body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-size: 100% calc(100% - 100vh + 5px);
    background-repeat: no-repeat;
}

这里使用了 calc 进行了运算，减去了 100vh，也就是减去一个屏幕的高度，这样渐变刚好在滑动到底部的时候与右上角贴合。

而 + 5px 则是滚动进度条的高度，预留出 5pxrrreee

그런 다음, 우리는 다음과 같은 효과를 얻을 수 있습니다:

와, 노란색 블록의 색상 변화는 실제로 전체적인 진행 상황을 표현할 수 있습니다. 사실, 지금쯤이면 똑똑한 학생들은 다음에 무엇을 해야 할지 이미 알고 있을 것입니다.

추가 부분을 덮기 위해 의사 요소를 사용합니다: rrreee시연의 편의를 위해 위의 흰색 배경을 검정색 투명 배경으로 변경했습니다:

실제 효과는 다음과 같습니다.

눈이 예리한 학생들은 눈치챌 수 있습니다. 그 후 아래쪽으로 슬라이드하면 진행률 표시줄이 아래쪽에 도달하지 않습니다. 🎜🎜🎜🎜🎜🎜이유는 body의 선형 그래디언트 높이가 전체 몸체의 크기를 설정하기 때문입니다. 그래디언트: 🎜rrreee 🎜여기에서는 calc를 사용하여 계산을 수행하고 100vh를 뺍니다. 이는 화면 높이를 빼는 것이므로 그래디언트가 화면에 그대로 유지됩니다. 하단으로 미끄러질 때 오른쪽 상단 모서리. 🎜🎜그리고 + 5px는 스크롤 진행률 표시줄의 높이이며 높이는 5px로 남습니다. 효과를 다시 살펴보겠습니다. 완벽합니다. 🎜🎜🎜🎜🎜🎜🎜 이 시점에서 이 요구 사항이 완벽하게 실현되었습니다. 이는 완전한 데모: 🎜🎜🎜CodePen 데모 – 선형 그래디언트를 사용하여 스크롤링을 구현합니다. 진행률 표시줄🎜🎜 🎜🎜🎜🎜🎜🎜저는 평소에 다른 사람들이 쓴 글을 쓰지 않습니다. 저는 이 기술을 오래 전에 본 적이 있습니다. 우연히 정오에 이 기술을 사용하여 조사하지 않고 이 글을 썼습니다. 이 트릭을 처음으로 발명한 사람은 누구입니까? 비슷한 기사가 있었는지 모르겠으니 다음 기사도 살펴보세요. 🎜🎜🎜 W3C -- 스크롤 표시기의 순수 CSS 구현🎜🎜

마지막으로

사실 이것은 아주 멋진 그라디언트아주 작은 트릭입니다. 생각지도 못했던 더 흥미로운 CSS를 보려면 여기로 와서 살펴보세요.

CSS-Inspiration -- CSS Inspiration

좋아요, 이 글은 여기서 끝입니다. 도움이 되길 바랍니다 :)

원본 주소 : https://segmentfault.com/a/1190000017830427

저자 : chokcoco

더 많은 프로그래밍 관련 지식을 보시려면 Programming Video를 방문해 주세요! !

위 내용은 스크롤 진행률 표시줄 효과를 얻기 위해 순수 CSS를 사용하는 여러 기술에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!