模拟滚动条,且惯性滚动,实践[demo]
先直接上Demo
惯性滚动原理:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 moveContainerScroll: function(x){
2 // this.moveContainer.css({
3 // left: -x/(this.fullWidth-this.dragWidth-20)*((this.subWidth * this.size + this.marginLeft)-this.fullWidth) + 'px'
4 // });
5 var left= -x/(this.fullWidth-this.dragWidth-20)*((this.subWidth * this.size + this.marginLeft)-this.fullWidth) ,
6 that = this;
7 ~function(){
8 that.moveContainer.stop().animate({left:left},3000,null,function(t,b,c,d){
9 return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
10 });
11 }();
12 }
2 // this.moveContainer.css({
3 // left: -x/(this.fullWidth-this.dragWidth-20)*((this.subWidth * this.size + this.marginLeft)-this.fullWidth) + 'px'
4 // });
5 var left= -x/(this.fullWidth-this.dragWidth-20)*((this.subWidth * this.size + this.marginLeft)-this.fullWidth) ,
6 that = this;
7 ~function(){
8 that.moveContainer.stop().animate({left:left},3000,null,function(t,b,c,d){
9 return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
10 });
11 }();
12 }
关键就在算子tween的选择
这里选择了Cubic.easeInOut加速后减速
function(t,b,c,d){return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;}
不了解javascript动画的可以看这篇文章《JavaScript Tween算法及缓动效果》
很简单吧!
模仿手机那样惯性滚动应该也不难了!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步