要使用JavaScript实现动态翻页/卷曲,您可以使用CSS的scroll-snap
属性和JavaScript的scrollTo
方法。以下是一个简单的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: flex;
flex-direction: column;
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
.page {
scroll-snap-align: start;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="page" style="background-color: red;">Page 1</div>
<div class="page" style="background-color: green;">Page 2</div>
<div class="page" style="background-color: blue;">Page 3</div>
</div>
<script>
function scrollToPage(pageNumber) {
const container = document.querySelector('.container');
const page = document.querySelector(`.page:nth-child(${pageNumber})`);
if (page) {
container.scrollTo({ top: page.offsetTop, behavior: 'smooth' });
}
}
</script>
</body>
</html>
.container
的<div>
,其中包含3个名为.page
的子<div>
。我们将.container
的scroll-snap-type
属性设置为y mandatory
,以启用垂直滚动卷曲。scrollToPage
的JavaScript函数,该函数接受一个pageNumber
参数。该函数首先获取.container
元素和目标页面元素,然后使用scrollTo
方法将滚动条滚动到目标页面的顶部。scrollToPage(pageNumber)
函数来滚动到任何页面。例如,要滚动到第2页,可以调用scrollToPage(2)
。这个示例仅仅是一个简单的实现,您可以根据需要进行修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云