h5页面如何禁止弹性下拉

最新推荐文章于 2024-05-08 17:08:39 发布
最新推荐文章于 2024-05-08 17:08:39 发布
阅读量5k 收藏 2
点赞数 1
分类专栏： web css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ximenxiafeng/article/details/103978289
版权
css 同时被 2 个专栏收录
15 篇文章 0 订阅
订阅专栏
web
10 篇文章 0 订阅
订阅专栏

禁止弹性下拉有两个思路

  1. 最上层页面用position:fixed固定住，这样页面下拉的时候这个上层div就固定在屏幕上了。
    1. 还是能够看出页面上下拖动的，只不过被拖动的html在固定div的底部，看不出
  2. 将html设置  overflow: hidden;   将body设置  overflow: scroll;
    1. 固定住了最顶层的html，但是页面内容如果超过1屏的话，可以将body设置成scroll

 

夏天的一朵云
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
阻止移动端H5开发浏览器默认的左右滑动、下拉刷新行为
m0_45382009的博客
12-08 2221
场景：移动端签名的时候 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
JavaScript禁止微信浏览器下拉回弹效果
01-19
本文实例为大家分享了JavaScript禁止微信浏览器下拉回弹的效果，供大家参考，具体内容如下 方法1： [removed] var overscroll = function(el){ el.addEventListener('touchstart', function(){ var top = el.scrollTop; var totalScroll = el.scrollHeight; var currentScroll = top + el.offsetHeight; if(t
ios禁止背景弹性滑动
月下lk山人的博客
09-29 1652
前端开发过程中，ios设备的背景会弹性滑动，有时这种滑动会影响页面布局，所以需要处理这种影响
微信浏览器禁止下拉弹性效果
weixin_30566149的博客
03-06 791
在做公司手机端官网时，在微信浏览器打开时，出现下图这种情况：微信浏览器出现自带的下拉弹性效果，导致自己写的下拉刷新功能出现问题。 为了解决这个问题，网上提供的解决方法基本是： 或者： 这是很暴力的做法，虽然是把下拉弹性效果禁止了，可是也把页面里的滚动条禁止了，导致网页不能滚屏。 经过了解。微信下拉弹性效果其实是浏览器本身的一种特性。 而下拉回弹是touchmove事...
Vue h5移动端实现页面不滚动，里面内容滚动
最新发布
qq_54146568的博客
05-08 577
在 Vue.js 中，如果你想禁止整个页面的滚动，但允许某个内部元素进行滚动，你可以通过一些 CSS 和 JavaScript 技巧来实现。最常见的方式是为禁止滚动的部分设置样式，然后为允许滚动的部分设置适当的滚动属性。这里有一个示例，展示了如何禁止整个页面滚动，但允许页面中的某个特定区域进行滚动。
CSS - H5 页面禁止页面上拉下拉及滚动
王佳斌
02-01 8244
前言 开发 H5 页面时，我们需要将页面固定住禁止上拉下拉及滚动，网上很多方法，多数是 JS 来判断滚动条来实现。 实现 我推荐使用 CSS 实现，几行代码就能达到同样的效果。 /* 在根节点加入以下代码 */ body{ height: 100%; width: 100%; position: fixed; top: 0; left: 0; } ...
iOS safari 苹果手机如何阻止页面弹性“橡皮筋效果”？
weixin_34143774的博客
01-10 2137
苹果上这个上下弹的效果对于有固定导航的页面，体验很不好   知乎上搜到一个并不是完美方案：https://www.zhihu.com/question/22256539   完美方案是有个国外插件叫：preventoverscroll.min.js 可以解决问题   最好的方案是APP本身来阻止和开启，比如钉钉接口就有： 禁用iOS webview弹性效果(仅iOS支持) 0.0...
微信h5页面禁止下拉方法
chinaqqcom的博客
01-10 2648
微信h5页面下拉露出网页来源的解决办法：将document的touchmove事件禁止掉 //禁止页面拖动 document.addEventListener('touchmove', function(e) { e.preventDefault(); }, { passive: false }); 备注：要加上passive: false，不然会报错 ...
vue禁止微信内H5上下拉动页面
Kino的博客
04-21 1758
preventDefault() 方法不会阻止事件通过 DOM 进一步传播。请使用 stopPropagation() 方法来解决。如果事件是可取消的，则 preventDefault() 方法会取消该事件，这意味着属于该事件的默认操作将不会发生。并非所有活动都可以取消。请使用 cancelable 属性 来确定事件是否可取消。
H5页面禁用微信浏览器下拉
12-07
H5页面禁用微信浏览器下拉,使其下拉不会出现黑色来源显示，在JS文件中定义此方法即可。
html5 css橡皮筋效果,阻止移动端浏览器下拉橡皮筋效果（下拉滚动露底）
weixin_39747975的博客
06-07 785
前言最近项目有个需求：需要移动端浏览器下的橡皮筋效果，但是页面内部的存在div框需要存在滚动。由此，遇到的问题与解决过程，记录如下。声明：此处只讨论js控制部分，css的设置(例：overflow的设置等)第一步阻止中比需抖接朋功要朋插橡皮筋效果简单粗享器哈班其础件事是架考发求关通互面待需了暴的解决法，阻止浏览器滑动的默是能览调不页新代些事几求事都时学下是事功过认行为document.body.a...
苹果手机内嵌h5如何禁止全局弹性效果
程序员超超的博客
11-20 741
简单模拟一个场景，这是一个商城的商品分类页面，是一个左右布局，左面是所有的分类，右面是展示这个分类的商品，这里为了简单就只写一个demo了。区域滑动时，也会触发全局的弹性效果。这个时候很容易造成意想不到的交互问题，这个时候我们需要禁用掉全局的弹性效果，可以在。之后，这块区域都会有回弹效果，这个是苹果手机自带的。然而默认情况下，全局也是自带回弹效果的（这里全局指的是。如果在苹果手机上，默认情况下，某块区域设置。注意绿色和蓝色上面和下面的白色区域。，那么如果子组件高度，超过了。的高度，那你子组件就需要设置。
H5中，禁用ios自带回弹效果产生的bug
dzry_lr的博客
09-13 556
H5中，禁用ios自带回弹效果产生的bug。
vue h5页面滑动回弹问题解决
wy_Blog的博客
10-26 2607
方法一： fixed定位 检查问题，发现页面没高度，解决办法： html,body统一设为100%，在父组件的根元素设置position:fixed可以使页面无橡皮筋效果 <style> .layout{ position: fixed; top: 0; bottom: 0; width: 100%; height: 100%; overflow: hidden; } </style> 不要将手机页面的高度设为100vh，手机浏...
禁止ios浏览器页面上下滚动 (橡皮筋效果)弹性滚动 微信的下拉回弹
热门推荐
細水、長流√的专栏
05-27 2万+
发现之前阻止页面滚动的代码e.preventDefault代码失效了。于是自己折腾了一番，找到了解决办法。 一、前言 浏览器在移动端有一个默认触摸滚动的效果，让我们感触最深的莫过于微信浏览器里面，下拉时自带橡皮筋的效果。 然而在开发的时候我们经常需要阻止此效果。 在此先直接给一个方案，直接加上下面的代码即可： document.body.addEventListener('tou...
h5页面有弹窗时，禁止非弹窗页面的滑动问题（兼容问题）
zuo-yiran的博客
08-29 1327
兼容问题：当做弹窗效果时，希望弹窗出现的时候网页不可再上下滚动、翻页，可以用body{overflow:hidden}，可是做手机站的时候，就不兼容了。    解决方法：html,body同时设为overflow:hidden。    例子：css样式部分：.overHiden{overflow: hidden;height: 100%;}          jquery...
阻止safari浏览器弹性滚动效果
ZHZS123的博客
03-01 915
阻止safari浏览器弹性滚动效果。
移动端阻止浏览器中默认元素滑动回弹效果（橡皮筋效果）
泥猴桃的博客
12-12 9053
在js文件中加如下代码： document.addEventListener('touchstart',function(e){ e.preventDefault(); //阻止浏览器默认事件 });添加上这段代码以后可以阻止浏览器中默认元素滑动回弹效果 ，同时a标签点击跳转失效，默认长按文字选中效果失效，浏览器自带滚动条效果失效！
禁止ios自带的下拉上拉h5
08-31
禁止iOS自带的下拉和上拉H5功能可以通过以下方法实现： 1. 使用CSS样式禁止页面出现下拉和上拉效果。可以添加以下样式代码到页面的CSS文件中： ```css body { overscroll-behavior: none; touch-action: none; } ``` 这样可以禁止页面出现默认的下拉和上拉效果。 2. 使用JavaScript禁止默认的下拉和上拉行为。可以添加以下JavaScript代码到页面的JS文件中： ```javascript document.addEventListener('touchmove', function(e) { e.preventDefault(); }, { passive: false }); ``` 这样可以禁止滑动事件的默认行为，从而实现禁止下拉和上拉。 需要注意的是，禁止默认的下拉和上拉效果可能会降低用户体验，因为这些功能是iOS系统提供的原生特性，用户习惯了使用它们进行页面的浏览和交互。所以在决定禁止这些功能之前，建议仔细考虑用户体验和页面需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值