jquery怎么禁止手机页面触屏滑动页面滚动。（安卓和IOS都禁止）以及怎么接触禁止？谢谢

Posted 2023-04-24

是禁止滑动页面滚动，不是隐藏。谢谢，急！！！

通过对滑动事件（touchmove）设置e.preventDefault()和e.stopPropagation()函数实现功能。以及禁止解除，即把touchmove改成touchstart即可。

具体实现思路及代码如下：

1、打开一个html页面，页面只有一个<h>标签，并在浏览器打开开发者调试界面。安卓和ios调试均正常。

2、添加关键函数，滑动时输出字符。（此时，将e.preventDefault()和e.stopPropagation()两个函数注释）

3、此时，开发者工具console输出：

4、此时，将第三步的注释去掉，将正常的console注释，如下：

5、此时的页面输出如下：（滑动时返回错误）

扩展资料：

js移动端事件：

1、touchstart：当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发

2、touchmove：当手指在屏幕上滑动时连续地触发。在这个世界发生期间，调用preventDefault()可以阻止滚动。

3、touchend：当手指在屏幕上移开时触发。

4、touchcancel：当系统停止跟踪触摸时触发。

上面这几个事件都会冒泡，也都可以取消。

虽然这些触摸事件没有在DOM规范中定义，但它们却是以兼容DOM的方式实现的。因此，每个触摸事件的event对象都提供了鼠标事件中常见的属性：

bubbles,cancelable,view,clientX,clientY,screenX,screenY,detail,altKey,shiftKey,ctrlKey和metaKey。

除了常见的DOM属性外，触摸世界还包含下列三个用于跟踪触摸的属性。

1、touches:表示当前跟踪的触摸操作的Touch对象的数组。

2、targetTouches:特定于事件目标的Touch对象的数组。

3、changedTouches:表示字上次触摸以来发生了什么改变的Touch对象的数组。

参考技术A

1、新建html文档。

2、准备好需要用到的图标。

3、书写hmtl代码。<div class="box">    <!--代码开始-->    <div class="main"></div>    <div class="sub">        <div class="sub01"></div>        <div class="sub01"></div>        <div class="fixed">我是固定的哟</div>            </div>    <!--代码结束--></div>。

4、书写css代码。

5、代码整体结构。

6、查看效果。

参考技术B 监听页面触摸运动
var jinzhi=0;
document.addEventListener("touchmove",function(e)
if(jinzhi==0)
e.preventDefault();
e.stopPropagation();

,false);

后面随便用个函数 把jinzhi的值改为不为0 就又可以滚动了。原理就是这样 很简单追问

你好，我是这样写的
var t=0;
$(".nav_click").click(function()
t++;
var jz=t%2;
if(jz==0)

document.addEventListener("touchmove",function(e)
e.preventDefault();
e.stopPropagation();
,false);

)当jz不是0，也是禁止的，怎么改，谢谢

追答

因为 禁止不禁止是在监听里做判断 而不是监听函数外，在函数外只要触发一次监听，只要不取消监听都会一直执行。所以必须把判断写在里面
document.addEventListener("touchmove",function(e)
if(jz==0)
e.preventDefault();
e.stopPropagation();

,false);

追问

$(".nav_click").click(function()
t++;
var jz=t%2;
document.addEventListener("touchmove",function(e)

if(jz!=0)
e.preventDefault();
e.stopPropagation();

,false);
)
这样也是一直执行，一直禁止的。不能解除

追答

把监听放在最外面，他并不是与每次点击想关联，监听只能一次。
var jz=0;//全局

$(".nav_click").click(function()
t++;
var jz=t%2;
);

document.addEventListener("touchmove",function(e)
if(jz!=0)
e.preventDefault();
e.stopPropagation();

,false);

这样才行

追问

像您这样的话，if(jz!=0)
e.preventDefault();
e.stopPropagation();
这个if语句也是只执行一次，能加QQ吗？871647423.谢谢

追答

var jz=0;//全局

$(".nav_click").click(function()
t++;
var jz=t%2;
if (document.addEventListener)
document.removeEventListener("touchmove", fun, false);
else
document.addEventListener("touchmove",fun,false);

);

function fun()
if(jz!=0)
e.preventDefault();
e.stopPropagation();



哦对，忽略了

本回答被提问者和网友采纳 参考技术C 监听页面触摸运动
var jinzhi=0;
document.addEventListener("touchmove",function(e)
if(jinzhi==0)
e.preventDefault();
e.stopPropagation();

,false);

后面随便用个函数 把jinzhi的值改为不为0 就又可以滚动了。原理就是这样 很简单

javascript 拖拽移动滚动条

现在做了一个产品的追溯界面，在触屏终端上使用的时候，触摸屏定位及其不准，无法拖动滚动条，所以想用javascript写一个按下左键拖动界面的功能，类似于触屏手机那种，在随意位置按住不放就能拖动页面的感觉，希望各位javascript脚本大神不吝赐教。：）
就是说触屏的定位非常之飘忽不定，所以滚动条基本是装饰，所以想通过一个脚本能实现鼠标左键按下后上下移动鼠标从而达到移动页面，也就是上下移动滚动条的效果，二楼的谢谢你，期待更好的方法,三楼的，说了触摸不准，要触摸精确我还那么费力做这个来折腾干嘛

参考技术A <script type="text/javascript">
var _y;
var scrolling=false;
document.onmousedown=function(e)
var e = window.event || e;
_y = e.clientY;
scrolling=true;
;
document.onmousemove = function(e)
if(!scrolling) return;
var e = window.event || e;
document.body.style.cursor="move";
var move=(e.clientY-_y)/10;
var scrollTop=document.body.scrollTop + document.documentElement.scrollTop;
window.scrollTo(0,scrollTop+move);
;
document.onmouseup=function()
scrolling=false;
document.body.style.cursor="default";
;
</script>

不足是会选中文字- -！本回答被提问者采纳 参考技术B 滚轮不是很好么。。。