js源生惯性滚动与回弹(备用)

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="Keywords" content="" /><meta name="Description" content="" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta content="telephone=no" name="format-detection" /><meta content="email=no" name="format-detection" /><title>Document</title><style>body{margin:0;padding:0;}div{position:relative;width:200px;height:300px;margin:3em auto;border:1px solid #CCC;overflow:hidden;-webkit-user-select:none;user-select:none;}ol{width:100%;}ol>li{height:30px;}</style></head><body><div><ol><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ol></div><script>function myScroll(ctx){var ol=ctx.firstElementChild||ctx.firstChild,offset=50,cur=0,isDown=false,vy=0,isInTransition=false;ctx.addEventListener("mousedown",function(e){if(isInTransition)return;clearTimeout(this._timer);vy=0;this._oy=e.clientY-cur;this._cy=e.clientY;this._oh=this.scrollHeight;this._ch=this.clientHeight;this._startTime=e.timeStamp;isDown=true;});ctx.addEventListener("mousemove",function(e){if(isDown){if(e.timeStamp-this._startTime>40){this._startTime=e.timeStamp;cur=e.clientY-this._oy;if(cur>0){cur*=0.4;              }else if(cur<this._ch-this._oh){cur=(cur+this._oh-this._ch)*0.4-this._oh+this._ch; }setPos(cur);}vy=e.clientY-this._cy;this._cy=e.clientY;}},false);        ctx.addEventListener("mouseleave",mleave,false);ctx.addEventListener("mouseup",mleave,false);function setPos(y){ol.style.transform="translateY("+y+"px) translateZ(0)";}function ease(target){    isInTransition=true;           ctx._timer=setInterval(function(){cur-=(cur-target)*0.2;if(Math.abs(cur-target)<1){cur=target;clearInterval(ctx._timer);isInTransition=false;}setPos(cur);            },20);}function mleave(e){if(isDown){isDown=false;var t=this,friction=((vy>>31)*2+1)*0.5,oh=this.scrollHeight-this.clientHeight;this._timer=setInterval(function(){vy-=friction;cur+=vy;setPos(cur);if(-cur-oh>offset){                clearTimeout(t._timer);ease(-oh);return;}if(cur>offset){clearTimeout(t._timer);ease(0);return;}if(Math.abs(vy)<1){  clearTimeout(t._timer);if(cur>0){ease(0);return;}if(-cur>oh){ease(-oh);return;}}},20);}}}myScroll(document.querySelector("div"));</script></body>
</html>

posted on 2016-09-11 00:17 _ihhu 阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/miid/p/5860793.html

js源生惯性滚动与回弹(备用)相关推荐

html回弹效果,微信小程序 transform 实现惯性滚动，回弹效果【下拉回弹】
1. 新建Scroll文件 2. 在Scroll/index.wxml文件中写入如下代码 style="transform:translateY(-{{scrollindex*100}}%) ...
原生js元素惯性滚动
元素惯性滚动 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
JS惯性滚动，加速滚动
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
IOS端 vux中scroll滚动自动回弹到顶部或者左侧的解决办法
IOS端 vux中scroll滚动自动回弹到顶部或者左侧的解决办法问题表象在滑动的时候,偶发性出现自动回弹到顶部的现象,通过onScroll回调发现scrollTop为-1造成回弹,开始寻找为什么 ...
前端也要懂物理 —— 惯性滚动篇
作者:凹凸曼-吖伟我们在平时编程开发时,除了需要关注技术实现.算法.代码效率等因素之外,更要把所学到的学科知识(如物理学.理论数学等等)灵活应用,毕竟理论和实践相辅相成.密不可分,这无论是对于我们的 ...
原生JS实现图片滚动
2019独角兽企业重金招聘Python工程师标准>>> 原生JS实现图片滚动一.原理黑色盒子是最终显示滚动图像的区域,绿色盒子为其子容器,其宽度要大于黑色外层盒子,这样才能通过设 ...
html文本滚动到底后自动回到顶部,JS 实现DIV 滚动至顶部后固定
JS 实现DIV 滚动至顶部后固定 DIV滚动至顶部后固定 Test Div function menuFixed(id) { var obj = document.getElementById(id ...
手机html滚动原理,手机滚动-如何实现惯性滚动
手机惯性滚动时应该怎么计算速度,以及之后速度怎么递减等问题因为要做一个手机端的滚动插件,所以想模拟出手机原生的惯性滚动,就是手指快速滑动后,手机页面在手指抬起来之后,依然会滚动一段距离的效果. 现在 ...
JS左右无缝滚动（一般方法+面向对象方法）
其实不管是一般方法还是面向对象的方法都还有很多可以改进的地方,有需要的先将就着用吧!-_- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

js源生惯性滚动与回弹(备用)

js源生惯性滚动与回弹(备用)相关推荐

最新文章

热门文章