Question

我想展示一个适合移动设备的布局。为此，我有一个包含大iPhone的页面。在屏幕区域，我希望我的布局出现并自动垂直向下滚动，然后向上滚动到初始点。

我找到了vertical carousel，但我希望它是自动的。有没有一种简单的方法来实现这一目标？

Answer 1

由于你没有提供代码，我制作了自己的原型。调整此代码以满足您的需求，如果您添加代码，我可以为您执行此操作。这是基本的想法。

<body style="background: grey;">
    <div style="width: 400px; height: 800px; background: white; overflow-y: hidden;" id="page">
        <div style="height: 2000px; width: 385px;">
            <div style="background: red; height: 400px; width: 400px;"></div>
            <div style="background: blue; height: 400px; width: 400px;"></div>
            <div style="background: green; height: 400px; width: 400px;"></div>
            <div style="background: yellow; height: 400px; width: 400px;"></div>
            <div style="background: purple; height: 400px; width: 400px;"></div>
        </div>
    </div>
    <script>
        var page = document.getElementById('page');
        var times = 0;
        window.setInterval(function(){
            times++;
            page.scrollTop = times;
            if(times == 1200){
                window.clearInterval();
            }
        }, 5);
    </script>
</body>

如果您希望它在完成后重新启动，最后只需添加page.scrollTop = 0。如果要再次运行它，请将时间设置为0，并在clearInterval();之后立即将其置于函数中再次运行该时间间隔。

我希望我帮忙！如果有什么事情你不清楚下面的评论。

完成一个：jsFiddle

Answer 2

尽可能简单（只为记录编辑）：

<强> HTML ：

<div id="Outer">
    <div id="Inner">
       …
    </div>
</div>

<强> CSS ：

#Outer {
    width: 300px;
    height: 400px;
    background: red;
    overflow-y: scroll;
}

#Inner {
    margin: 16px 16px;
    background: yellow;
}

<强>的Javascript ：

step = 0;

int_1 = setInterval( function() {
    step++;
    Outer.scrollTop = step;
    if (step >= Outer.offsetHeight+16) {
        clearInterval(int_1);
        setTimeout( function() {
            int_2 = setInterval( function() {
                step--;
                Outer.scrollTop = step;
                if (step <= 0) {
                    clearInterval(int_2);
                }
            }, 5);
        }, 500);
    }
}, 5);

JSFiddle here。

以编程方式创建div元素并在另一个div元素中垂直滚动

2 个答案: