JS+CSS3模拟溢出滚动效果


Posted in Javascript onAugust 12, 2016

移动开发的时候,我们经常会遇到滑动事件,众所周知手机端滑动主要依靠touch事件。最近接连遇到两个页面都有类似overflow:auto的效果,一般情况下通过css设置是可以实现的(虽说丑了点儿),,但是一旦overflow:auto的元素响应touch事件时就会有诸多不便,例如fullpage中某一元素自滑动,我们可以通过normalScrollElements来使元素滑动的时候不滑动到下一屏,但是在元素滑动到最底部的时候也就不能响应下一屏事件,上滑也是一样,这时候就需要touch事件来响应,为了以后封装方便,特简单封装一个jquery插件,同时也复习一下jquery插件开发及touch事件;

插件大体思路是这样的,如下图所示:方框内区域为固定宽高的父元素(设置overflow:hidden),子元素高度大于父元素,我们通过响应touch事件改变子元素的translate值(top也可以,但是translate效率更高一些),当然在此期间我们需判断子元素translate值的边界,最大为0,最小为子元素高度-父元素高度

ps:如果想做子元素根据手指移动,松开手指后回到边界需另写程序

JS+CSS3模拟溢出滚动效果

下面来一步步写插件

第一步,先建立一个安全的作用域

