jQuery offset() method in CSS 3 multicolumn

问题

Got some serious issue here, I'am working on an iOS App which has to display an html page in a UIWebView over several columns using CSS multicolum module.

I'm adding the following CSS rule to the page to accomplish the multicolumn

padding: 0px; height: 850.000000px; -webkit-column-gap: 0px; -webkit-column-width: 620.000000px;

Then I need to find the absolute position on screen for some text in the page. The problem is that any call of the offset() method from jQuery works fine EXCEPT the one on the text running on 2 columns.

For example for a sentence that starts at the end of column 3 and finishes on column 4, I get an offset with the left value set to the 3rd column but the top position is set to 0 as if it was in the 4th column.

How can I get the offset() value with correct left and top values. I mean if the left value is on 3rd column I want the top value to be also at the bottom of the 3rd column.

Again I only have this issue when the sentence is running on two columns in the same time (Starting at the end of the 3rd column and finishing in 4th column)

I really don't know if I'm making myself clear here but any help would be really awesome.

Thx in advance

回答1:

I would try to pre process the text to add a specific span around every first and every last character of each sentences or paragraph depending on your needs. The offset() shoud work to retreive the starting and ending positions of your block. You would have then just to compute the complicated cases like sentences starting and ending in different columns.

回答2:

This is how I ended up solving the problem. I have not verified it with a lot of content yet, but for a couple of test cases this has worked for me. I actually had some elements that spanned 3 CSS3 columns and therefore ended up with an offset.top of -800, when my screen height is only 460.

$.fn.coffset = function() {

    var offset = $(this).offset();

    if (offset.top < 0) {
        var winHeight = window.innerHeight;
        var winWidth = window.innerWidth;

        var numOfPagesOff = Math.ceil((-offset.top) / winHeight);

        offset.top += (winHeight * numOfPagesOff);
        offset.left -= (winWidth * numOfPagesOff);
    }
    return offset;
};

回答3:

This can be done easily by adding an empty div to the beginning of the element, then retrieving the position, and then removing the empty div.

$(element).prepend('<div id="getposition"></div>');
var left = $('#getposition',element).offset().left;
$('#getposition',element).remove();

来源：https://stackoverflow.com/questions/14167079/jquery-offset-method-in-css-3-multicolumn