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 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
理解Javascript_06_理解对象的创建过程
Oct 15 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
javascript框架设计之框架分类及主要功能
Jun 23 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
简述ES6新增关键字let与var的区别
Aug 23 Javascript
vue中实现高德定位功能
Dec 03 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 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
一个可以显示阴历的JS代码
2007/03/05 Javascript
javascript 有趣而诡异的数组
2009/04/06 Javascript
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
JS 实现双色表格实现代码
2009/11/24 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
checkbox使用示例
2013/08/23 Javascript
document.getElementById获取控件对象为空的解决方法
2013/11/20 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
Python中下划线的使用方法
2015/03/27 Python
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
python 两种方法删除空文件夹
2020/09/29 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
Yahoo-PHP面试题3
2012/01/14 面试题
电子商务专业个人的自我评价分享
2013/10/29 职场文书
给交警的表扬信
2014/01/12 职场文书
青蓝工程实施方案
2014/03/27 职场文书
公司节能减排方案
2014/05/16 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
中秋节晚会开场白
2015/05/29 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
python基础之爬虫入门
2021/05/10 Python
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript