我想添加一个类似于苹果页面中使用的滚动效果,例如 https://www.apple.com/iphone-13-pro/。我将如何使用 HTML、CSS 和 JavaScript 来做到这一点?
回答1
您可以使用 webkit
访问浏览器中的元素并自行决定对其进行自定义。
body::-webkit-scrollbar {
width: 10px;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
body::-webkit-scrollbar-thumb {
background-color: var(--scrollbar);
outline: none;
border-radius: 10000px;
overflow: hidden;
}
您可以使用 -webkit-scrollbar
访问此元素并使用 -webkit-scrollbar-track
设计滚动条位置并使用 -webkit-scrollbar-thumb
设计滚动条本身。
另外,不要在StackOverFlow里面找现成的代码,最好学会使用。
回答2
您可以轻松使用 wow js 滚动效果。这是链接 - https://www.delac.io/WOW/ 看看这个很容易使用。还有很多滚动效果的库和插件 - https://www.hongkiat.com/blog/scrolling-effects-js-libraries/