Thuộc tính pageYOffset của Window trong HTML

Thuộc tính pageYOffset của đối tượng Window trả về số pixel mà tài liệu hiện tại đã được cuộn dọc từ góc trên bên trái.

Cú pháp

window.pageYOffset

Thuộc tính chỉ đọc (read-only) này trả về một số nguyên đại diện cho vị trí cuộn dọc hiện tại.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%) no-repeat;
    text-align: center;
  }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 40%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
    margin: 1rem auto;
  }
  .box {
    width: 1000px;
    height: 1000px;
    background: teal;
    color: #fff;
    font-size: 1.5rem;
    text-align: left;
    padding: 20px;
  }
</style>
<body>
<h1>Demo thuộc tính pageYOffset của Window</h1>
<button onclick="scrollFn()" class="btn">Cuộn trang</button>
<button onclick="display()" class="btn">Hiển thị giá trị pageYOffset</button>
<div class="box"></div>
<script>
  function display() {
    document.querySelector('.box').innerHTML = 'Giá trị pageYOffset: ' + window.pageYOffset + 'px';
  }
  function scrollFn() {
    window.scrollBy(0, 10);
  }
</script>
</body>
</html>

Kết quả

Nhấn "Hiển thị giá trị pageYOffset" để xem vị trí cuộn hiện tại (ban đầu là 0).

Nhấn "Cuộn trang" để cuộn xuống 10px, sau đó nhấn lại nút hiển thị để thấy giá trị tăng lên.

Lưu ý: pageYOffset tương đương với scrollY và được hỗ trợ rộng rãi. Dùng cho việc theo dõi vị trí cuộn để tạo hiệu ứng parallax, sticky header, hoặc lazy loading.