javascript - jQuery 在水平滚动后找到第一个可见元素

Question

我是 jQuery 的新手(才两周大)，所以请多多包涵。我知道前段时间有人问过一个非常相似的问题，但我不知道如何使答案适应我的问题。我有一个非常宽的多列布局，如下所示:

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

代码如下:

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

没有垂直滚动，容器宽度设置为仅显示两列。用户向左或向右滚动以查看相关文本。我想要的是获取当前显示的位置，将其存储(可能在 cookie 中)并在用户下次打开页面时检索它。

我认为我需要一种方法来找出当前最左上角的段落，但非常欢迎其他建议。

有什么想法吗？

顺便说一句:这是一个内部项目，所以仅限 Mozilla :-)

Answer 1

建议:为什么要检测起始段落，因为用户可以在段落之间滚动。

aa|bbbb|cc

用户在这里看到三个段落(1 个完整段落，2 个部分段落)，因为滚动是连续的而不是离散的段落。除非手动滚动被禁用并且用户只能在具有某些自定义控件的段落之间向左或向右移动，例如:

< >

然后您可以简单地保存左滚动状态并在重新打开页面时恢复它。您还可以使用新的 localStorage API 而不是 cookie，用于在本地跨 session 保存数据。

在 jsfiddle 上试试这个例子.滚动并刷新或关闭并重新打开页面。