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 相关文章推荐
jquery插件 cluetip 关键词注释
Jan 12 Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
react实现换肤功能的示例代码
Aug 14 Javascript
javascript中join方法实例讲解
Feb 21 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 Javascript
js实现前端界面导航栏下拉列表
Aug 27 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 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
php获取文件大小的方法
2014/02/26 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
python调用新浪微博API项目实践
2014/07/28 Python
python基础教程之对象和类的实际运用
2014/08/29 Python
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
Python银行系统实战源码
2019/10/25 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
Python字典实现伪切片功能
2020/10/28 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
Python用Jira库来操作Jira
2020/12/28 Python
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
小组口号大全
2014/06/09 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS