Computer >> Máy Tính >  >> Lập trình >> Javascript

Cách cuộn xuống cuối trang một cách mượt mà bằng JavaScript &CSS

Tìm hiểu cách cuộn người dùng xuống cuối một trang web dài một cách trơn tru, bằng JavaScript và một chút CSS.

Nếu bạn muốn cung cấp cho người dùng của mình khả năng cuộn xuống cuối trang một cách mượt mà, bạn có thể sử dụng thuộc tính CSS có tên là scroll-behavior và một phương thức JavaScript được gọi là scrollIntoView() .

Bạn sẽ cần những thứ sau:

  • một trang web dài với đủ nội dung để kích hoạt thanh cuộn trục y ở bên phải trình duyệt của bạn
  • một phần tử cố định ở đầu trang với id
  • bất kỳ phần tử nào có id ở cuối trang
  • scroll-behavior Thuộc tính CSS
  • scrollIntoView() Thuộc tính JavaScript

Hãy cùng tìm hiểu bằng ví dụ!

Ví dụ về bố cục HTML

Bạn có thể sử dụng ví dụ đánh dấu HTML sau để tìm hiểu (vui lòng thay thế <p>....</p> dummy elements với nội dung thực):

<main>
  <p><a id="scroll-to-bottom">Scroll to bottom</a></p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p id="page-bottom">You have reached the bottom of this page!!</p>
</main>

Lưu ý, chúng ta có một phần tử neo <a> ở trên cùng với id là scroll-to-bottom và một phần tử ở dưới cùng có id là page-bottom .

CSS

Để kích hoạt cuộn trơn tru, hãy thêm phần sau vào biểu định kiểu CSS của bạn:

html {
  scroll-behavior: smooth;
}

/* Layout */
main {
  max-width: 700px;
  margin: 3rem auto;
  padding: 0 1rem;
}

#scroll-to-bottom {
  font-weight: bold;
  color: green;
}

Lưu ý:phép thuật cuộn đến từ scroll-behavior: smooth; , phần còn lại của kiểu CSS ở trên hoàn toàn là thẩm mỹ.

JavaScript

Để cuộn người dùng một cách trơn tru từ đầu xuống cuối trang khi người dùng nhấp vào Cuộn xuống dưới cùng thêm mã JavaScript sau:

let scrollToBottom = document.querySelector("#scroll-to-bottom")
let pageBottom = document.querySelector("#page-bottom")

scrollToBottom.addEventListener("click", function() {
  pageBottom.scrollIntoView()
})

Cách hoạt động của mã JavaScript

  • Đầu tiên, chúng tôi khai báo hai biến để tham chiếu scroll-to-bottom và page-bottom tương ứng.
  • Sau đó, chúng tôi đính kèm một trình xử lý sự kiện vào scrollToBottom và yêu cầu nó lắng nghe cụ thể các sự kiện nhấp chuột.
  • Bên trong function() { .. } chúng tôi đính kèm scrollIntoView() phương thức đến phần tử cuối trang pageBottom .

Bây giờ bất cứ khi nào ai đó nhấp vào cuộn xuống dưới cùng hàm thực thi scrollIntoView và cuộn người dùng xuống dưới cùng nơi page-bottom id được định vị.

Lưu ý:nếu bạn xóa scroll-behavior: smooth; về mặt kỹ thuật, quá trình cuộn sẽ vẫn diễn ra, nhưng nó sẽ đột ngột.

Bạn cũng có thể cuộn mượt mà với JavaScript vani thuần túy (không có thuộc tính CSS) nhưng điều đó đòi hỏi nhiều mã hơn những gì bạn thấy trong ví dụ này.

Kiểm tra tất cả mã demo.

Cuộn xuống dưới hữu ích như thế nào trong cuộc sống thực?

Một trường hợp sử dụng được nghĩ đến là cho phép khách truy cập nhanh chóng cuộn đến bản tóm tắt của một phần nội dung dài hơn mà họ có thể không có thời gian để đọc ngay bây giờ.

Khả năng tương thích của trình duyệt

scroll-behavior Thuộc tính CSS không tương thích với Internet Explorer hoặc Safari. Đối với những trình duyệt đó, bạn sẽ cần một giải pháp JavaScript thuần túy.