Использование javascript для поиска номера текущей страницы просмотра в e pub iboooks

Question

Я создаю элемент div в стиле лайтбокса для epub ibooks. Я хочу, чтобы div отображался на текущей просматриваемой странице. Если изображение находится на второй странице книги, я хочу, чтобы лайтбокс отображался на второй странице. У меня есть ширина и высота div, чтобы заполнить экран.

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

Я могу вручную установить фиксированное верхнее значение div, если я знаю, на каком номере страницы находится изображение. Мое устройство имеет высоту 460 пикселей в окне. Таким образом, для изображения на второй странице сверху должно быть 460, что является началом 2-й страницы.

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

Однако, поскольку электронные книги динамичны в том смысле, что пользователь может изменять размер текста больше или меньше, меняется страница, на которую может что-то упасть. Мне нужен способ динамически устанавливать верх в зависимости от текущей страницы. Если я знаю номер текущей просматриваемой страницы, я могу установить div top на

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

Я пытался использовать window.pageYOffset рассчитать текущую страницу, но это всегда дает значение 0, поскольку страница не прокручивается в электронной книге. К сожалению, я не могу найти никакой документации или какой-либо ссылки, описывающей, как использовать javascript для доступа к номерам страниц. У кого-нибудь есть идеи, как получить доступ или найти номер текущей страницы в epub ibooks, используя javascript?

Спасибо,- Христофор

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;

Мой блок лайтбокса охватывает всю область просмотра, но если вы хотите меньшую по центру область, вам нужно будет добавить дополнительную половину высоты окна, а затем установить верхнее поле равным половине отрицательного значения высоты, которую вы хотели.

Например, если лайтбокс был 200 х 200, то ваш лайтбокс будетvar lightboxTop = (curpage*winHeight)+(winHeight*.5); var topMargin = "-100px";

Может потребоваться настроить некоторые из них, но в целом это должно работать для определения номера страницы.