使用javascript查找iboooks epub中的当前视图页面的页码

Question

我正在为ibooks epub构建lightbox风格的div元素。我希望div在当时正在查看的当前页面上显示。如果图像位于电子书的第二页上，我希望灯箱在第二页上显示。我将div宽度和高度设置为填满屏幕。

document.getElementById("LightBoxDiv").style.width=window.innerWidth+"px"; 
document.getElementById("LightBoxDiv").style.height=window.innerHeight+"px"; 

我可以手动设置div的固定顶部值，如果我知道图像在哪个页码上。我的设备在窗口上有一个460像素的高度。因此，对于第二页上的图像，顶部应该是第二页开始的460。

document.getElementById("LightBoxDiv").style.top="460px"; 

然而，由于电子书是动态的，用户可以改变文本更大或更小的尺寸，在其东西可能属于翻动书页。我需要一种方法来根据当前页面动态设置顶部。如果我知道当前正在查看的页面数，我可以在div顶部设置为

var lighboxHeight = (pagenumber-1)*window.innerHeight;

我使用window.pageYOffset计算当前页面试过，但是这总是给人一个0值作为网页不滚动在电子书中。不幸的是，我找不到任何说明如何使用javascript访问页码的文档或参考资料。有没有人有任何想法如何访问或查找使用JavaScript的ibooks epub中的当前页码？

谢谢， - 克里斯托弗

Answer 1

我相信我找到了解决方案。 This question/answer helped a lot.

//window height 
var winHeight = window.innerHeight; 
//top of object to be placed in the lightbox 
//can be any object 
var curOjbTop = document.getElementById(svgId).getBoundingClientRect().top; 
//body y value 
var bodyTop = document.body.getBoundingClientRect().top; 
//amount the object is shifted vertically downward from the top of the body element 
var offset = curObjTop - bodyTop; 
//page number of the object 
//this is actually 1 less than the true page number 
//it basically starts the page count at 0, but for actual page number add 1 
var curPage = Math.floor(offset/winHeight); 
//this sets the top edge of the lightbox at y=0 on the page the item is on 
var lightboxTop = curPage*winHeight; 
document.getElementById("LightBoxDiv").style.top=lightboxTop; 

我的收藏夹格覆盖整个可视面积，但如果你想这是中心的一个较小的一个，你需要添加窗口高度的另外一半，然后设置上边距是一半你想要的高度为负值。

例如，如果光箱为200×200，那么你的lightboxtop将 var lightboxTop = (curpage*winHeight)+(winHeight*.5); var topMargin = "-100px";

它可能需要一些tweeked，但总体而言，它应该工作，以确定一个页码。