要在滚轮滚动时页面滚动加上动画效果，你可以使用JavaScript来监听滚轮事件并添加动画。以下是一个示例，演示如何使用JavaScript和CSS来实现这一效果：
HTML结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>滚轮滚动页面动画</title>
</head>
<body>
<div class="content">
<!-- 你的页面内容 -->
</div>
<script src="script.js"></script>
</body>
</html>CSS样式（styles.css）：
body {
margin: 0;
padding: 0;
overflow: hidden; /* 隐藏页面的默认滚动条 */
}
.content {
width: 100%;
height: 200%; /* 这里可以根据你的实际内容高度调整 */
background-color: #f0f0f0; /* 页面背景色 */
transition: transform 0.5s ease-in-out; /* 添加平滑过渡效果 */
}JavaScript代码（script.js）：
const content = document.querySelector('.content');
let scrollY = 0;
// 监听滚轮事件
window.addEventListener('wheel', (e) => {
// 根据滚轮滚动方向更新滚动值
scrollY += e.deltaY;
// 限制滚动值在页面内容范围内
scrollY = Math.min(Math.max(scrollY, 0), content.offsetHeight - window.innerHeight);
// 应用滚动动画
content.style.transform = `translateY(-${scrollY}px)`;
});上述代码会监听滚轮事件，根据滚动方向更新滚动值，然后将滚动值应用于页面内容的 transform 属性，从而创建滚动动画效果。你可以根据需要调整动画的持续时间和缓动函数，以适应你的设计需求
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
