Javascript 使用 CSS3 动画滚动

animate scrolling with CSS3

提问by Spiff

Is there a way to animate scrolling with CSS3?

有没有办法用 CSS3 动画滚动？

Something like this?

像这样的东西？

@-webkit-keyframes scrolltoview
{
    0%   { scrollTop: 0; }
    100% { scrollTop: 30%; }
}

How to put in the css where's the staring point of the animation?

如何在css中放置动画的起点？

采纳答案by David Wick

css3 animations work with css properties only. this isn't possible within the confines of css.

css3 动画仅适用于 css 属性。这在 css 范围内是不可能的。

回答by mente

As explained hereyou can do it using margin-toptrick and updating scroll position dynamically. You can check the demo. Code is straight forward:

正如这里所解释的，您可以使用margin-top技巧和动态更新滚动位置来做到这一点。您可以查看演示。代码很简单：

// Define the variables
var easing, e, pos;
$(function(){
  // Get the click event
  $("#go-top").on("click", function(){
    // Get the scroll pos
    pos= $(window).scrollTop();
    // Set the body top margin
    $("body").css({
      "margin-top": -pos+"px",
      "overflow-y": "scroll", // This property is posed for fix the blink of the window width change 
    });
    // Make the scroll handle on the position 0
    $(window).scrollTop(0);
    // Add the transition property to the body element
    $("body").css("transition", "all 1s ease");
    // Apply the scroll effects
    $("body").css("margin-top", "0");
    // Wait until the transition end
    $("body").on("webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd", function(){
      // Remove the transition property
      $("body").css("transition", "none");
    });
  });
});

@AndrewP provided a nice working examplebased on this idea

@AndrewP基于这个想法提供了一个很好的工作示例

回答by Andy Hoffman

I discovered a better way to animate scrolling, which is to use JavaScript to translate the document body. The advantages of animating with translate over margin or position is pretty well documented. The bottom line is, when animating elements, the GPU will always do a better job.

我发现了一种更好的动画滚动方式，即使用 JavaScript 来翻译文档正文。在边距或位置上使用平移动画的优点已得到充分证明。最重要的是，在为元素设置动画时，GPU 总是会做得更好。

Here's an example which calculates the user's current position from the top of the window and then smoothly translate back to the top of the window. Assume that a user click or touch event triggered the backToTop function.

这是一个示例，它从窗口顶部计算用户的当前位置，然后平滑地平移回窗口顶部。假设用户点击或触摸事件触发了 backToTop 函数。

See it in action: https://antibland.github.io/starting_point/

看看它在行动：https: //antibland.github.io/starting_point/

function whichTransitionEvent() {
  var t,
      el          = document.createElement('fakeelement'),
      transitions = {
        'transition':'transitionend',
        'OTransition':'oTransitionEnd',
        'MozTransition':'transitionend',
        'WebkitTransition':'webkitTransitionEnd'
     };

  for (t in transitions){
    if (el.style[t] !== undefined){
      return transitions[t];
    }
  }
}

function backToTop() {
  var pos_from_top  = window.scrollY,
      transitionend = whichTransitionEvent(),
      body          = document.querySelector("body");

  function scrollEndHandler() {
    window.scrollTo(0, 0);
    body.removeAttribute("style");
    body.removeEventListener(transitionend, scrollEndHandler);
  }

  body.style.overflowY = "scroll";
  window.scrollTop = 0;

  body.style.webkitTransition = 'all .5s ease';
  body.style.transition = 'all .5s ease';

  body.style.webkitTransform = "translateY(" + pos_from_top + "px)";
  body.style.transform = "translateY(" + pos_from_top + "px)";

  transitionend && body.addEventListener(transitionend, scrollEndHandler);
}

回答by Really Nice Code

This is a very simple .js function i made to animate + scroll a webpage.

这是一个非常简单的 .js 函数，我用来制作动画 + 滚动网页。

var Current_scroll_Y=0;
var Target_scroll_Y=0;
var scroll_Speed = 15;

function animate_Scroll(Y)
{
  Target_scroll_Y = Y;
  screen_Y = Math.floor(window.scrollY);

  //Scroll Down
  if(screen_Y<Y)
  {
    var myWindowScroll = setInterval(function(){ screen_Y = screen_Y+scroll_Speed;  if(screen_Y>=Target_scroll_Y){ clearInterval(myWindowScroll); return;}    window.scrollTo(0, screen_Y); }, 3);   
  }
  //Scroll Up
  if(screen_Y>Y)
  {
    var myWindowScroll = setInterval(function(){ screen_Y = screen_Y-scroll_Speed;  if(screen_Y<=Target_scroll_Y){ clearInterval(myWindowScroll); return;}    window.scrollTo(0, screen_Y); }, 3);  
  } 


}//End animate_Scroll  

回答by Connor

I don't think this is possible with css3, but if I understand your question correctly, it is very easy with jquery.

我认为 css3 不可能做到这一点，但是如果我正确理解了您的问题，那么使用 jquery 就很容易了。

Check out:

查看：

http://demos.flesler.com/jquery/scrollTo/

http://demos.flesler.com/jquery/scrollTo/

http://api.jquery.com/scroll/

http://api.jquery.com/scroll/