如何使用CSS3 Transition来自定义页面滚动 [英] How to use CSS3 Transition to customize page scrolling

问题描述

我在寻找一种使用CSS3 Transition来创建平滑的页面滚动的方法。我知道如何使用javascript，但如果有一个方法来做CSS3，我会更喜欢它的性能目的。

解决方案

您可以使用 transform：translate（x，y）来模拟滚动，并且可以通过 transition-property all ;注意，您必须添加适当的供应商前缀，因为目前有很多CSS3。

参考文献： Mozilla开发中心：transform ， Mozilla开发中心：CSS过渡

PS请使用 transform：translate（）小心使用百分比，具体取决于元素的封装方式，-100％可以表示下一个display-height

I'm looking for a way to use CSS3 Transition to create a smooth page scrolling. I know how to do it using javascript but if there's a way to do it with CSS3, i will prefer it for performance purpose.

解决方案

You can use transform: translate(x,y) to simulate "scrolling", and this can be animated using transitions via transition-property: all; Note, you will have to add the appropriate vendor prefix, as with much of CSS3 at the moment.

References: Mozilla Dev Center: transform, Mozilla Dev Center: CSS Transitions

P.S. use percentages carefully with transform: translate() -- depending on how your element is wrapped, -100% can mean next 'display-height' section of content

这篇关于如何使用CSS3 Transition来自定义页面滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！