Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Scroll Indicator Và 15 Ví Dụ Thực Tế Cho Website

Cách Tạo Scroll Indicator Và 15 Ví Dụ Thực Tế Cho Website


Ngày 24 Tháng 1 Năm 2021

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.

Nguồn

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.

Nguồn

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

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.

Nguồn

Thiết Kế Scroll Progress Bar CSS

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.

Nguồn

Thiết Kế Scroll Progress Bar Javascript

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.

Nguồn

Thiết Kế SVG Circular Scroll Progress Bar

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.

Nguồn

Cách Tạo Scroll Progress Bar Jquery

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.

Nguồn

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.

Nguồn

Thiết Kế CSS3 Responsive Progress Scroll

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.

Nguồn

Cách Tạo Scroll Indicator Jquery

Scroll Indicator Jquery

Kết quả bạn xem bên dưới nhé!

See the Pen Scroll interactions by Ivan (@vank0) on CodePen.

Nguồn

Thiết Kế Vertical Scroll Indicator

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.

Nguồn

Cách Tạo Horizontal Scroll Indicator Javascript

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.

Nguồn

Thiết Kế Scroll Progress VueJS

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.

Nguồn

Thiết Kế React Scroll Progress Indicator

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.

Nguồn

Cách Tạo Progress Bar Gradient CSS

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.

Nguồn

Thiêt Kế Progress Bar Percentage Javascript

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.

Nguồn

Thiết Kế jQuery Reading Progress Indicator

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.

Nguồn

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ẻ!