ฉันต้องการดึงความสูงที่มองเห็นได้ของ div ภายในพื้นที่ที่เลื่อนได้ ฉันคิดว่าตัวเองค่อนข้างดีกับ jQuery แต่นี่เป็นการทิ้งฉันไปโดยสิ้นเชิง
สมมติว่าฉันมี div สีแดงภายในกระดาษห่อสีดำ:
ในกราฟิกด้านบนฟังก์ชัน jQuery จะส่งคืน 248 ซึ่งเป็นส่วนที่มองเห็นได้ของ div
เมื่อผู้ใช้เลื่อนผ่านด้านบนสุดของ div ดังภาพด้านบนก็จะรายงาน 296
ตอนนี้เมื่อผู้ใช้เลื่อนผ่าน div ไปแล้วผู้ใช้จะรายงาน 248 อีกครั้ง
เห็นได้ชัดว่าตัวเลขของฉันจะไม่สม่ำเสมอและชัดเจนเหมือนที่อยู่ในการสาธิตนี้หรือฉันแค่ตั้งรหัสยากสำหรับตัวเลขเหล่านั้น
ฉันมีทฤษฎีเล็กน้อย:
- รับความสูงของหน้าต่าง
- รับความสูงของ div
- รับค่าชดเชยเริ่มต้นของ div จากด้านบนของหน้าต่าง
- รับค่าชดเชยเมื่อผู้ใช้เลื่อน
- หากออฟเซ็ตเป็นค่าบวกแสดงว่าด้านบนของ div ยังมองเห็นได้
- ถ้าเป็นค่าลบด้านบนของ div จะถูกปิดโดยหน้าต่าง ณ จุดนี้ div อาจใช้ความสูงทั้งหมดของหน้าต่างหรืออาจแสดงด้านล่างของ div ก็ได้
- หากด้านล่างของ div ปรากฏขึ้นให้หาช่องว่างระหว่างมันกับด้านล่างของหน้าต่าง
ดูเหมือนจะค่อนข้างเรียบง่าย แต่ฉันไม่สามารถโอบรอบมันได้ พรุ่งนี้เช้าจะแตกอีก ฉันเพิ่งคิดว่าอัจฉริยะของคุณบางคนอาจช่วยได้
ขอบคุณ!
UPDATE: ฉันคิดออกด้วยตัวเอง แต่ดูเหมือนว่าหนึ่งในคำตอบด้านล่างนี้จะสวยกว่าดังนั้นฉันจะใช้คำตอบนั้นแทน สำหรับคนที่อยากรู้อยากเห็นนี่คือสิ่งที่ฉันคิดขึ้น:
$(document).ready(function() {
var windowHeight = $(window).height();
var overviewHeight = $("#overview").height();
var overviewStaticTop = $("#overview").offset().top;
var overviewScrollTop = overviewStaticTop - $(window).scrollTop();
var overviewStaticBottom = overviewStaticTop + $("#overview").height();
var overviewScrollBottom = windowHeight - (overviewStaticBottom - $(window).scrollTop());
var visibleArea;
if ((overviewHeight + overviewScrollTop) < windowHeight) {
// alert("bottom is showing!");
visibleArea = windowHeight - overviewScrollBottom;
// alert(visibleArea);
} else {
if (overviewScrollTop < 0) {
// alert("is full height");
visibleArea = windowHeight;
// alert(visibleArea);
} else {
// alert("top is showing");
visibleArea = windowHeight - overviewScrollTop;
// alert(visibleArea);
}
}
});