;(function($){
//插入代码
})(jQuery) 
如果我们需要通过$(“#id”).xx()方法调用,需要像下面这样写,这里的fn及jquery的prototype;
$.extend({
exec:function(){}
}) //这种扩展通过$.exec()调用
$.fn.simuScroll = function(option){
var scrollObj=new simuScroll(this,option);
return scrollObj.init();
}

下面来看上面代码中的simuScroll方法,这是一个构造函数,它接受两个参数,ele为当前接受touch事件的元素(一般可以设置为父元素),option为用户传入的配置参数,如改变translate的元素,父元素子元素高度,extra为需额外增加的高度,滑动到顶部或底部时执行的回调函数等等;

var simuScroll = function(ele,option){
this.settings = {
target : ele, //事件元素
changeTarget:'',
outerHeight : '800', //外层高度
innerHeight : '500', //内层高度
extra : '0', //额外增加的距离
swipeUp : null,
swipeDown : null,
vertical:true
};
//通过jquery.extend对默认的settings进行扩展,得出一个全新的对象
this.opt = jQuery.extend({},this.settings,option); 
this.initNumber = this.lastNumber = this.result = 0;
this.flag = false;
//计算出子元素与父元素距离差,以此来判定元素的最大滑动距离
this.diff = parseFloat(this.opt.innerHeight) - parseFloat(this.opt.outerHeight) + parseFloat(this.opt.extra);
this.diff = this.diff < 0 ? 0 :this.diff;
this.direction = '';
};

在对jquery prototype进行扩展时,第一步为实例化上面的构造函数,第二步则直接调用了构造函数的init方法,具体见下面备注

init:function(){
//jquery对象直接绑定touch事件获取event需originalEvent获取原生对象的event属性
//jquery对象 获取pagex event.originalEvent.touches[0].pageX 
//dom对象 event.touches[0].pageX 
var target = this.opt.target.get(0); 
//如果子元素高度大于父元素,则执行滑动事件,否则执行回调函数
this.flag = this.diff > 0 ? 'translate' : 'exec';
/*如果元素已设置transform中 translate,scale,skew,rotate中的任何一项,
则我们再直接设置transform:translateY(10px)时会覆盖掉初始设置的属性
所以我们通过获取元素的matrix值既保证原有属性,又能设置任意值*/
var cssText = this.opt.changeTarget.css('-webkit-transform');
if(cssText=='none'){ //元素未设置transform属性
this.str = this.opt.vertical ? 'translateY' : 'translateX' ;
}else{
this.str = cssText ;
var reg = /-?\d+\.?\d*/g; //正则表达式
/*获取matrix中各参数
直接获取到的matrix值为类似matrix(1,0,0,1,0,0)
获取到的为[1,0,0,1,0,0] 这样我们就可以随意的修改某一个值
数组的第5项为元素的translateX值,第6项为translateY值 */
this.params = this.str.match(reg); 
this.matrix = this.opt.vertical ? 6 : 5 ; //根据传入的参数确定要修改的值为translateY或tranlateX
} 
var _this = this;
//父元素绑定touch事件,传递事件对象及context
target.addEventListener('touchstart',function(e){
_this.start(e,_this)
});
target.addEventListener('touchmove',function(e){
_this.move(e,_this)
});
target.addEventListener('touchend',function(e){
_this.end(e,_this)
});
}

touchstart方法相对比较简单,根据需要滑动的方向记录手指接触屏幕时的初始值

start:function(e,context){
e.preventDefault();
var touches = e.touches[0];
context.initNumber = context.opt.vertical ? touches.pageY : touches.pageX;
},

touchmove方法主要根据手指滑动距离动态改变元素css属性,让元素能够跟随手指进行移动

setNumber方法只有一句话: this.params.splice(n-1,1,number) 根据传入的参数改变matrix数组

move:function(e,context){
e.preventDefault();
var touches = e.touches[0];
number = context.opt.vertical ? touches.pageY : touches.pageX;
//获取相对手指触碰屏幕的变化值
var delta = number - context.initNumber;
if(context.flag == 'translate'){ //如果需要滑动
context.result = context.lastNumber + delta;
//设置滑动的最大值和最小值
context.result = context.result > 0 ? 0 : context.result ;
context.result = -context.result > context.diff ? -context.diff : context.result;
//动态设置元素css属性
if(context.matrix){
switch (context.matrix) {
case 6: 
context.setNumber(6,context.result)
break;
case 5:
context.setNumber(5,context.result)
break;
}
context.opt.changeTarget.css('-webkit-transform','matrix('+context.params.join(',')+')')
}else{
context.opt.changeTarget.css('-webkit-transform',context.str+'('+context.result+'px)')
}
}
},

touchend则判断释放时是否需要执行回调函数

end:function(e,context){
e.preventDefault();
var touches = e.changedTouches[0];
var number = context.opt.vertical ? touches.pageY : touches.pageX,
n = number - context.initNumber;
//当元素滑动距离大于10 并且最初元素translate值为0同时回调函数存在,则执行回调函数
if(n>10 && context.lastNumber == 0 && context.opt.swipeDown){ 
context.opt.swipeDown()
}else if(n<-10 && context.lastNumber == -context.diff && context.opt.swipeUp){
context.opt.swipeUp();
}
//将常量设为结果值,能保证多次连贯滑动
context.lastNumber = context.result;
}

基本上一个简单的jQuery插件就完成了,框架如下

;(function($){
var a = function(m,n){
//函数内容
};
a.prototype = {
init:function(){
},
start:function(){
},
move:function(){
},
end:function(){
},
setNumber:function(){
}
}
$.fn.scrol = function(o){
var obj = new a(this,o);
return obj.init()
}
})(jQuery)

调用时如下:

$(".outer").simuScroll({
'outerHeight':$(".outer").height(),
'innerHeight':$('.inner').height(),
'changeTarget' : $(".inner"),
'swipeUp' :function(){
console.log('up')
},
'swipeDown' :function(){
console.log('down')
},
vertical:true
})

以上所述是小编给大家介绍的JS+CSS3模拟溢出滚动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript XML操作 封装类
Jul 01 Javascript
jquery ready函数源代码研究
Dec 06 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
Vue.js中 v-model 指令的修饰符详解
Dec 03 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 Javascript
微信小程序实现下拉框功能
Jul 16 Javascript
基于Cesium绘制抛物弧线
Nov 18 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 #Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 #Javascript
很实用的js选项卡切换效果
Aug 12 #Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 #Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 #Javascript
jquery实现垂直和水平菜单导航栏
Aug 27 #Javascript
JS实现图片剪裁并预览效果
Aug 12 #Javascript
You might like
星际实力自我测试
2020/03/04 星际争霸
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
js实现简单的倒计时
2021/01/28 Javascript
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
Python中index()和seek()的用法(详解)
2017/04/27 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
Python如何发布程序的详细教程
2018/10/09 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
python3实现mysql导出excel的方法
2019/07/31 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
英国景点门票网站:attractiontix
2019/08/27 全球购物
招聘与培训专员岗位职责
2014/01/30 职场文书
财产保全担保书范文
2014/04/01 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
捐款感谢信
2015/01/20 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
好员工观后感
2015/06/17 职场文书
2016春节放假通知范文
2015/08/18 职场文书
基督教追悼会答谢词
2015/09/29 职场文书
解析Java异步之call future
2021/06/14 Java/Android
Java8中接口的新特性使用指南
2021/11/01 Java/Android