Skrollr:平滑滚动
Skrollr:平滑滚动
提问于 2014-10-26 03:53:55
我想在转动鼠标滚轮时实现平滑的滚动。目前，当我转一圈时，滚动条会跳跃，动画也会跳跃。
此行为的示例：http://areaaperta.com/nicescroll/
仅使用skrollr就可以实现这种滚动吗？如果是这样的话，是怎么做的？我尝试了下面的代码
var s = skrollr.init({
render: function(data) {
//Debugging - Log the current scroll position.
console.log(data.curTop);
},
smoothScrolling: true,
smoothScrollingDuration: 500,
easing: {
WTF: Math.random,
inverted: function(p) {
return 1-p;
}
}
});但这并没有太大的不同。动画稍微平滑一点(即背景滑动一段时间，然后停止)，但滚动本身仍然是跳跃的。
我更喜欢使用skrollr来解决这个问题，因为我认为它已经准备好了，而不是添加另一个插件。
回答 3
Stack Overflow用户
发布于 2014-12-26 21:41:05
这是Petr Tichy (ihatetomatoes.net)的一句话：
为平滑动画，动画廉价的属性。
当你只为廉价的CSS属性设置动画效果时，你会得到最好的效果。
- transform: scale(1.2)
- transform: translateX(100px)
- transform: rotate(90deg)
- opacity: 0.5
这4个属性可以让你改变元素的大小、位置、旋转和不透明度。
这些CSS属性的组合将使您能够创建几乎大部分的想法，并将获得最佳结果。
如果您遇到滞后和起伏不定的滚动动画，请提供动画元素transform: translateZ(0)。
这将把元素提升到复合层中，并消除滞后。
Stack Overflow用户
发布于 2015-06-08 17:46:36
尝试包含此脚本
jQuery(function () {
var $window = jQuery(window);
var scrollTime = 0.5;
var scrollDistance = 150;
$window.on("mousewheel DOMMouseScroll", function (event) {
event.preventDefault();
var delta = event.originalEvent.wheelDelta / 120 || -event.originalEvent.detail / 3;
var scrollTop = $window.scrollTop();
var finalScroll = scrollTop - parseInt(delta * scrollDistance);
TweenMax.to($window, scrollTime, {
scrollTo: {
y: finalScroll,
autoKill: true
},
ease: Power1.easeOut,
overwrite: 5
});
});
});Stack Overflow用户
发布于 2016-12-01 19:01:23
我也有这个问题(在Mac上使用Chrome )
我通过这个插件解决的 : https://github.com/simov/simplr-smoothscroll
<!-- After jQuery -->
<script src="jquery.mousewheel.min.js"></script>
<script src="jquery.simplr.smoothscroll.min.js"></script>
<script type="text/javascript">$.srSmoothscroll();</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26566593
复制相关文章
相似问题
腾讯云开发者
