Thuộc tính scrollTop của Element DOM HTML

Định nghĩa và cách sử dụng

scrollTop Thuộc tính thiết lập hoặc trả về số điểm ảnh cuộn nội dung của phần tử theo chiều dọc.

Xem thêm:

Thuộc tính scrollLeft

Thuộc tính overflow của CSS

Sự kiện onscroll

Mô hình

Ví dụ 1

Lấy số điểm ảnh cuộn nội dung của "myDIV":

const element = document.getElementById("myDIV");
let x = elmnt.scrollLeft;
let y = elmnt.scrollTop;

Thử ngay

Ví dụ 2

Cuộn nội dung của "myDIV" theo chiều ngang đến 50 điểm ảnh, theo chiều dọc đến 10 điểm ảnh:

const element = document.getElementById("myDIV");
element.scrollLeft = 50;
element.scrollTop = 10;

Thử ngay

Ví dụ 3

Cuộn nội dung của "myDIV" theo chiều ngang 50 điểm ảnh, theo chiều dọc 10 điểm ảnh:

const element = document.getElementById("myDIV");
element.scrollLeft += 50;
element.scrollTop += 10;

Thử ngay

Ví dụ 4

Cuộn nội dung của <body> theo hướng ngang 30 pixel, theo hướng dọc 10 pixel:

const html = document.documentElement;
html.scrollLeft += 30;
html.scrollTop += 10;

Thử ngay

Ví dụ 5

Chuyển đổi giữa các tên lớp ở các vị trí cuộn khác nhau - khi người dùng cuộn từ đầu trang xuống dưới 50 pixel, tên lớp "test" sẽ được thêm vào phần tử (và sẽ bị xóa khi cuộn lên):

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  }
    document.getElementById("myP").className = "";
  }
}

Thử ngay

Ví dụ 6

Khi người dùng cuộn từ đầu trang xuống dưới 350 pixel, cuộn vào một phần tử (thêm lớp slideUp):

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("myImg").className = "slideUp";
  }
}

Thử ngay

Cú pháp

Trả về thuộc tính scrollTop:

element.scrollTop

Đặt thuộc tính scrollTop:

element.scrollTop = pixels

Giá trị thuộc tính

Giá trị Mô tả
pixels

Số pixel di chuyển theo chiều dọc của nội dung phần tử.

  • Nếu số này là số âm, thì số này được đặt thành 0.
  • Nếu phần tử không thể cuộn, thì số này được đặt thành 0.
  • Nếu số này lớn hơn giá trị tối đa được phép, thì đặt số này thành giá trị tối đa.

Trả về giá trị

Loại Mô tả
Số Số pixel di chuyển theo chiều dọc của nội dung phần tử.

Trình duyệt hỗ trợ

Tất cả các trình duyệt đều hỗ trợ element.scrollTop：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