当前位置:首页 > 站长杂谈 > 正文内容

禁止触屏滑动touchmove方法介绍

小宝4年前 (2020-06-27)站长杂谈1290

在移动端页面开发中,有时需要禁止用户滑动屏幕,搜索了好久才找到移动终端的touch事件,touchstar,touchmove,touchend.

阻止滚动

一些移动设备有缺省的touchmove行为,比如说经典的iOS overscroll效果,当滚动超出了内容的界限时就引发视图反弹。这种做法在许多多点触控应用中会带来混乱,但要禁用它很容易。

document.body.addEventListener('touchmove', function(event) { 
event.preventDefault(); 
}, false);

在PC端页面开发中,可以设置onmousewheel,其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+)中,都提供了 “mousewheel” 事件。但杯具的是 Firefox 3.5+ 却不支持此事件,不过庆幸 Firefox 3.5+ 中提供了另外一个等同的事件:”DOMMouseScroll” (事件和事件属性的测试案例)。

var addEvent = (function(){

if (window.addEventListener) {
return function(el, sType, fn, capture) {
el.addEventListener(sType, fn, (capture));
};
} else if (window.attachEvent) {
return function(el, sType, fn, capture) {
el.attachEvent("on" + sType, fn);
};
} else {
return function(){};
}
})(),
stopEvent: function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
zoomIn = function(){},
zoomOut = function(){},
// isFirefox 是伪代码,大家可以自行实现
mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";
// object 是伪代码,你需要注册 Mousewheel 事件的元素
addEvent(object, mousewheel, function(event){
var delta = 0;
event = window.event || event;
stopEvent(event);
delta = event.wheelDelta ? (event.wheelDelta / 120) : (- event.detail / 3);
// zoomIn, zoomOut 是伪代码,需要实现的缩放事件
delta > 0 ? zoomIn(delta): zoomOut(Math.abs(delta));
} , false);


转自:沐辰小窝

扫描二维码推送至手机访问。

版权声明:本文由 菠萝博客 发布,如需转载请注明出处。

本文链接:https://boluobk.cn/post/107.html

标签: 分享经验
分享给朋友:

相关文章

科普VPS的线路:163、CN2、GTT、Telia等线路知识

163骨干网163骨干网也就是我们通常说的AS4134接入的带宽,是中国电信的骨干网,也就是我们经常看到202.97开头的路由,此网络负责了90%的电信业务负载(163有电信整个海外出口的90%带宽容量)。 目前直接和163有Peer比如...

KOS工具箱【免费】一键设置Kangle EP每日备份数据到FTP空间

KOS工具箱【免费】一键设置Kangle EP每日备份数据到FTP空间

介绍KOS云备份免费版● [免费]保留最新3份数据● [免费]备份自己FTP存储空间● [免费]每日备份网站和数据库安装前往KOS工具箱(Kangle工具箱)官网;安装并运行KOS工具箱;安装完成人后,输入kostool.cn启动KOS工具...

简介漂亮的广告代码

简介漂亮的广告代码

效果图:代码如下:<!--图片广告区域开始--> <div style="background-color:#fff;box-shadow:0px 0px 10px #d...

什么是TAG标签?怎么设置?有什么用?

什么是TAG标签?怎么设置?有什么用?

刚开始入行SEO行业的SEOer可能不太明白究竟什么是TAG标签,TAG标签有什么用处?要怎样设置才能显示呢?为什么要设置TAG标签,对于这一系列的问题,下面由小编为您揭晓答案!1.什么是TAG标签,TAG标签显示在哪里TAG标签指的是可以...

[宝塔面板]Nginx开启HSTS获得MySSL A+评分

[宝塔面板]Nginx开启HSTS获得MySSL A+评分

最近有人在问如何获得MySSL A+评分,那么今天就来讲一讲宝塔面板开启HSTS,在讲开启HSTS之前,先来简单说一下宝塔面板如何一键部署SSL部署SSL如果你登录了宝塔账号并且已经通实名认证,我推荐使用宝塔SSL(有钱买域名通配...

宝塔面板插件-shadowsocks可视化管理

宝塔面板插件-shadowsocks可视化管理

插件简介以前总认为宝塔面板和shadowsocks水火不相容,两者总是无法成功安装在同一VPS,无奈只能买两台vps使用。终于,看到某大神制作了宝塔面板插件,将SS集成在可视化插件中,非常方便进行管理。测试环境系统版本:CentOS&nbs...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。