H5移动端页面禁止页面滑动

于 2024-09-02 16:01:41 发布
阅读量263 收藏
点赞数 2
文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35520046/article/details/141822220
版权

1.禁止页面左右滑动

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

2.禁止页面上下滑动

 html, body {
    overflow: hidden; 
    height:100%
}

qq_35520046
关注
阻止移动端H5开发浏览器默认的左右滑动、下拉刷新行为
m0_45382009的博客
12-08 2382
场景：移动端签名的时候 document.body.addEventListener('touchmove',function (event) { event.preventDefault() },{passive:false}) passive:false 告诉它这个监听器不是被动的监听器 如果不加可能会报如下错误[Intervention] Unable to preventDafault inside passive event listener due to target being trea
移动端 html5 锁死不让滚动条滚动
06-13
重写ontouchstart ontouchmove 事件.达到锁死滚动条不让滚的目的 直接调用里面的方法就行.有注释
如何禁止页面滚动
dayanwu2842的博客
11-27 2821
禁止页面滚动 有三种方法 1，依靠css 将页面 document.documentElement.style.overflow='hidden'; document.body.style.overflow='hidden';//手机版设置这个。 如果设置了如上，页面的滚动条将会消失，此时鼠标滚轮失效。 但是 你用键盘的 上下左右键，你会发现，页面仍然可以滚动。 ...
H5禁止页面滑动
LOVVme的博客
01-27 549
H5禁止页面滑动，CSS一键搞定 touch-action: none; 只适配H5页面，
H5禁止页面滑动/滚动
瑶山的博客
09-25 5077
禁止页面滚动--完美解决方案，滚动条显示与否，手持设备兼容与否 禁止页面滚动 有三种方法 1，依靠css 将页面 document.documentElement.style.overflow='hidden'; document.body.style.overflow='hidden';//手机版设置这个。 如果设置了如上，页面的滚动条将会消失，此时鼠标滚轮失效。 但是 你用键...
H5页面如何禁止左右滑动
最新发布
JadePlus的技术博客
03-18 744
overflow属性值中visible和hidden是对立的，scroll和auto是对立的。inherent是继承父级元素的overflow属性值，默认是scroll。从父元素继承overflow属性的值。4.overflow-y:scroll 纵轴强制出现滚动条。5.overflow：scroll x轴和y轴都有滚动条。
移动端页面上下滑动时禁止显示底部黑色
03-29
页面布局 <body id="wrapper"> <div id="container"></div> </body> 引用组件 引用组件支持下面两种方式： clone之后直接拷贝引用bin文件夹下面的preventoverscroll.min.js 从npm下载安装 npm install...
移动端h5禁止页面滚动
peade的博客
09-23 1970
在做H5页面，发现在ios下，存在以下的现象： A,B两个兄弟元素，A覆盖在B上面。在A上面滑动手指，会引起B元素内部滚动。 body元素和内部元素。内部元素A绝对定位在上面。在A上面滑动手指，body会滚动。 针对 1 情况，目前没想到解决方法。 针对 2 情况， 解决方法如下： 简单处理 overflow方案 export const bodyScroll={ stop(){ document.body.style.overflow='' }, restore(){
js阻止移动端页面滚动的两种方法
10-20
本文将详细介绍两种JavaScript方法来阻止移动端页面的滚动。 ### 方法一：通过监听`touchmove`事件 在JavaScript中，我们可以监听`touchmove`事件，然后阻止其默认行为，从而实现页面滚动的禁用。这种方法的核心是...
H5移动端实现左右滑屏切换页面
热门推荐
水冰月的小兔子的博客
01-09 1万+
项目中需要实现的一个需求是顶部有一个tab选择框,点选某一个tab的时候切换页面，并且支持手势滑动，左滑右滑可以同点选tab一样切换页面。 根据项目中选用的ui组件cube-ui为基准查看了一下可实现的方案，比如可以直接用swipe或者是slide实现，但根据之前的实现方案来看，多少都会有些问题，尤其是在页面嵌套了很多层的垂直和水平滚动的情况下，会让滚动很不流畅。 于是选用了移动端的touch事件...
H5 移动端禁止上下滚动css设置
Dove言和
04-24 1万+
html,body{ overflow: hidden; height: 100%; } 要同时设置html、body两个的属性
阻止移动端H5开发浏览器默认左右滑动行为
weixin_51737813的博客
03-09 851
html{ touch-action:none; } //此时上下左右都不可滑动 --------改动 html{ touch-action:none; touch-action:pan-y; }
h5禁止滚动穿透(页面)
weixin_44805839的博客
07-04 1265
h5禁止滚动穿透(页面)
【H5】禁止移动端左右滑动
kikikiuu的博客
05-24 3837
今天做项目遇到一个问题，就是在移动端的手机上，我做的前端页面可以滑动，而产品的需求是不可以滑动，用一个css就能解决这个问题 解决方式:在最外层加上- 裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话 .hidden{ overflow-x:hidden; } ...
【h5】页面防止左右滑动，可以上下滑动
fzxyxf1314的博客
05-10 777
h5禁止滑动
【实战】前端必会 —— H5长页面禁止垂直滚动
程序边界
02-22 912
文章目录问题解决方式一：`overflow: hidden;`方式二：`preventDefault()`方式三：手动实现 问题 H5长页面在提交表单后会有弹窗反馈，这时需要禁止垂直滚动，否则会很怪。。。 解决 方式一：overflow: hidden; 在弹窗出现后为 body 增加 overflow: hidden; 弹窗关闭后恢复；通过增删class或是动态设置css都可，但是本方案在我这里并没有起作用。。。 方式二：preventDefault() 在弹窗出现后为 body 增加 touchmov
移动设备禁止h5页面滚动
程序员_R的专栏
10-22 9279
document.body.addEventListener('touchmove', function (event) { event.preventDefault(); }, false);
H5禁止弹窗页面滚动
马优晨
11-03 4254
这篇文章讲解一下，弹窗弹出以后，如何禁止页面滑动的技巧。如下图所示，在“弹窗”弹出后页面是可以滚动的。 解决方案：第一步： 在点击弹框的事件中添加： $("body").addClass('prevetwinow');第二步： 在关闭弹框的事件中添加： $("body").removeClass('prevetwinow');第三步：写CSS中prevetwinow的内容.prevetwinow{
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值