js实现微信禁止h5网页下拉，禁止微信h5页面默认下拉

最新推荐文章于 2024-08-08 13:41:49 发布

W Y L

最新推荐文章于 2024-08-08 13:41:49 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/weixin_45959525/article/details/123110909

版权

touchmove event.preventDefault() 阻止滚动触屏设备浏览器事件

关键词由CSDN通过智能技术生成

在这里插入图片描述
直接添加下面代码即可：

document.body.addEventListener('touchmove', function (e) {
	e.preventDefault()
}, { passive: false })

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

W Y L

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

禁用微信浏览器的下拉_解决微信浏览器禁止下拉查看真实域名网址的问题

天马3798

08-30

1782

一、原理监听touchmove 事件，取消默认操作，则就不会触发页面的下拉。二、代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic

微信h5界面隐藏刷新功能_隐藏微信H5页面下拉出现的网址

weixin_39981624的博客

12-19

636

微信h5页面在进行下拉操作的时候会出现网址，如下图：在很多时候，并不想暴露这个网址，这时候可以模拟微信下拉操作，从而避免这种情况。而模拟这种操作可以一个叫better-scroll插件实现。这里说下大概用法：安装NPMbetter-scroll 托管在 Npm 上，执行如下命令安装：npm install better-scroll --save接下来就可以在代码中引入了，webpack等...

2 条评论您还未登录，请先登录后发表或查看评论

微信浏览器禁止页面下拉查看网址实例详解

12-09

