epub中的Javascript/JQuery保存位置

我正在尝试为android构建一个epub阅读器，一切都很好，工作正常，但我无法解决的问题是保存最后一次看到的页面（或保存书签位置）

一点背景：

我使用

css多列

显示epub，

columnWidth

设置为

windowWidth

，

columnHeight

设置为

windowHeight

。 确保每一列都能填满整个屏幕

目前，为了保存位置，我对html进行了预处理，并用一个

div

包装每个元素，其中包括一个表示节号和标记位置的特定

id

。例如，进程后的

标记如下：

<div id="id__1__8"><p>some text</p></div>

此代码适用于页面偏移量为零的大多数情况，如

id\uu 1\uu 8\uu 0

当有偏移量时，问题就出现了，偏移页无法正确计算，我可以看到有一页偏移量，但这段代码给了我 0偏移量，或者当有9页偏移量时，它给我4页偏移量

那么这段代码有什么问题？

还是我为了保存位置而这样做是错误的

有没有更好的方法

更新：

如果我在任何标记之前添加

div

，比如

一些文本

，结果将在90%的时间内准确。因此，更新后的问题将是如何以100%的准确率实现这一目标（保存epub中的职位？

更新2:

我把

div

放在每个元素上，例如

头

，

p

，

链接

，

img

这是否有可能造成问题

更新3:

我终于找到了问题的原因。考虑当前页的最近元素在前一页的中间开始的情况，我保存该元素的ID，偏移量为1。当我想加载保存的位置时，元素会加载到页面顶部，因此文本会发生一些变化，在下图中我显示了发生的情况

如有任何意见，将不胜感激

更新4:

CSS:

将添加到正文的末尾，因此我在html内容的末尾有一个标记

Jquery：

