在着陆页的滚动上制作动画微调框时，我想如何可以快速完成并使用JavaScript编写几行代码。
我想通过在Web视图上上下滚动而不使用jQuery或React这样的JavaScript库来在圆内旋转SVG reload-icon。
因此，我使用DOM JavaScript以非常简单的方式实现了此结果。让我在下面向您展示我的实际实现：
为了区分从项目代码的解决方案，我创建了三个文件，在这个例子中：index.html，index.css，和index.js。
让我们在中心标记一个带有重新加载图标的绿色黄色圆圈：
<!-- index.html -->
<html>
<head>
...
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="wrapper">
<div class="circle">
<img id="reload" src="reload-solid.svg" alt="scroll">
</div>
</div>
<script src="index.js"></script>
</body>
</html>
根据HTML树，接下来，我使用CSS设置元素的样式：
/* index.css */
body {
height: 3000px;
}
.wrapper {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: fixed;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: greenyellow;
text-align: center;
vertical-align: middle;
display: table-cell;
}
#reload {
width: 50px;
height: 50px;
}
❗️ 请注意，身体的高度支柱为3000px，需要通过滚动向您显示重新加载图标在绿黄色圆圈内的旋转。
此外，我已将圆形元素垂直和水平居中以更好地预览。您可以在circle课堂上看到。
接下来，我们需要在滚动元素上添加旋转效果：
- 创建一个
onscroll(),将scrollRotate()在DOM中调用函数的函数。 - 通过id查找reload-icon元素，该元素将通过滚动进行旋转并将其存储到
image变量中。 - 使用
transformCSS属性通过旋转来操作reload-icon元素。 - Apply
Window.pageYOffset属性将返回当前沿垂直轴（上/下）滚动文档的像素数。
// index.js
window.onscroll = function () {
scrollRotate();
};
function scrollRotate() {
let image = document.getElementById("reload");
image.style.transform = "rotate(" + window.pageYOffset/2 + "deg)";
}
👉 Window.pageYOffset/2可让元素旋转更快。数字越小，旋转速度越快。数字越大，旋转越慢。
我们所做的（我是指前端开发人员）并不是那么独特。通常，我们面临着似乎很容易解决的问题，后来又将其重构为更优雅，更易读的解决方案。
