gpt4 book ai didi

javascript - 以编程方式使 div 元素在另一个 div 元素内垂直滚动

转载 作者:太空宇宙 更新时间:2023-11-04 03:45:27 24 4
gpt4 key购买 nike

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

我找到了一个 vertical carousel为此,但我希望它是自动的。有没有一种简单的方法可以实现这一点?

最佳答案

因为你没有给代码,所以我做了自己的原型(prototype)。调整此代码以满足您的需要,如果您添加代码,我可以为您完成。这是基本思想。

<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

关于javascript - 以编程方式使 div 元素在另一个 div 元素内垂直滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24210395/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com