var\u列=0；
var_columnCount=0；
窗口宽度；
var_窗高；
var-rtl=0；
$（函数（）{
_columnWidth=$（“#容器”）.width（）；
_windowWidth=$（“#容器”）.width（）；
_windowHeight=$（“#容器”）.height（）；
$（'#content'）.css（'-webkit列宽'，_windowWidth）；
$（'#content'）.css（'-moz列宽'，_windowWidth）；
$（'content'）.css（'column-width'，'u windowWidth）；
$（文档）.ready（函数（）{
$（窗口）。加载（函数（）{
_columnCount=Math.floor（$（'#endMarker'）.position（）.left/（_windowWidth+_columnGap））；
如果（_columnCount<0）
{
rtl=1；
_columnCount=（_columnCount*-1）；//+2；
informRTL（rtl）；//通知java部件此文档是从右向左的
}
其他的
{
informRTL（rtl）；
}
reportNumberOfPage（_columnCount）；//这将报告给java部件
});
});
setColumn=函数（i）{
如果（rtl==1）
{
_列=（i*-1）；
}
其他的
{
_列=i；
}
$（'#content'）.css（{“-webkit transform”：“translate”（+（-1*_-column*（_-windowWidth+_-columnGap））+“px，0px）”；
}    
setColumn（0）；//将显示列设置为first
下一页=函数（）{
如果（_column==_columnCount-1 | |（-1*_column）==_columnCount-1）
informEndPage（）；
其他的
{           
如果（rtl==1）
{
_列=_列-1；
$（'#content'）.css（{“-webkit transform”：“translate”（+（-1*_-column*（_-windowWidth+_-columnGap））+“px，0px）”；
}
其他的
{
_列=_列+1；
$（'#content'）.css（{“-webkit transform”：“translate”（+（-1*_-column*（_-windowWidth+_-columnGap））+“px，0px）”；
}           
}           
};
prevPage=函数（）{
如果（0==\u列）
informStartPage（）；
其他的
{           
如果（rtl==1）
{
_列=_列+1；
$（'#content'）.css（{“-webkit transform”：“translate”（+（-1*_-column*（_-windowWidth+_-columnGap））+“px，0px）”；
updateCurrentPageText（（_列*-1））；
}
其他的
{
_列=_列-1；
$（'#content'）.css（{“-webkit transform”：“translate”（+（-1*_-column*（_-windowWidth+_-columnGap））+“px，0px）”；
updateCurrentPageText（_列）；
}                           
}        
};
//此函数用于将更多html内容添加到当前正文的末尾
addString=函数
{
$（s）.insertBefore（'endMarker'）；
$（window.load（addStringReport（））；
};
addStringReport=函数（）
{
_columnCount=Math.floor（$（'#endMarker'）.position（）.left/（_windowWidth+_columnGap））；
如果（_columnCount==0）
{
requestMorePage（）；
}
如果（_columnCount<0）
{
rtl=1；
_columnCount=（_columnCount*-1）；
}
下一页（）；
reportNumberOfPage（_columnCount）；
}
//此函数用于向正文的第一部分添加更多html内容
addStringToFirst=函数
{
$（“#内容”）。前缀；
$（窗口）。加载（添加）
jqGetLastPosition = function(ids)
    {
        var tempColumn = _column; // _column is current page that is showing
        if(tempColumn < 0)
        {
            tempColumn = -1 * tempColumn;
        }
        var realIds = ids.split("|");
        var columnLeft = (tempColumn * (_windowWidth + _columnGap));
        var currentLeft;
        var currId = "#" + realIds[0];
        var nearestId = realIds[0] + "__0";
        var minDistance = 1000000;
        var tempDistance = 0;
        var exactColumn = 0;
        for(i=0; i<realIds.length; i++)
        {
            try
            {
                currId = "#" + realIds[i];
                currentLeft = $(currId).position().left;
                if(currentLeft < 0)
                {
                    currentLeft = -1 * currentLeft;
                }
                tempDistance = columnLeft - currentLeft;
                if(tempDistance < 0)
                {
                    //this id is after this page
                    continue;
                }
                else if(tempDistance < minDistance)
                {
                    minDistance = tempDistance;
                    exactColumn = Math.floor(minDistance/(_windowWidth + _columnGap)); //this must compute the offset pages after nearest element
                    nearestId = realIds[i] + "__" + exactColumn;
                }
            }
            catch(e)
            {
            }
        }

        jsSaveLastLocation(nearestId);
    };

#container {
    width: 100%;
    height: 98%;
    overflow: hidden;
    }
    #content {
    position: relative;
    height: 98%;
    -moz-column-width: 200px;
    -webkit-column-width: 200px;
    column-width: 200px;
    -moz-column-gap: 1px;
    -webkit-column-gap: 1px;
    column-gap: 1px;
    }
    img {
    max-width: 100%;
    max-height: 100%;
    display:inline-block;
    -webkit-column-break-inside : avoid;
    }

var _column = 0;
var _columnCount = 0;
var _windowWidth;
var _windowHeight;
var rtl = 0;

$(function() {
    _columnWidth = $('#container').width();
    _windowWidth = $('#container').width();
    _windowHeight = $('#container').height();
    $('#content').css('-webkit-column-width', _windowWidth);
    $('#content').css('-moz-column-width', _windowWidth);
    $('#content').css('column-width', _windowWidth);

    $(document).ready(function(){
    $(window).load(function(){
        _columnCount = Math.floor($('#endMarker').position().left/(_windowWidth + _columnGap));
        if(_columnCount < 0)
        {
            rtl = 1;
            _columnCount = (_columnCount * -1);// + 2;
            informRTL(rtl); //inform the java part that this doc is right to left
        }
        else
        {
            informRTL(rtl);
        }
        reportNumberOfPage(_columnCount); // this will report to java part
    });
    });

    setColumn = function(i) {
        if(rtl == 1)
        {
            _column = (i * -1);
        }
        else
        {
            _column = i;
        }

        $('#content').css({"-webkit-transform":"translate(" + (-1 * _column * (_windowWidth + _columnGap)) + "px,0px)"});
    }    

    setColumn(0); //set the showing column to first

    nextPage = function() {
        if (_column==_columnCount -1 || (-1*_column)==_columnCount -1)
            informEndPage();
        else
            {           
                if(rtl == 1)
                {
                    _column = _column-1;
                    $('#content').css({"-webkit-transform":"translate(" + (-1 * _column * (_windowWidth + _columnGap)) + "px,0px)"});                   
                }
                else
                {
                    _column = _column+1;
                    $('#content').css({"-webkit-transform":"translate(" + (-1 * _column * (_windowWidth + _columnGap)) + "px,0px)"});                                                   
                }           
            }           
    };

    prevPage = function() {
        if (0==_column) 
            informStartPage();
        else
            {           
                if(rtl == 1)
                {
                    _column = _column+1;                    
                    $('#content').css({"-webkit-transform":"translate(" + (-1 * _column * (_windowWidth + _columnGap)) + "px,0px)"});
                    updateCurrentPageText((_column * -1));
                }
                else
                {
                    _column = _column-1;                    
                    $('#content').css({"-webkit-transform":"translate(" + (-1 * _column * (_windowWidth + _columnGap)) + "px,0px)"});
                    updateCurrentPageText(_column);
                }                           
            }        
    };

    //this function add more html content to the end of current body
    addString = function(s)
    {
        $(s).insertBefore('#endMarker');
        $(window).load(addStringReport());
    };

    addStringReport = function()
    {
        _columnCount = Math.floor($('#endMarker').position().left/(_windowWidth + _columnGap));
        if(_columnCount == 0)
        {
            requestMorePage();
        }
        if(_columnCount < 0)
        {
            rtl = 1;
            _columnCount = (_columnCount * -1);
        }
        nextPage();
        reportNumberOfPage(_columnCount);
    }

    //this function add more html content to the first of body
    addStringToFirst = function(s)
    {
        $('#content').prepend(s);
        $(window).load(addStringToFirstReport());
    }

    addStringToFirstReport = function()
    {
        maxColumn = Math.floor($('#endMarker').position().left/(_windowWidth + _columnGap));
        if(maxColumn < 0)
        {
            rtl = 1;
            maxColumn = (maxColumn * -1);
            _column = (maxColumn - _columnCount + _column);
        }
        else
        {
            _column = maxColumn - _columnCount + _column;
        }

        _columnCount = maxColumn;
        setColumn(_column);
        reportNumberOfPage(_columnCount);
    }