移动开发的时候，我们经常会遇到滑动事件，众所周知手机端滑动主要依靠touch事件。最近接连遇到两个页面都有类似overflow:auto的效果，一般情况下通过css设置是可以实现的（虽说丑了点儿）,，但是一旦overflow：auto的元素响应touch事件时就会有诸多不便，例如fullpage中某一元素自滑动，我们可以通过normalScrollElements来使元素滑动的时候不滑动到下一屏，但是在元素滑动到最底部的时候也就不能响应下一屏事件，上滑也是一样，这时候就需要touch事件来响应，为了以后封装方便，特简单封装一个jquery插件，同时也复习一下jquery插件开发及touch事件；
插件大体思路是这样的，如下图所示：方框内区域为固定宽高的父元素（设置overflow:hidden），子元素高度大于父元素，我们通过响应touch事件改变子元素的translate值（top也可以，但是translate效率更高一些），当然在此期间我们需判断子元素translate值的边界，最大为0，最小为子元素高度-父元素高度
ps：如果想做子元素根据手指移动，松开手指后回到边界需另写程序
下面来一步步写插件
第一步，先建立一个安全的作用域
;(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 "htmlcode">
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 "htmlcode">
start:function(e,context){
e.preventDefault();
var touches = e.touches[0];
context.initNumber = context.opt.vertical "htmlcode">
move:function(e,context){
e.preventDefault();
var touches = e.touches[0];
number = context.opt.vertical "htmlcode">
end:function(e,context){
e.preventDefault();
var touches = e.changedTouches[0];
var number = context.opt.vertical "htmlcode">
;(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模拟溢出滚动效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
标签：
js,模拟滚动,js溢出滚动
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无JS+CSS3模拟溢出滚动效果的评论...
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。