javascript - 使用javascript在ibooks epub中查找当前查看页面的页码

Question

我正在为 ibooks epub 构建灯箱样式的 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;

我的 lightbox div 覆盖了整个查看区域，但是如果您想要一个较小的居中的 div，则需要添加另外一半的窗口高度，然后将上边距设置为高度负值的一半你想要的。

例如，如果灯箱是 200 x 200，那么您的灯箱顶部将是 var lightboxTop = (curpage*winHeight)+(winHeight*.5); var topMargin = "-100px";

它可能需要修改一些，但总的来说它应该可以确定页码。