JQuery find the first visible item after scrolling horizontally

Question

Im new (only two weeks) for 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 multi-column layout that looks something like this:

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

The code looks like this:

 <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 width of the container is set so that only two columns are displayed. The user scrolls left or right to see the corresponding text. I want to get the current position, save it (possibly in cookies) and get it the next time I open the page.

I think I need a way to find out which item is currently the leftmost, but other suggestions are very welcome.

Any ideas?

By the way: this is an internal project, so Mozilla only :-)

Answer 1

Sentence. Why define a start paragraph, as the user can scroll between paragraphs.

 aa|bbbb|cc 

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

< >

then you can just save the left scroll state and restore it when the page is opened again. You can also use the new localStorage API instead of cookies to store data through sessions locally.

Try this example on jsfiddle . Scrolling and updating, closing and reopening the page.