jQuery find first visible element after horizontal scroll

Question

I’m new (only two weeks old) in jQuery, so please bear with me. I know that a very similar question was asked some time ago, but I do not know how to adapt the answer to my problem. I have a very wide multicolumn layout something like this:

| aaaa | bbbb | cccc | …   |
| aaaa | b    | cc   | …   |
| aaa  | cccc | ddd  | …   |

The code looks like:

<div id="container">
    <p>aaaaaaaaaaa</p>
    <p>bbbbb</p>
    <p>ccccccccccc</p>
    <p>dddddddddd</p>
    ...
    <p>xxxxxx</p>
</div>

There is no vertical scrolling and the container width is set in such a way that only two columns are shown. The user scrolls left or right to see the relevant text. What I want is to get the position currently on display, store it (maybe in a cookie) and retrieve it the next time the user opens the page. I think that I need a way of finding out what paragraph is currently the left-top most, but other suggestions are very welcome. Any ideas?

BTW: this is an internal project, so Mozilla only :-)

Answer 1

Suggestion: Why detect starting paragraph since the user can scroll between paragraphs.

aa|bbbb|cc

Here the user sees three paragraphs (1 full, 2 partial) as the scroll is continuous and not discrete with paragraphs. Unless manual scrolling is disabled and the user can only go left or right between paras with some custom controls such as:

< >

then you can simply save the left scroll state and restore that when the page is reopened. You can also make use of the new localStorage API instead of cookies for saving data across sessions locally.

Try this example on jsfiddle. Scroll and refresh or close and reopen page.