微信浏览器禁止页面下拉查看网址实例详解此类事件是手机touchmove默认事件行为，可以通过js代码隐藏事件： $(‘body').on(‘touchmove', function (event) {event.preventDefault();}); or document.addEventListener('touchmove', function(e){e.preventDefault()}, false); 但这样往往会把页面原生的scroll效果也一同去掉了，下面的代码可以完美解决这个问题： var overscroll = function(el) { el.addEve

uniapp中的H5页面微信浏览器中禁止下拉出现网页由xxx.xxxxx.com提供，QQ浏览器X5内核提供技术支持这个

weixin_41463944的博客

11-18

835

uniapp中的H5页面微信浏览器中禁止下拉出现网页由xxx.xxxxx.com提供，QQ浏览器X5内核提供技术支持这个

微信浏览器禁止页面下拉查看网址导致其他scroll失效

最新发布

前端人的博客

08-08

168

移动端有 touchstart touchmove 绘制矩形，发现向下移动时会出现页面下拉，看到浏览网页地址。短短几行代码确实完美解决了！但是副作用却很大，导致网页内其他 scroll 全部失效，这该如何解决呢？此方案可以解决上下滑动 scroll，对于左右 scroll 需要再改改！此方法写的较简约，使用 vue3 setup ，看不懂的勿喷！方案一：prevent-scroll。

微信h5页面禁止下拉方法

chinaqqcom的博客

01-10

2720

微信h5页面下拉露出网页来源的解决办法：将document的touchmove事件禁止掉 //禁止页面拖动 document.addEventListener('touchmove', function(e) { e.preventDefault(); }, { passive: false }); 备注：要加上passive: false，不然会报错 ...

微信网页禁止页面下拉滑动

qq_37530404的博客

07-05

3727

（1）最简单粗暴的方法，就是禁止掉浏览器整个页面的滑动 document.body.addEventListener('touchmove', function (e) { e.preventDefault() }, {passive: false}) 上边代码块中的方法一般不建议使用，除非整个页面都不可以滚动时（2）除了需要滚动的部分，禁止掉浏览器滚动的默认事件（VUE中组件的部分代...

Javascript - 移动H5页面禁用客户端自带的下拉刷新同时实现页面滚动

欢迎来到我的博客！我是一名拥有10年以上经验的系统架构师。在这个博客中，我将与大家分享我在C#、JavaScript、Python、Docker、SQL和Rust等领域的知识与经验。作为一名技术爱好者，我相信技术的力量可以改变世界。

05-31

8438

关键字：移动端，无下拉，可滚动页面在做移动端的H5页面时，由于手机自有的特性，整个页面具有下拉刷新功能。但如果我们仅仅是做展示页面，不希望下拉刷新，但同时也想保留整个页面的正常上下滚动，该如何做呢？实现要点禁用body上的touchmove事件设置恰当的元素布局使用matrix实现页面正常上下滚动禁用body上的touchmove事件 document.body.add...

禁止微信内h5网页下拉

abc_26zm的博客

09-21

922

document.body.addEventListener( "touchmove", function (e) { e.preventDefault(); }, { passive: false } );

js/css实现禁止微信浏览器下拉回弹效果

qq_17355709的博客

04-27

1105

由于项目需求，需要禁止微信浏览器默认的下拉回弹效果。然而，我在百度上搜了大半天，用了N多他人的代码，最后都以失败告终。但是呢，经过误打误撞，我竟然通过一句代码给解决了，而解决方法不是通过js，而是通过css，真的是感谢上天！！！就是把body的样式属性中overflow属性设置成hidden就可以了 overflow:hidden; 然后下拉的时候微信浏览器就不会跟着被下拉与回弹了。你说有意思不，一句样式就把事情给办妥了。 ...

H5页面禁用微信浏览器下拉

12-07

H5页面禁用微信浏览器下拉,使其下拉不会出现黑色来源显示，在JS文件中定义此方法即可。

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

js实现微信禁止h5网页下拉，禁止微信内置浏览器下拉网页，附：demo

热门推荐

TANKING，开源开发者！

02-23

3万+

在微信里面打开的链接页面如果没有经过特殊处理，下拉的话，会出现这样的情况：大概就是一个深灰色的背景，还有一个源站的域名。本人觉得这个非常丑，并且有时候就不想别人下拉看到我们的源站域名。所以我这里做了一个demo让大家看看：微信扫码：代码：<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type...

html游戏禁止微信浏览器下拉,js实现微信禁止h5网页下拉，禁止微信内置浏览器下拉网页，附：demo...

weixin_30261255的博客

05-31

326

在微信里面打开的链接页面如果没有经过特殊处理，下拉的话，会出现这样的情况：大概就是一个深灰色的背景，还有一个源站的域名。本人觉得这个非常丑，并且有时候就不想别人下拉看到我们的源站域名。所以我这里做了一个demo让大家看看：微信扫码：禁止下拉.scroll{position:absolute;overflow:scroll;-webkit-overflow-scrolling: touch;top:...

微信h5阻止下拉出现“网页由...提供”

二七二十七的博客

03-17

2184

在微信h5的开发中，解决在微信打开h5页面时，禁止下拉页面查看“网页由…提供”获取网页的来源，兼容安卓和ios，实测有效

js阻止移动端下拉滑动效果

阿门阿窗一颗葡萄树

05-21

406

document.body.addEventListener('touchmove', function (e) { e.preventDefault(); // 阻止默认的处理方式即下拉滑动效果 }, { passive: false });

阻止微信浏览器下拉

a603423130的博客

08-05

487

function noPullDown(selector) { //禁止页面拖动 document.querySelector('body').addEventListener('touchmove', function (e) { console.log('禁止下拉出现网页来源信息') if(!selector) { e.preventDefault() } else { // 如果需要部分区域

阻止微信浏览器的下滑出现空白事件

超级兵团的博客

05-19

2658

var overscroll = function(el) { el.addEventListener('touchstart', function() { var top = el.scrollTop , totalScroll = el.scrollHeight , currentScroll = top + el.offsetHeight; //I

微信H5禁止下拉且可下滚动指定区域

05-24

可以通过CSS样式来实现微信H5页面禁止下拉和指定区域可下滚动。具体实现方法如下： 1. 禁止页面下拉： ``` body{ overflow: hidden; } ``` 2. 允许指定区域下滚动： ``` .scrollable{ overflow-y: scroll; -...