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

最新推荐文章于 2024-08-13 15:20:03 发布
最新推荐文章于 2024-08-13 15:20:03 发布
阅读量1.6k 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://segmentfault.com/a/1190000013335812
版权

在微信里面打开的链接页面如果没有经过特殊处理，下拉的话，会出现这样的情况：
图片描述

大概就是一个深灰色的背景，还有一个源站的域名。

本人觉得这个非常丑，并且有时候就不想别人下拉看到我们的源站域名。

所以我这里做了一个demo让大家看看：

微信扫码：
图片描述

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
    <title>禁止下拉</title>
    <style type="text/css">
        .scroll{
        position:absolute; 
        overflow:scroll; 
        -webkit-overflow-scrolling: touch; 
        top:0; 
        left:0; 
        bottom:0; 
        right:0;
    }
    </style>
</head>
<body>
<div class="scroll">
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
禁止下拉！<br/>
是不是可以啊！！！
是的话
那就赞赏一下吧！
<img src="http://wxpad.cn/yunpan/cdn/imgsrc/1519366332.jpg" style="width: 100%;" />
</div>
</body>
<script type="text/javascript">
    //禁止下拉
    var overscroll = function(el) {
  el.addEventListener('touchstart', function() {
    var top = el.scrollTop
      , totalScroll = el.scrollHeight
      , currentScroll = top + el.offsetHeight
    //If we're at the top or the bottom of the containers
    //scroll, push up or down one pixel.
    //
    //this prevents the scroll from "passing through" to
    //the body.
    if(top === 0) {
      el.scrollTop = 1
    } else if(currentScroll === totalScroll) {
      el.scrollTop = top - 1
    }
  })
  el.addEventListener('touchmove', function(evt) {
    //if the content is actually scrollable, i.e. the content is long enough
    //that scrolling can occur
    if(el.offsetHeight < el.scrollHeight)
      evt._isScroller = true
  })
}
overscroll(document.querySelector('.scroll'));
document.body.addEventListener('touchmove', function(evt) {
  //In this case, the default behavior is scrolling the body, which
  //would result in an overflow.  Since we don't want that, we preventDefault.
  if(!evt._isScroller) {
    evt.preventDefault()
  }
})
</script>
</html>

其中

<div class="scroll"></div>是整个主体，你只需要把你的项目代码写在这个div之间，就可以了！

