Khóa học đề xuất:

Thuộc tính scrollX của Window

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

scrollX Thuộc tính trả về số pixel cuộn từ góc trên cùng bên trái của cửa sổ.

Thuộc tính là chỉ đọc.

scrollX thông báo Thuộc tính pageXOffset bằng Thuộc tính pageXOffset

Để đảm bảo tương thích trình duyệt, hãy sử dụng thuộc tính. window.pageXOffset thay vì window.scrollX.

Xin xem thêm:

Thuộc tính pageXOffset

Thuộc tính pageYOffset

Mô hình

Ví dụ 1

Cuộn nội dung 100 pixel và thông báo scrollX và scrollY:

window.scrollBy(100, 100);
alert(window.scrollX + window.scrollY);

Thử ngay

Ví dụ 2

Tạo thanh điều hướng dính:

// Lấy thanh điều hướng
const navbar = document.getElementById("navbar");
// Lấy vị trí cuộn của thanh điều hướng
const sticky = navbar.offsetTop;
// Khi bạn đến vị trí cuộn của nó, thêm lớp sticky vào thanh điều hướng. Loại bỏ lớp sticky khi rời khỏi vị trí cuộn.
function myFunction() {
  if (window.scrollY >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Thử ngay

Cú pháp

window.scrollX

hoặc:

scrollX

Giá trị trả về

Loại Mô tả
Số Số pixel cuộn từ góc trên cùng bên trái của cửa sổ.

Hỗ trợ trình duyệt

Tất cả các trình duyệt đều hỗ trợ window.scrollX:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Hỗ trợ 9-11 Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