trying to get scrolling div not to affect another div on iPhone

Question

So here's my 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>

The problem is that let's say I've scrolled midway thru paragraph 1, and then hit the switch link. So now I'm looking at paragraph 2. Let's say I do some scrolling on paragraph 2, then decide I want to switch back to paragraph 1, so I hit switch. Problem is that when I switch back to paragraph 1, I'm in a completely different spot then my original midway point. How can I get each div's scrolling to basically only scroll their own respective content so that if I were to switch I can still continue where I left off previously?

From my experience, scrolling divs on mobile devices don't seem to work very well (Some ignore the `overflow:scroll` and don't even let the div scroll.) To scroll a div on a mobile device, I've used http://cubiq.org/iscroll-4. — Joshua Dwire, Nov 01 '12 at 18:46
Can you think of any solutions that won't involve plugins? :) — paul smith, Nov 01 '12 at 19:55

score 1 · Answer 1 · answered Nov 02 '12 at 01:18

1

The key is to store the scrollTop on the body element just before you toggle your elements.

Once you have stored that value, simply set it again each time.

Heres a quick and dirty implementation: http://jsbin.com/efijey/1/edit

answered Nov 02 '12 at 01:18

Clark Pan

6,027
1
22
18

I thought of this too, but was hoping there was a more elegant way just using CSS. Apparently http://stackoverflow.com/questions/6887112 solves the issue. – Magnus Smith Jan 08 '14 at 17:33

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

Here was my question.

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

And someone answered with this for the response which works perfect. You could make it so each spot on each div is saved and have it switch with the switch button.

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

edited May 23 '17 at 12:13

Community

1
1

answered Nov 01 '12 at 18:56

Spencer May

4,266
9
28
48

Is this just a guess or does it actually work on your phone? I'm asking because this solution doesn't work for me. – paul smith Nov 01 '12 at 19:54
Check my update! I asked a similar question and this should help you because it is exactly what you are asking for. – Spencer May Nov 02 '12 at 01:03

trying to get scrolling div not to affect another div on iPhone

2 Answers2