试图让滚动 div 不影响 iPhone 上的另一个 div答案

【问题标题】：trying to get scrolling div not to affect another div on iPhone试图让滚动 div 不影响 iPhone 上的另一个 div
【发布时间】：2012-11-02 09:18:02
【问题描述】：

这是我的html：

<!DOCTYPE html>
<html>
<head></head>
<body>
    <a id="x" href="#" style="position:fixed; top:0; right:10px;">Switch</a>
    <div id="a">
        <p>Huge paragraph 1</p>
    </div>

    <div id="b" style="display:none;">
        <p>Huge paragraph 2</p>
    </div>

    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script>
        $('#x').click(function() {
            $('#a').toggle();
            $('#b').toggle();

            return false;
        });
    </script>

</body>
</html>

问题是，假设我在第 1 段中途滚动，然后点击切换链接。所以现在我在看第 2 段。假设我在第 2 段上做了一些滚动，然后决定我想切换回第 1 段，所以我点击了 switch。问题是当我切换回第 1 段时，我所处的位置与我原来的中间点完全不同。我怎样才能让每个 div 的滚动基本上只滚动它们各自的内容，这样如果我要切换，我仍然可以从之前中断的地方继续？

【问题讨论】：

根据我的经验，在移动设备上滚动 div 似乎效果不佳（有些人忽略了overflow:scroll，甚至不让 div 滚动。）在移动设备上滚动 div设备，我用过cubiq.org/iscroll-4。
你能想到任何不涉及插件的解决方案吗？ :)

标签： javascript iphone html css mobile

【解决方案1】：

关键是在切换元素之前将 scrollTop 存储在 body 元素上。

存储该值后，只需每次重新设置即可。

这是一个快速而肮脏的实现：http://jsbin.com/efijey/1/edit

【讨论】：

我也想过这个，但希望有一种更优雅的方式，只使用 CSS。显然stackoverflow.com/questions/6887112 解决了这个问题。

【解决方案2】：

这是我的问题。

Update anchor tag as you scroll past an element in a div

有人回答了这个问题，效果很好。您可以这样做，以便保存每个 div 上的每个位置并使用切换按钮进行切换。

http://jsbin.com/ezexaf/1/edit

【讨论】：

这只是猜测还是真的可以在您的手机上使用？我问是因为这个解决方案对我不起作用。
检查我的更新！我问了一个类似的问题，这应该对您有所帮助，因为这正是您所要求的。