js开启和禁止页面滑动

JavaScript016

js开启和禁止页面滑动,第1张

在移动端中,由于机型的不同,往往在弹窗的时候会出现页面的穿透事件,使得原页面还是能够进行滑动,这是我们不想看到的效果。

前提

html,body{

height: 100%

height: 100vh

}

首先,建立一个函数

之后在触发弹窗的时候禁止页面滚动

关闭弹框时开启页面滚动

注意:切不可以下写法

方法二:

通过对滑动事件(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对象的数组。