Giải thích lý do tại sao scrollTop() luôn trả về 0 đây

Question

Xem http://codepen.io/anon/pen/NGqPNz

CSS:

html { 
    height: 100%; 
    overflow-y: hidden; 
} 
body { 
    height: 100%; 
    overflow-y: auto; 
} 

JS:

$('body').bind("scroll", function() { 
    if ($('body').scrollTop()) { 
     console.log('triggered!'); 
    } else { 
     console.log($('body').scrollTop()); 
    } 
    }); 

sự kiện Các cuộn được bắn vào các yếu tố cơ thể. Thanh cuộn nằm trên phần tử nội dung, không phải trên phần tử html hoặc phần tử cửa sổ. Vậy tại sao document.body.scrollTop hoặc $ ('body'). ScrollTop() trả về 0?

Có cách nào tôi có thể phát hiện vị trí thanh cuộn với điều này hoặc tôi bị kẹt nếu tôi muốn sử dụng chiều cao: 100%; overflow: hidden trên phần tử html?

Cảm ơn!

Answer 1

Đó là vì bạn có overflow-y: hidden;. Xóa mục này và sau đó scrollTop() sẽ hoạt động

Answer 2

Nhận xét của Shikkediel, có vẻ như đó là lỗi Webkit. Nếu bạn đặt một div ngay bên trong cơ thể, và liên kết sự kiện cuộn với div, nó hoạt động.

http://codepen.io/anon/pen/bVderq

CSS:

html { 
    height: 100%; 
    overflow-y: hidden; 
} 
body { 
    height: 100%; 
    overflow-y: hidden; 
} 
.scroll-wrapper { 
    height: 100%; 
    overflow-y: auto; 
} 

JS:

$('.scroll-wrapper').bind("scroll", function() { 
    if ($('.scroll-wrapper').scrollTop()) { 
    console.log('triggered!'); 
    console.log($('.scroll-wrapper').scrollTop()); 
    } else { 
    console.log($('.scroll-wrapper').scrollTop()); 
    } 
});