使用JavaScript在iboooks epub中查找當前視圖頁面的頁碼

Question

我正在為ibooks epub構建燈箱樣式div元素。 我希望div顯示在當時正在查看的當前頁面上。 如果圖像在電子書的第二頁上，我希望燈箱在第二頁上顯示。 我將div的寬度和高度設置為填充屏幕。

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

如果我知道圖像位於哪個頁碼上，則可以手動設置div的固定最大值。 我的設備在窗口上的高度為460px。 因此，對於第二頁上的圖像，頂部應該是460，這是第二頁的開始。

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

但是，由於電子書是動態的，用戶可以將文本的大小更改為更大或更小，因此可能會掉落某些內容的頁面也會發生變化。 我需要一種基於當前頁面動態設置頂部的方法。 如果知道當前正在查看的頁碼，則可以將div top設置為

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

我嘗試使用window.pageYOffset來計算當前頁面，但是由於頁面無法在電子書中滾動，因此該值始終為0。 不幸的是，我找不到任何文檔或任何參考文獻來描述如何使用javascript訪問頁碼。 有誰知道如何使用javascript訪問或查找ibooks epub中的當前頁碼？

謝謝， - 克里斯托弗

Answer 1

我相信我找到了解決方案。 這個問題/答案很有幫助。

//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;

我的燈箱div覆蓋了整個查看區域，但是如果您希望將一個較小的居中居中，則需要增加窗口高度的一半，然后將上邊距設置為所需高度負值的一半。

例如，如果燈箱是200 x 200，則您的燈箱var lightboxTop = (curpage*winHeight)+(winHeight*.5); var topMargin = "-100px";將是var lightboxTop = (curpage*winHeight)+(winHeight*.5); var topMargin = "-100px"; var lightboxTop = (curpage*winHeight)+(winHeight*.5); var topMargin = "-100px";

可能需要對它進行一些調整，但是總體而言，它應該可以確定頁碼。