weixin_34356555
关注
H5页面禁用微信浏览器下拉
12-07
H5页面禁用微信浏览器下拉,使其下拉不会出现黑色来源显示，在JS文件中定义此方法即可。
微信浏览器禁止页面下拉查看网址导致其他scroll失效
前端人的博客
08-08 287
移动端有 touchstart touchmove 绘制矩形，发现向下移动时会出现页面下拉，看到浏览网页地址。短短几行代码确实完美解决了！但是副作用却很大，导致网页内其他 scroll 全部失效，这该如何解决呢？此方案可以解决上下滑动 scroll，对于左右 scroll 需要再改改！此方法写的较简约，使用 vue3 setup ，看不懂的勿喷！方案一：prevent-scroll。
微信h5页面禁止下拉方法
chinaqqcom的博客
01-10 2795
微信h5页面下拉露出网页来源的解决办法：将document的touchmove事件禁止掉 //禁止页面拖动 document.addEventListener('touchmove', function(e) { e.preventDefault(); }, { passive: false }); 备注：要加上passive: false，不然会报错 ...
js禁止微信浏览器下拉显示黑底查看网址
weixin_30398227的博客
01-02 277
// 首先禁止body document.body.ontouchmove = function (e) { e.preventDefault(); }; // 然后取得触摸点的坐标 var startX = 0, startY = 0; //touchstart事件 function touchSatrtFunc(evt) { ...
微信H5禁止下拉 且可下滚动指定区域
weixin_30877227的博客
07-14 437
var app = document.getElementsByClassName("tree-hole-room-messages")[0]; var touchstartY; app.addEventListener( "touchstart", function(event) { console.log(1);...
微信中禁止网页下拉出现"网页由XXX提供" 【亲测有效】
weixin_34185364的博客
06-18 5593
最近在开发过程中遇到新的需求：在微信公众号中禁止下拉出现我司域名，微信公众号中的域名是由微信内置浏览器根据网址自动读取，暂时不支持自定义功能。在无法更改的前提下，想到了禁止页面下拉的方法。于是有了以下代码： 参考:微信中打开网页，下拉会显示网页由XXX提供，但是有些网页却没有，不同平台不同手机也不一样，这是什么原因？ $(document).ready(function(){ ...
vue实现微信浏览器左上角返回按钮拦截功能
11-21
　在微信公众号开发中，有时需要对浏览器左上角返回按钮进行拦截处理相关的页面逻辑，而并不是让页面直接返回上一页，之前在这个细节点上的一直实现得不是很好。但看到京东购物公众号上的效果却实现得非常好，所以...
微信h5开发demo
08-14
在微信H5中，这些功能可以通过JavaScript库如jQuery或者专门的框架如Swiper、iScroll等实现。 3. **微信JS-SDK集成**： 微信提供了JavaScript SDK，开发者可以通过它来调用微信的原生功能，如分享、支付、扫一扫、...
微信小程序demo：上海实时公交查询
03-15
开发者需要掌握的基础技术包括JavaScript、WXML（微信小程序的标记语言）和WXSS（微信小程序的样式语言）。这些技术与传统的前端开发类似，但有一些特定于微信小程序的特性，如组件化开发和数据绑定。 在"上海实时...
微信开发 - 详细实现第三方网站或H5网页使用微信支付、微信授权登录时，本地开发环境提示redirect_uri参数错误无法调试，让本地项目运行IP地址就能测试支付或登录，无需每次部署到服务器上调试！
最新发布
王佳斌
08-13 6417
vue2，nuxt2，vue3，nuxt3，uniapp，微信开放平台，公众号，微信支付，微信登录授权，redirect_uri参数错误，本地调试，报错，如何在本地就能测试，vue跑出来的ip地址，微信支付回调错误，微信登录回调错误，公众号网页本地调试，内网穿透，调用微信支付提示，内网穿透本地调试，如何在测试环境进行支付测试，必须要传到线上才行吗，在测试环境里无法测试怎么办，手机h5移动端，pc网页，公众号页面，映射，host，本地回调地址，微信开放平台的回调域名怎么设置为本地域名IP，在本地调试不了怎么办
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
微信浏览器禁止页面下拉查看网址实例详解
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
禁止微信下拉
zhaozilong666的博客
07-03 762
微信下拉会展现ip地址黑框，google后发现了一个可以禁止的js片段： /**  * 禁止浏览器下拉回弹  */ function stopDrop() {     var lastY;//最后一次y坐标点     $(document.body).on('touchstart', function(event) {         lastY 
微信浏览器禁止页面下拉查看网址
qq_36926807的博客
07-04 5256
我们经常会遇到这样的情况就是在微信浏览器下拉网页时会显示带有网址的黑底，如图：那如何禁止出现这样的情形呢？一开始我使用如下代码来禁止：$(‘body’).on(‘touchmove’, function (event) {event.preventDefault();}); 或者 document.addEventListener('touchmove', function(e){e.preven...
禁止微信内h5网页下拉
abc_26zm的博客
09-21 943
document.body.addEventListener( "touchmove", function (e) { e.preventDefault(); }, { passive: false } );
微信网页禁止页面下拉滑动
qq_37530404的博客
07-05 3741
（1）最简单粗暴的方法，就是禁止掉浏览器整个页面的滑动 document.body.addEventListener('touchmove', function (e) { e.preventDefault() }, {passive: false}) 上边代码块中的方法一般不建议使用，除非整个页面都不可以滚动时 （2）除了需要滚动的部分，禁止掉浏览器滚动的默认事件（VUE中组件的部分代...
html游戏禁止微信浏览器下拉,js实现微信禁止h5网页下拉，禁止微信内置浏览器下拉网页，附：demo...
weixin_30261255的博客
05-31 341
在微信里面打开的链接页面如果没有经过特殊处理，下拉的话，会出现这样的情况：大概就是一个深灰色的背景，还有一个源站的域名。本人觉得这个非常丑，并且有时候就不想别人下拉看到我们的源站域名。所以我这里做了一个demo让大家看看：微信扫码：禁止下拉.scroll{position:absolute;overflow:scroll;-webkit-overflow-scrolling: touch;top:...
实现 h5 网页在微信内置浏览器中下载文件
10-10
要实现H5网页在微信内置浏览器中下载文件，可以考虑以下步骤： 1. 在H5网页中，提供下载按钮或链接，让用户点击进行文件下载。 2. 使用JavaScript编写下载功能的逻辑。可以通过创建一个隐藏的<a>标签，设置其href属性为文件的下载地址，然后模拟用户点击该标签来触发下载。 3. 在微信内置浏览器的环境下，由于涉及到跨域问题，需要注意设置服务器的响应头信息，以允许跨域请求下载文件。可以设置以下响应头信息： - "Access-Control-Allow-Origin: *" 允许来自所有来源的跨域请求。 - "Access-Control-Allow-Headers: Content-Type" 允许指定的请求头字段。 4. 在微信内置浏览器中，可能存在一些特殊的限制，例如对于非常大的文件，可能会限制下载速度或者提前中止下载。可以在网页中给出一些提示，告知用户可能会遇到的限制情况。 需要注意的是，实际上是否能够在微信内置浏览器中下载文件，还取决于用户的微信版本、手机操作系统的设置以及服务器的配置。有些用户可能会关闭微信中文件下载的权限，或者服务器端没有正确设置响应头信息，导致无法进行文件下载。因此，在设计和开发中，需要充分考虑这些因素，并进行兼容性测试。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值