JS CSS3模拟溢出滚动效果

在开发手机时，我们经常会遇到滑动事件。众所周知，手机滑动主要依靠触摸事件。最近接连遇到两个页面有类似overflow:auto的效果，可以通过css设置来实现(虽然有点难看)。然而，一旦溢出：自动元素响应触摸事件，会有许多不便，例如，整页幻灯片中的一个元素本身。我们可以使用normalScrollElements使元素滑动而不滑动到下一个屏幕，但是当元素滑动到底部时，它不能响应下一个屏幕事件，向上滑动也是如此。此时，需要触摸事件来响应。为了将来打包的方便，简单打包了一个jquery插件，并且还回顾了jquery插件的开发和touch事件。

插件的大致思路如下，如下图所示：框中的区域是一个固定宽度和高度的父元素(设置overflow:hidden)，子元素的高度大于父元素的高度。我们通过响应触摸事件来改变子元素的翻译值(顶部可以，但是翻译效率更高)。当然，我们需要判断这个期间子元素的translate值的边界，最大值为0，最小值为子元素的高度——父元素的高度。

Ps:如果想让子元素按照手指移动，需要在松开手指返回边界的时候再写一个程序

让我们一步一步地编写插件

第一步是建立一个安全范围

；(函数($){//插入代码})(jQuery)如果我们需要通过$(“# ID”)调用。xx()方法，我们需要这样写，fn在这里还有原型；jquery的；$.extend({ exec : function(){ } })//此扩展调用$。fn . simu scroll=function(option){ var scroll obj=new simu scroll(this，option)至$。exec()；返回scrolbj . init()；}我们来看看上面代码中的simuScroll方法，它是一个构造函数。它接受两个参数。ele是当前接受触摸事件的元素(一般可以设置为父元素)，option是用户传入的配置参数，比如改变translate元素、父元素子元素的高度，extra是额外的高度，以及滑动到顶部或底部时要执行的回调函数等。

Varsimu scroll=function (ele，option) {this。settings={target:ele，//event元素changetarget: ' '，外层高度：' 800 '，//外层高度为innerHeight : '500 '，//内层高度为extra3360' 0 '，//额外距离为上摆： null，下摆3360 null，垂直： true }；//通过jquery.extend扩展默认设置，得到一个全新的对象this.opt=jquery.extend ({}，this.settings，option)；this . initnumber=this . last number=this . result=0；this.flag=false//计算子元素和父元素的距离差，确定元素的最大滑动距离，就是这个。diff=parseFLOAT(这。opt.innerheight)-parseFLOAT(这个。opt.outer height) parseFLOAT(这个。opt . extra)；this.diff=this.diff 0？0 :this.diffthis.direction=};扩展jquery prototype时，第一步是实例化上面的构造函数，第二步是直接调用构造函数的init方法，详见下面的注释

init:function(){//jquery对象直接绑定触控事件获取事件需原始级别获取原生对象的事件属性//jquery对象获取pagex事件。原创。触摸[0].pageX //dom对象事件.接触.pageX var target=this。选择。目标。get(0)；//如果子元素高度大于父元素，则执行滑动事件，否则执行回调函数this.flag=this.diff 0？翻译“:”执行长；/*如果元素已设置改变中平移、缩放、倾斜、旋转中的任何一项，则我们再直接设置变压器：变压器(10px)时会覆盖掉初始设置的属性所以我们通过获取元素的矩阵值既保证原有属性，又能设置任意值*/var CSS文本=这个。选择。改变目标。CSS('-web工具包-转换')；if(cssText=='none'){ //元素未设置改变属性this.str=this.opt.vertical？translateY ' : ' translateX } else { this . str=cssTextvar reg=/？\d \ .\ d */g；//正则表达式/*获取矩阵中各参数直接获取到的矩阵值为类似矩阵(1,0,0,1,0,0)获取到的为[1,0,0,1,0,0] 这样我们就可以随意的修改某一个值数组的第5项为元素的translateX值，第6项为翻译值*/这个。params=这个。字符串。match(reg)；这个. matrix=这个. opt。竖排？6 : 5 ;//根据传入的参数确定要修改的值为翻译或tranlateX } var _ this=this//父元素绑定触控事件，传递事件对象及上下文目标。addeventlistener('触摸开始'，函数(e){_this.start(e，_ this)})；目标。addeventlistener('触摸移动'，函数(e){_this.move(e，_ this)})；目标。addeventlistener(' touch end '，函数(e){_this.end(e，_ this)})；}touchstart方法相对比较简单，根据需要滑动的方向记录手指接触屏幕时的初始值

start:function(e，context){ e . prevent default()；var touch=e . touch[0]；语境。initnumber=上下文。选择。垂直？触摸。佩吉：触摸。Pagex},触摸移动方法主要根据手指滑动距离动态改变元素钢性铸铁属性，让元素能够跟随手指进行移动

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

move:function(e，context){ e . prevent default()；var touch=e . touch[0]；number=context.opt.vertical？触摸。佩吉：触摸。Pagex//获取相对手指触碰屏幕的变化值var delta=数字-上下文。initnumberif(上下文。flag==' translate '){//如果需要滑动语境。结果=上下文。LastNumber delta//设置滑动的最大值和最小值context.result=context.result 0？0 : context.resultcontext。结果=-上下文。结果上下文。差异？-背景。diff :上下文。结果；//动态设置元素钢性铸铁属性if(上下文。matrix){ switch(上下文。matrix){ case 6:上下文。setnumber(6，上下文。结果)打破；case 5:context.setNumber(5，context。结果)打破；}上下文。选择。改变目标。CSS('-web kit-transform '，' matrix(' context.params.join('，'))))} else { context。选择。改变目标。CSS('-web工具包-转换'，上下文。str '('上下文。结果' px)')} } }，touchend则判断释放时是否需要执行回调函数

end:function(e，context){ e . prevent default()；var touch=e . changed touch[0]；var number=context.opt.vertical？触摸。佩吉：触摸。pagex，n=数字-上下文。initnumber//当元素滑动距离大于10 并且最初元素翻译值为0同时回调函数存在，则执行回调函数if(n10上下文。最后一个数字==0上下文。选择。swipedown){ context。选择。swipedown()} else if(n-10上下文。最后一个数字==-上下文。差异上下文。选择。swipeup){上下文。选择。swi peup()；}//将常量设为结果值，能保证多次连贯滑动语境。最后一个数字=上下文。结果；}基本上一个简单的jQuery插件就完成了，框架如下

；（函数($){var a=函数(m，n){//函数内容};a . prototype={ init : function(){ }，start:function(){}，move:function(){}，end:function(){}，setnumber : function(){ } $。fn。scroll=function(o){ var obj=new a(this，o)；return obj.init()}})(jQuery)调用时如下：

$('.外’)。simusroll({ ' OuthHeight ' : $(')。外’)。height()，' innerHeight':$('。内部')。height()，' changeTarget' : $('。内部')，向上滑动' :功能(){控制台。log ('up')}，' sweep down ' : function(){ console。log ('down')}，竖排： true})以上是边肖介绍的JS CSS3模拟溢出滚动效果，希望对大家有帮助。如果大家，非常感谢大家对我们网站的支持！