Thuộc tính HTML DOM scrollTop
Thí dụ
Nhận số pixel mà nội dung của phần tử <div> được cuộn theo chiều ngang và chiều dọc:
var elmnt = document.getElementById("myDIV");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Thuộc tính scrollTop đặt hoặc trả về số pixel mà nội dung của phần tử được cuộn theo chiều dọc.
Mẹo: Sử dụng thuộc tính scrollLeft để đặt hoặc trả về số pixel mà nội dung của phần tử được cuộn theo chiều ngang.
Mẹo: Để thêm thanh cuộn vào một phần tử, hãy sử dụng thuộc tính phần bổ sung CSS .
Mẹo: Sự kiện trên cuộn xảy ra khi thanh cuộn của một phần tử đang được cuộn.
Hỗ trợ trình duyệt
| Property | |||||
|---|---|---|---|---|---|
| scrollTop | Yes | Yes | Yes | Yes | Yes |
Cú pháp
Trả lại thuộc tính scrollTop:
element.scrollTop
Đặt thuộc tính scrollTop:
element.scrollTop = pixels
Giá trị tài sản
| Value | Description |
|---|---|
| pixels |
Specifies the number of pixels the element's content is scrolled vertically. Special notes:
|
Chi tiết kỹ thuật
| Giá trị trả lại: | Số, đại diện cho số pixel mà nội dung của phần tử đã được cuộn theo chiều dọc |
|---|
Các ví dụ khác
Thí dụ
Cuộn nội dung của phần tử <div> TO 50 pixel theo chiều ngang và 10 pixel theo chiều dọc:
var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft = 50;
elmnt.scrollTop = 10;
Thí dụ
Cuộn nội dung của phần tử <div> BY 50 pixel theo chiều ngang và 10 pixel theo chiều dọc:
var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft += 50;
elmnt.scrollTop += 10;
Thí dụ
Cuộn nội dung của <body> 30 pixel theo chiều ngang và 10 pixel theo chiều dọc:
var body = document.body; // Safari
var html = document.documentElement; //
Chrome, Firefox, IE and Opera places the overflow at the <html> level, unless else is specified. Therefore, we use the
documentElement property for these browsers
body.scrollLeft += 30;
body.scrollTop += 10;
html.scrollLeft += 30;
html.scrollTop += 10;
Thí dụ
Chuyển đổi giữa các tên lớp trên các vị trí cuộn khác nhau - Khi người dùng cuộn xuống 50 pixel từ đầu trang, tên lớp "kiểm tra" sẽ được thêm vào một phần tử (và bị xóa khi cuộn lên lần nữa).
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
Thí dụ
Trượt trong một phần tử khi người dùng đã cuộn xuống 350 pixel từ đầu trang (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í dụ
Vẽ một hình tam giác trên cuộn:
<!-- Use SVG to draw the triangle (has to be <path>) -->
<svg id="mySVG">
<path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z">
</svg>
<script>
// Get the id of the <path> element and the length of <path>
var triangle = document.getElementById("triangle");
var length = triangle.getTotalLength();
// The start position of the drawing
triangle.style.strokeDasharray = length;
// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
triangle.style.strokeDashoffset = length;
// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
window.addEventListener("scroll", myFunction);
function myFunction() {
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
var draw = length * scrollpercent;
// Reverse the drawing (when scrolling upwards)
triangle.style.strokeDashoffset = length - draw;
}
</script>