Tôi đang cố xử lý một số mã dựa trên giá trị 'document.documentElement.scrollTop'. Nó trả về '348' trong FF và IE nhưng trong Chrome nó trả về '0'. Tôi có cần phải làm gì để khắc phục vấn đề này không?document.documentElement.scrollGiá trị trả lại hàng đầu khác trong Chrome
FF:
>>> document.documentElement.scrollTop
342
Chrome:
document.documentElement.scrollTop
0
Hãy thử điều này
window.pageYOffset || document.documentElement.scrollTop
Thực tế thú vị: điều này không phải lúc nào cũng hoạt động trong một WebView trong Windows Phone. Trường hợp cạnh bí truyền, nhưng cái gì tôi vừa đâm vào. Những con số này đôi khi khác nhau, nhấn mạnh vào đôi khi, và trangYOffset xuất hiện là sai khi chúng được. – Aaron
Tài liệu.body.scrollTop có hoạt động trên điện thoại Windows không? –
Cách dựa trên tiêu chuẩn của việc di chuyển là window.scrollY. Điều này được hỗ trợ bởi Chrome, Firefox, Opera, Safari và IE Edge trở lên. Nếu bạn chỉ hỗ trợ các trình duyệt này, bạn nên đi với thuộc tính này.
IE> = 9 hỗ trợ thuộc tính tương tự window.pageYOffset, vì mục đích tương thích trả về giống như window.scrollY trong các trình duyệt gần đây, mặc dù có thể nó không được chấp nhận tại một số thời điểm.
Sự cố khi sử dụng document.documentElement.scrollTop hoặc document.body.scrollTop là cuộn không cần phải được xác định trên một trong các tùy chọn này. Chrome và Safari xác định cuộn của chúng trên phần tử <body> trong khi Firefox xác định nó trên thành phần <html> được trả lại bởi document.documentElement, chẳng hạn. Đây không phải là tiêu chuẩn hóa và có khả năng thay đổi trong các phiên bản tương lai của trình duyệt. Tuy nhiên, nếu không có scrollY hoặc pageYOffset, đây là cách duy nhất để có được cuộn.
TL; DR:
window.scrollY || window.pageYOffset || document.body.scrollTop + (document.documentElement && document.documentElement.scrollTop || 0)
trả về 'NaN' trong chrome 46 – Quamis
Hoạt động tốt cho tôi trên Chrome 47 ... Sự cố của bạn có xảy ra trên bất kỳ trang web cụ thể nào hoặc tất cả các trang web không? – jazmit
@jazmit: việc sử dụng phần này của điều kiện document.body.scrollTop + (document.documentElement && document.documentElement.scrollTop || 0) –
Bạn chỉ có thể sử dụng các mã folowing để sửa chữa lỗi!
let scrollHeight = document.body.scrollTop || document.documentElement.scrollTop;
console.log(`scrollHeight = ${scrollHeight}`);
/*
this comment just using for testing the scroll height!
but in this iframe it deon't work at all!
So, you can try it out using Chrome console!
*/document.body.scrollTop;
// Dành cho Chrome, Safari và Opera
document.documentElement.scrollTop;
// Firefox và IE đặt mức tràn ở cấp, trừ khi được chỉ định khác.
Do đó, chúng tôi sử dụng các tài sản documentElement cho hai trình duyệt này
link tham khảo:
http://www.w3schools.com/jsref/prop_element_scrolltop.asp
https://drafts.csswg.org/cssom-view/#dom-element-scrolltop
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop
Sử dụng window.scrollY nếu có thể, nó được thiết kế để được nhất quán trên các trình duyệt.Nếu bạn cần hỗ trợ IE, sau đó tôi muốn khuyên sau đây để chỉ sử dụng window.scrollY nếu nó có sẵn:
typeof window.scrollY === "undefined" ? window.pageYOffset : window.scrollY
window.scrollY sẽ được đánh giá là false nếu nó trả về 0, vì vậy làm window.scrollY || window.pageYOffset về mặt kỹ thuật sẽ kiểm tra window.pageYOffset bất cứ khi nào window.scrollY là 0, mà rõ ràng không phải là lý tưởng nếu window.pageYOffset cũng không bằng 0.
Cũng lưu ý rằng nếu bạn cần thường xuyên cuộn giá trị (mỗi khung hình/cuộn) như thường lệ, bạn có thể muốn kiểm tra nếu window.scrollY được xác định trước. Tôi thích sử dụng chức năng trợ giúp nhỏ này mà tôi đã viết để làm chính xác điều đó, cùng với việc sử dụng requestAnimationFrame - nó sẽ hoạt động trong IE10 trở lên.
function registerScrollHandler (callback) {
"use strict"
var useLegacyScroll = typeof window.scrollY === "undefined",
lastX = useLegacyScroll ? window.pageXOffset : window.scrollX,
lastY = useLegacyScroll ? window.pageYOffset : window.scrollY
function scrollHandler() {
// get the values using legacy scroll if we need to
var thisX = useLegacyScroll ? window.pageXOffset : window.scrollX,
thisY = useLegacyScroll ? window.pageYOffset : window.scrollY
// if either the X or Y scroll position changed
if (thisX !== lastX || thisY !== lastY) {
callback(thisX, thisY)
// save the new position
lastX = thisX
lastY = thisY
}
// check again on the next frame
window.requestAnimationFrame(scrollHandler)
}
scrollHandler()
}
Sử dụng các chức năng như thế này:
registerScrollHandler(function (x, y) {
/* your code here :) */
console.log("Scrolled the page", x, y)
})
Hãy thử 'document.body.scrollTop' – Passerby
Cảm ơn @Passerby .. là có bất kỳ giải pháp nào khác mà điều này? Nếu không, tôi phải đi bằng cách này. – RGR
Không phải là tôi biết ... Nói chung bạn có thể sử dụng '(document.documentElement.scrollTop || document.body.scrollTop)'. – Passerby