滚动到使用自定义CSS3转换

Question

我有一段代码，它使用标准的jQuery驱动动画来平滑地从页面的一个部分滚动到另一个部分(以避免页面锚中的页面跳转)。下面是：

// Scroll to 
$('.scrollto').click(function() {
   var elementClicked = $(this).attr("href");
   var destination = $(elementClicked).offset().top;
   $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, 800 );
   return false;
});

我不使用JQuery的动画，而是使用定制的CSS3转换，如下所示：

.scrollto {
  -webkit-transition-timing-function: cubic-bezier(.77,0,.175,1);
     -moz-transition-timing-function: cubic-bezier(.77,0,.175,1);
      -ms-transition-timing-function: cubic-bezier(.77,0,.175,1);
          transition-timing-function: cubic-bezier(.77,0,.175,1);
}

如何将两者合并在一起，并确保使用的是CSS3转换而不是jquery的？

Answer 1

不能使用CSS3转换来控制jQuery函数。也不能使用CSS直接动画滚动条，因为滚动位置不是样式。

有些库通过利用CSS3转换(例如，iScrollJS)来模拟滚动，但是为了移动本机滚动条，您需要严格使用JavaScript。

解决方案是使用允许自定义放松功能的jQuery放松库。它还附带了内置的CSS3宽松功能的副本。