单页webapp屏幕转换,保持滚动位置

Question

单页webapp屏幕转换,保持滚动位置

gph*_*lip 12 html javascript css web-applications mobile-website

我正在构建一个用于手机的单页Web应用程序.应用程序应该实现"屏幕"之间的转换(像任何其他移动应用程序,例如Facebook,Twitter),这些转换应该是动画的(向左滑动).每个屏幕必须保持其在过渡之间的滚动位置.

一个明显的解决方案是:

Viewport
+----------+ 
|+--------+| +--------+ +--------+ +--------+
|| DIV1   || | DIV2   | | DIV3   | | DIV4   |
||        || |        | |        | |        |
||        || |        | |        | |        |
||        || |        | |        | |        |
||        || |        | |        | |        |
|+--------+| +--------+ +--------+ +--------+
+----------+

Run Code Online (Sandbox Code Playgroud)

将不同的屏幕放入容器(DIV1,DIV2,......)中,这些容器的样式适合屏幕(position: absolute; width: 100%; height: 100%; top: 0)并具有overflow-x: scroll.容器彼此相邻,过渡就像动画一样容易left.

容易到目前为止.

问题如下:在此实现中,当用户向下滚动时,地址栏不会在移动浏览器中消失.

我在谈论这个功能: 在此输入图像描述

这是因为移动浏览器只有在用户滚动时才会这样做body- 而不是在容器中滚动body.有几个解决方案的建议,但它们不适用于所有目标平台(Android Chrome和本机浏览器,iPhone Safari),并且非常hacky.我想保留浏览器的原始行为.

出于这个原因 - 显然 - 需要将滚动留在身体上.这意味着容器必须是"全长"(而不是溢出滚动),仍然彼此相邻.如果你想一想,这就是过渡变得困难的地方.

从DIV1转换到DIV2时,我当前的解决方案有以下步骤:

topDIV2的位置对scrollTop窗口的电流
动画DIV1和DIV2的left属性,以便DIV2填充屏幕
动画完成后,将DIV2移动top到0该位置,以便用户无法再向后滚动到此屏幕的顶部
将窗口的scrollTop移动到0
隐藏DIV1(如果它比DIV2长)

相反,过渡回DIV1是类似的.这实际上非常好用(虽然它非常复杂并且使用转换事件监听器)但不幸的是在iOS Safari下步骤3和4之间存在非常难看的闪烁效果,因为它在步骤3之后立即呈现页面而不等待第4步.

我正在寻找一个独立于框架(vanilla JS)的解决方案.

Answer 1

dre*_*lab 2

你的做法非常正确。由于滚动位置的变化，您可能会出现闪烁。position: fixed诀窍是在滚动时将 div 更改为，然后再将其更改回来。

步骤是：

保存当前滚动垂直位置
将 div 更改为position: fixed
将 div 更改scrollTop为0 - scrollPosition
开始水平过渡

转换后：

更改窗口的滚动位置scrollTo()
恢复position: fixeddiv 以便自然的浏览器行为起作用。

这是一个普通的 JavaScript 示例（也称为fiddle）：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title></title>

        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
            }

            .container {
                position: absolute;
                overflow: hidden;
                width: 320px;
                height: 5000px;
            }

            .screen {
                position: absolute;
                width: 320px;
                height: 5000px;
                transition: left 0.5s;
            }

            #screen1 {
                background: linear-gradient(red, yellow);
            }

            #screen2 {
                left: 320px;
                background: linear-gradient(green, blue);
            }

            #button {
                position: fixed;
                left: 20px;
                top: 20px;
                width: 100px;
                height: 50px;
                background-color: white;
                color: black;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div id="screen1" class="screen"></div>
            <div id="screen2" class="screen"></div>
        </div>

        <div id="button">transition</div>


        <script type="text/javascript">
            var screenActive = 1;
            var screen1 = document.getElementById('screen1');
            var screen2 = document.getElementById('screen2');
            var screen1ScrollTop = 0;
            var screen2ScrollTop = 0;

            function onClick()
            {
                console.log('getting the event');

                if ( screenActive === 1 ) {
                    // will show screen 2
                    screen1ScrollTop = document.body.scrollTop;

                    screen1.style.position = 'fixed';
                    screen2.style.position = 'fixed';
                    screen1.style.top = (0 - screen1ScrollTop) + 'px';
                    screen2.style.top = (0 - screen2ScrollTop) + 'px';

                    screenActive = 2;
                    screen1.style.left = '-320px';
                    screen2.style.left = '0px';
                }
                else {
                    // will show screen 1
                    screen2ScrollTop = document.body.scrollTop;

                    screen1.style.position = 'fixed';
                    screen2.style.position = 'fixed';
                    screen1.style.top = (0 - screen1ScrollTop) + 'px';
                    screen2.style.top = (0 - screen2ScrollTop) + 'px';

                    screenActive = 1;
                    screen1.style.left = '0px';
                    screen2.style.left = '320px';
                }
            }

            function onTransitionEnd(event)
            {
                if ( screenActive === 1 ) {
                    window.scrollTo(0, screen1ScrollTop);
                }
                else {
                    window.scrollTo(0, screen2ScrollTop);
                }

                screen1.style.position = 'absolute';
                screen1.style.top = '0px';

                screen2.style.position = 'absolute';
                screen2.style.top = '0px';
            }

            screen1.addEventListener('webkitTransitionEnd', onTransitionEnd);
            document.getElementById('button').addEventListener('click', onClick);
        </script>

    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

在这个例子中我使用了该transitionEnd事件。请记住，如果您在两个动画 div 上都有此事件，则该事件将触发两次。解决方案是：

如果时间相同，只需在一个 div 上使用该事件（在示例中使用）
使用所有 div 的事件，但只需对事件的 div 进行相应的更改
为一个包含所有 div 的容器设置动画。所以你只需要一个事件。
如果您不能使用transitionEnd事件requestAnimationFrame()，请通过 js 手动设置动画

在本例中，我还使用固定高度容器进行过渡。如果您有不同高度的 div，则必须在转换后更改容器高度。最好是在从恢复之前position: fixed。

请记住，将 div 更改为position: fixed将显示它，即使它位于带有overflow: hidden. 对于移动网络应用程序，这不会成为问题，因为 div 位于屏幕之外。在电脑上，您可能需要将另一个 div 放在另一个 div 上以隐藏过渡的那个 div。

归档时间：	11 年，3 月前
查看次数：	1956 次
最近记录：	11 年，3 月前