Scroll Indicator là một thanh tiến trình biểu thị vị trí hiện tại của người dùng trong trang web thông qua việc xác định vị trí của thanh cuộn. Và để hiểu rõ hơn thì chúng ta sẽ cùng nhau đi vào tìm hiểu cách tạo nó bằng HTML, CSS và Javascript nhé!
Cách Xây Dựng Chức Năng Scroll Indicator
Đầu tiên chúng ta sẽ đi vào tạo cấu trúc phần tử HTML cho nó nhé!
HTML:
<!--Nguồn W3School-->
<div class="header">
<h2>Bạn hãy scroll xuống</h2>
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
<!--Phần nội dung để giúp chúng ta dễ dàng minh họa cho chức năng Scroll Indicator-->
<div class="noi_dung">
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
CSS
body {
margin: 0;
font-size: 26px;
font-family: Arial, Helvetica, sans-serif;
}
.header {
position: fixed;
top: 0;
z-index: 1;
width: 100%;
background-color: DodgerBlue;
color: white;
}
.header h2 {
text-align: center;
}
.progress-container {
width: 100%;
height: 8px;
background: #ccc;
}
.progress-bar {
height: 8px;
background: DarkOrange;
width: 0%;
}
.noi_dung {
padding: 100px 0;
margin: 50px auto 0 auto;
width: 80%;
}
Tiếp theo chúng ta sẽ thêm Javascript để thực hiện chức năng scroll indicator cho nó nhé!
Javascript
/*Hàm sẽ được thực hiện khi người dùng cuộn trang*/
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
Và kết quả cuối cùng bạn xem ở bên dưới nhé (Bạn nên chuyển sang chế độ scren 0.5x hay 0.25x để thấy kết quả tốt hơn nha):
See the Pen NWNRxRP by haycuoilennao19 (@haycuoilennao19) on CodePen.
Xây Dựng Chức Năng Scroll Indicator Bằng CSS Thuần
Phần tiếp theo mình sẽ giới thiệu đến bạn cách tạo khác cho chức năng này thông qua thuộc tính calc trong CSS. Và để hiểu rõ hơn chúng ta hãy cùng nhau xem đoạn mã bên dưới nhé!
HTML:
<main>
<header>
<h1>Scroll Indicator</h1>
</header>
<h2>Bạn hãy kéo xuống để thấy kết quả nhé</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porta arcu sed tellus molestie, at consequat massa tristique. Aenean vulputate erat in ipsum cursus venenatis. In in arcu interdum metus vehicula pharetra. In tristique ipsum in tellus dictum sollicitudin. Pellentesque id semper mi, a finibus eros. Ut hendrerit dictum varius. Nulla facilisi. Donec id turpis tincidunt, semper augue quis, gravida odio. Sed convallis ante vestibulum lobortis rhoncus. Suspendisse potenti. Praesent maximus sapien quis massa mattis, at iaculis neque finibus. Proin pretium blandit dignissim. Aliquam magna mauris, congue vitae eros in, efficitur lobortis mi. Ut porta porta aliquet.</p>
<p>Quisque sit amet ultricies libero, non eleifend nisi. Proin id sem volutpat, pulvinar neque a, tempus tellus. Aliquam tincidunt libero a dolor posuere dictum. In mattis, nibh eu eleifend gravida, justo elit hendrerit lorem, vitae varius est risus a turpis. Sed vel porttitor velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur varius ullamcorper gravida. Maecenas tempus id metus ac consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Donec neque arcu, tincidunt id nisl sed, luctus pulvinar lectus. Pellentesque ornare interdum justo, sed pretium purus lacinia et. Duis pellentesque et massa in finibus. Sed vehicula nec velit quis rutrum. Vivamus eu lobortis justo, sed hendrerit dolor. Nam vitae tellus vel eros semper malesuada. Cras vel neque dictum, accumsan sapien non, laoreet lacus. Vestibulum et fringilla purus. Pellentesque malesuada arcu sed eros iaculis, ac ultricies metus sodales. Vivamus gravida nulla id dictum fermentum. Etiam iaculis ante quis arcu dapibus ultrices. Nulla venenatis efficitur enim nec dictum. In blandit velit at est ullamcorper, in porta mi molestie. Morbi tincidunt ligula eu leo maximus bibendum. Nam ligula nisl, rutrum quis vulputate placerat, consequat non magna.</p>
<p>Nullam nunc velit, aliquet a turpis eu, feugiat dapibus lorem. Proin eget egestas enim, ac malesuada risus. Phasellus vel placerat elit, vitae dictum libero. Mauris vel interdum tellus, gravida posuere nunc. In in odio dui. Sed sit amet ultrices leo. Integer auctor ornare elit vitae pellentesque. Integer et mattis massa. Aenean sed massa tincidunt, efficitur nunc eget, tempor magna. Quisque luctus elit lectus, sed scelerisque neque ultrices at. Nunc vel nulla eu libero dignissim accumsan. Nunc eu vestibulum metus. Etiam ac est nec libero eleifend commodo vel ac tellus. Proin malesuada purus sed ante interdum, laoreet pretium mauris ornare.</p>
<p>Mauris porttitor posuere justo vitae ultricies. Sed in pretium urna. Cras orci nulla, bibendum vel nisl non, convallis mattis nisl. Curabitur lorem odio, vulputate ac mollis eget, vulputate vitae neque. Nullam interdum at lacus at sodales. Nulla lobortis elit rhoncus, aliquet ex id, aliquet lorem. Sed ante urna, porta et lobortis nec, aliquet ut nibh. Praesent et tortor at sapien venenatis dapibus non vitae dolor. Phasellus sit amet dignissim justo. Praesent dignissim finibus sem, vitae accumsan felis rhoncus at. Proin molestie vel quam id dapibus. Vestibulum vel ultricies purus, nec blandit mi. Nulla dapibus ex vitae velit venenatis, ac vehicula magna cursus.</p>
</main>
CSS:
html, body {
margin: 0;
padding: 0;
}
header {
position: fixed;
top: 0;
height: 125px;
width: 100vw;
background: #ECF0F1;
}
body {
font-size: 1.25rem;
background-color:#fafafa;
background: linear-gradient(to right top, #0089f2 50%, #DDD 50%);
background-size: 100% calc(100% - 100vh + 129px);
background-repeat: no-repeat;
}
body:before {
content: '';
position: fixed;
top: 128px;
bottom: 0;
width: 100%;
z-index: -1;
background: white;
}
main {
margin-top: 128px;
}
Và kết quả cuối cùng bạn xem ở bên dưới nhé:
See the Pen QWNKymE by haycuoilennao19 (@haycuoilennao19) on CodePen.
Các Ví Dụ Khác Về Scroll Indicator
Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.
Scroll Indicator CSS3
Kết quả bạn xem bên dưới nhé!
See the Pen Scroll Progress by Brett Smith (@jbsmith731) on CodePen.
Thiết Kế Scroll Progress Bar CSS
Kết quả bạn xem bên dưới nhé!
See the Pen scroll-progress by Swarup Kumar Kuila (@uiswarup) on CodePen.
Thiết Kế Scroll Progress Bar Javascript
Kết quả bạn xem bên dưới nhé!
See the Pen Scroll Progress Bar by adelciotto (@adelciotto) on CodePen.
Thiết Kế SVG Circular Scroll Progress Bar
Kết quả bạn xem bên dưới nhé!
See the Pen SVG Circular Scroll Progress Bar by Kyle Foster (@hkfoster) on CodePen.
Cách Tạo Scroll Progress Bar Jquery
Kết quả bạn xem bên dưới nhé!
See the Pen Scroll Progress Bar by Eric Porter (@EricPorter) on CodePen.
Cách Tạo Scroll Progress Bar Jquery Với SVG
Kết quả bạn xem bên dưới nhé!
See the Pen Scroll Progress Indicator With jQuery and SVG by Anthony Young (@ayoungh) on CodePen.
Thiết Kế CSS3 Responsive Progress Scroll
Kết quả bạn xem bên dưới nhé!
See the Pen CSS3 Responsive Progress Scroll by Mario Vidov (@mel) on CodePen.
Cách Tạo Scroll Indicator Jquery
Kết quả bạn xem bên dưới nhé!
See the Pen Scroll interactions by Ivan (@vank0) on CodePen.
Thiết Kế Vertical Scroll Indicator
Kết quả bạn xem bên dưới nhé!
See the Pen Smoooth Scroll by Haja Randriakoto (@haja-ran) on CodePen.
Cách Tạo Horizontal Scroll Indicator Javascript
Kết quả bạn xem bên dưới nhé!
See the Pen MDC Web Scrolling Progress by Rustem Gareev (@rustemgareev) on CodePen.
Thiết Kế Scroll Progress VueJS
Kết quả bạn xem bên dưới nhé!
See the Pen Vue: Scroll Progress by Ryan (@RyanNHG) on CodePen.
Thiết Kế React Scroll Progress Indicator
Kết quả bạn xem bên dưới nhé!
See the Pen React Scroll Progress Indicator by Jonathan T. (@jon_tay) on CodePen.
Cách Tạo Progress Bar Gradient CSS
Kết quả bạn xem bên dưới nhé!
See the Pen Reading Progess Bar CSS only by Ricardo Prieto (@ricardpriet) on CodePen.
Thiêt Kế Progress Bar Percentage Javascript
Kết quả bạn xem bên dưới nhé!
See the Pen SVG Reading Progress Indicator by SachaG (@SachaG) on CodePen.
Thiết Kế jQuery Reading Progress Indicator
Kết quả bạn xem bên dưới nhé!
See the Pen Reading Progress Bar by James Podles (@jpod) on CodePen.
Show Scroll Progress on Navigation Links
Kết quả bạn xem bên dưới nhé!
See the Pen Show Scroll Progress on Navigation Links by Maciej Leszczyński (@asistapl) on CodePen.
Scroll progress & gsap ScrollTrigger
Kết quả bạn xem bên dưới nhé!
See the Pen Scroll progress & gsap ScrollTrigger by Louis Hoebregts (@Mamboleoo) on CodePen.
CSS-only scroll indicator
Kết quả bạn xem bên dưới nhé!
See the Pen CSS-only scroll indicator (adapted with more options) by Ines Montani (@ines) on CodePen.
Back to top with progress indicator
Kết quả bạn xem bên dưới nhé!
See the Pen Back to top with progress indicator by Ivan Grozdic (@ig_design) on CodePen.
Page Progress Bar Example
Kết quả bạn xem bên dưới nhé!
See the Pen Sticky Title/Page Progress Bar by Ryan Mulligan (@hexagoncircle) on CodePen.
Reading progress bar
Kết quả bạn xem bên dưới nhé!
See the Pen Reading Progress Bar by Ed Hicks (@blucube) on CodePen.
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những cách tạo scroll indicato hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!
