Làm thế nào để có được vị trí thanh cuộn với Javascript?

Tôi đang cố gắng phát hiện vị trí của thanh cuộn của trình duyệt bằng JavaScript để quyết định vị trí của trang hiện tại. Tôi đoán là tôi phải phát hiện ngón tay cái trên đường đua ở đâu, và sau đó chiều cao của ngón tay cái là phần trăm của tổng chiều cao của đường đua. Tôi có quá phức tạp với nó không, hay JavaScript có cung cấp một giải pháp dễ dàng hơn thế không? Bất kỳ ý tưởng mã khôn ngoan?

Bạn có thể sử dụng element.scrollTopvà element.scrollLeftđể có được phần bù dọc và ngang tương ứng, đã được cuộn. elementcó thể là document.bodynếu bạn quan tâm đến toàn bộ trang. Bạn có thể so sánh nó với element.offsetHeightvà element.offsetWidth(một lần nữa, elementcó thể là cơ thể) nếu bạn cần tỷ lệ phần trăm.

Tôi đã làm điều này cho một <div>trên Chrome.

phần tử .scrollTop - là các pixel bị ẩn ở trên cùng do cuộn. Không có cuộn giá trị của nó là 0.

phần tử .scrollHeight - là pixel của toàn bộ div.

phần tử .clientHeight - là các pixel mà bạn nhìn thấy trong trình duyệt của mình.

var a = element.scrollTop;

sẽ là vị trí.

var b = element.scrollHeight - element.clientHeight;

sẽ là giá trị tối đa cho scrollTop .

var c = a / b;

sẽ là phần trăm cuộn [từ 0 đến 1] .

document.getScroll = function() {
    if (window.pageYOffset != undefined) {
        return [pageXOffset, pageYOffset];
    } else {
        var sx, sy, d = document,
            r = d.documentElement,
            b = d.body;
        sx = r.scrollLeft || b.scrollLeft || 0;
        sy = r.scrollTop || b.scrollTop || 0;
        return [sx, sy];
    }
}

trả về một mảng có hai số nguyên- [scrollLeft, scrollTop]

nó như thế này :)

window.addEventListener("scroll", function (event) {
    var scroll = this.scrollY;
    console.log(scroll)
});

Trả lời năm 2018 :

Cách tốt nhất để làm những việc như vậy là sử dụng API Intersection Observer .

API quan sát giao nhau cung cấp một cách để quan sát không đồng bộ các thay đổi trong giao điểm của phần tử đích với phần tử tổ tiên hoặc với chế độ xem của tài liệu cấp cao nhất.

Trong lịch sử, việc phát hiện khả năng hiển thị của một yếu tố hoặc khả năng hiển thị tương đối của hai yếu tố liên quan đến nhau là một nhiệm vụ khó khăn khi các giải pháp không đáng tin cậy và dễ khiến trình duyệt và các trang web mà người dùng đang truy cập trở nên chậm chạp. Thật không may, khi web đã trưởng thành, nhu cầu về loại thông tin này đã tăng lên. Thông tin giao nhau là cần thiết vì nhiều lý do, chẳng hạn như:

• Lười tải hình ảnh hoặc nội dung khác khi một trang được cuộn.
• Triển khai các trang web "cuộn vô hạn", trong đó ngày càng có nhiều nội dung được tải và hiển thị khi bạn cuộn, để người dùng không phải lướt qua các trang.
• Báo cáo về khả năng hiển thị của quảng cáo để tính toán doanh thu quảng cáo.
• Quyết định có thực hiện các tác vụ hoặc quy trình hoạt hình hay không dựa trên việc người dùng có nhìn thấy kết quả hay không.

Việc thực hiện phát hiện giao lộ trong quá khứ liên quan đến các trình xử lý sự kiện và các vòng lặp gọi các phương thức như Element.getBoundingClientRect () để xây dựng thông tin cần thiết cho mọi thành phần bị ảnh hưởng. Vì tất cả các mã này chạy trên luồng chính, thậm chí một trong số này có thể gây ra vấn đề về hiệu năng. Khi một trang web được tải với các thử nghiệm này, mọi thứ có thể trở nên hết sức xấu xí.

Xem ví dụ mã sau:

var options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

var observer = new IntersectionObserver(callback, options);

var target = document.querySelector('#listItem');
observer.observe(target);

Hầu hết các trình duyệt hiện đại đều hỗ trợ IntersectionObserver , nhưng bạn nên sử dụng polyfill để tương thích ngược.

nếu bạn quan tâm cho toàn bộ trang. bạn có thể sử dụng cái này:

document.body.getBoundingClientRect().top

Nếu bạn đang sử dụng jQuery, có một hàm hoàn hảo cho bạn: .scrollTop ()

tài liệu ở đây -> http://api.jquery.com/scrollTop/

lưu ý: bạn có thể sử dụng chức năng này để truy xuất HOẶC đặt vị trí.

xem thêm: http://api.jquery.com/?s=scroll

Đây là cách khác để có được vị trí cuộn

const getScrollPosition = (el = window) => ({
  x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
  y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});

Tôi nghĩ rằng chức năng sau đây có thể giúp có các giá trị tọa độ cuộn:

const getScrollCoordinate = (el = window) => ({
  x: el.pageXOffset || el.scrollLeft,
  y: el.pageYOffset || el.scrollTop,
});

Tôi có ý tưởng từ câu trả lời này với một chút thay đổi.