jquery怎么禁止手机页面触屏滑动页面滚动。(安卓和IOS都禁止)以及怎么...

发布网友 发布时间：2022-04-22 21:01

我来回答

共4个回答

懂视网 时间：2022-04-28 17:18

以下下方法在一屛之内是可行的

body;html 设置overflow:hidden

.overflow-hidden{
 height: 100%;
 overflow: hidden;
}

// 弹出时
$('html, body,.page').addClass('overflow-hidden');

// 隐藏时
$('html, body,.page').removeClass('overflow-hidden');

问题

当body内容超出一屛时，弹框背景页面会自动滚动到顶部，无法回到原来弹框所在的位置

保存scrollTop，再设置scrollTo

var top = $(window).scrollTop();
// 弹出时
$("body .page").css({
 "position": "fixed",
 "top": -top,
 "left": 0, 
 "right": 0, 
 "bottom": 0
}),

// 隐藏式
$("body .page").css({
 "position": "static"
});
$("html").css({
 "scroll-behavior": "unset"
});
$(window).scrollTop(top),
$("html").css({
 "scroll-behavior": "smooth"
});

问题

当body内容超出一屛时，弹框背景页面会自动滚动到顶部，无法回到原来弹框所在的位置

页面发生了 top 和页面滚动;页面会有闪烁的情况

绑定touchmove事件，然后调用preventDefault()

function preventDefaultFn(event){
 event.preventDefault();
}

// 弹出时 遮罩层
$('.modal-overlay').on('touchmove', preventDefaultFn);

// 隐藏时 遮罩层
$('.modal-overlay').off('touchmove', preventDefaultFn);

问题

弹框中还有滚动的内容，滚动内容也无法滚动

解决

给弹框内需滚动的元素添加标记，在判断是否执行event.preventDefault();

给main元素添加position:absolute(推荐)

.page {
 /* main绝对定位，进行内部滚动 */
 position: absolute;
 top: 0;
 bottom: 0;
 right:0;
 left:0;
 /* 使之可以滚动 */
 overflow-y: scroll;
 /* 增加该属性，可以增加弹性 */
 -webkit-overflow-scrolling: touch;
}
.overflow-hidden{
 overflow: hidden;
}
// 弹出时
$('.page').addClass('overflow-hidden');
// 隐藏时
$('.page').removeClass('overflow-hidden');
<div class="page">
 <!-- 内容在这里... -->
</div>

优点

没有上述这些问题

随带解决了ios fixed 的相关bug

缺点

需要改页面结构

css代码微多

热心网友 时间：2022-04-28 14:26

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

热心网友 时间：2022-04-28 15:44

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、查看效果。

热心网友 时间：2022-04-28 17:19

监听页面触摸运动
var jin=0;
document.addEventListener("touchmove",function(e){
if(jin==0){
e.preventDefault();
e.stopPropagation();
}
},false);

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