找回密码
 立即注册

QQ登录

只需一步,快速开始

[js] js实现微信禁止h5网页下拉,禁止微信内置浏览器下拉网页

[复制链接]
查看: 1540|回复: 0
最佳答案
0 

51

主题

181

帖子

5105

积分

S1

积分
5105
 楼主| 发表于 2018-2-23 14:19:31 | 显示全部楼层 |阅读模式
在微信里面打开的链接页面如果没有经过特殊处理,下拉的话,会出现这样的情况:
微信图片_20180223141633.jpg

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

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

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

微信扫码:

微信截图_20180223142543.png

代码:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9. <meta name="format-detection" content="telephone=no">
  10.     <title>禁止下拉</title>
  11.     <style type="text/css">
  12.                 .scroll{
  13.                 position:absolute;
  14.                 overflow:scroll;
  15.                 -webkit-overflow-scrolling: touch;
  16.                 top:0;
  17.                 left:0;
  18.                 bottom:0;
  19.                 right:0;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24. <div class="scroll">
  25. 禁止下拉!<br/>
  26. 禁止下拉!<br/>
  27. 禁止下拉!<br/>
  28. 禁止下拉!<br/>
  29. 禁止下拉!<br/>
  30. 禁止下拉!<br/>
  31. 禁止下拉!<br/>
  32. 禁止下拉!<br/>
  33. 禁止下拉!<br/>
  34. 禁止下拉!<br/>
  35. 禁止下拉!<br/>
  36. 禁止下拉!<br/>
  37. 禁止下拉!<br/>
  38. 禁止下拉!<br/>
  39. 禁止下拉!<br/>
  40. 禁止下拉!<br/>
  41. 禁止下拉!<br/>
  42. 禁止下拉!<br/>
  43. 禁止下拉!<br/>
  44. 禁止下拉!<br/>
  45. 禁止下拉!<br/>
  46. 禁止下拉!<br/>
  47. 禁止下拉!<br/>
  48. 禁止下拉!<br/>
  49. 禁止下拉!<br/>
  50. 禁止下拉!<br/>
  51. 禁止下拉!<br/>
  52. 禁止下拉!<br/>
  53. 禁止下拉!<br/>
  54. 禁止下拉!<br/>
  55. 禁止下拉!<br/>
  56. 禁止下拉!<br/>
  57. 禁止下拉!<br/>
  58. 禁止下拉!<br/>
  59. 禁止下拉!<br/>
  60. 禁止下拉!<br/>
  61. 禁止下拉!<br/>
  62. 禁止下拉!<br/>
  63. 禁止下拉!<br/>
  64. 禁止下拉!<br/>
  65. 禁止下拉!<br/>
  66. 禁止下拉!<br/>
  67. 禁止下拉!<br/>
  68. 禁止下拉!<br/>
  69. 禁止下拉!<br/>
  70. 禁止下拉!<br/>
  71. 禁止下拉!<br/>
  72. 禁止下拉!<br/>
  73. 禁止下拉!<br/>
  74. 禁止下拉!<br/>
  75. 禁止下拉!<br/>
  76. 禁止下拉!<br/>
  77. 禁止下拉!<br/>
  78. 禁止下拉!<br/>
  79. 禁止下拉!<br/>
  80. 禁止下拉!<br/>
  81. 禁止下拉!<br/>
  82. 禁止下拉!<br/>
  83. 禁止下拉!<br/>
  84. 是不是可以啊!!!
  85. 是的话
  86. 那就赞赏一下吧!
  87. <img src="http://wxpad.cn/yunpan/cdn/imgsrc/1519366332.jpg" style="width: 100%;" />
  88. </div>
  89. </body>
  90. <script type="text/javascript">
  91.     //禁止下拉
  92.     var overscroll = function(el) {
  93.   el.addEventListener('touchstart', function() {
  94.     var top = el.scrollTop
  95.       , totalScroll = el.scrollHeight
  96.       , currentScroll = top + el.offsetHeight
  97.     //If we're at the top or the bottom of the containers
  98.     //scroll, push up or down one pixel.
  99.     //
  100.     //this prevents the scroll from "passing through" to
  101.     //the body.
  102.     if(top === 0) {
  103.       el.scrollTop = 1
  104.     } else if(currentScroll === totalScroll) {
  105.       el.scrollTop = top - 1
  106.     }
  107.   })
  108.   el.addEventListener('touchmove', function(evt) {
  109.     //if the content is actually scrollable, i.e. the content is long enough
  110.     //that scrolling can occur
  111.     if(el.offsetHeight < el.scrollHeight)
  112.       evt._isScroller = true
  113.   })
  114. }
  115. overscroll(document.querySelector('.scroll'));
  116. document.body.addEventListener('touchmove', function(evt) {
  117.   //In this case, the default behavior is scrolling the body, which
  118.   //would result in an overflow.  Since we don't want that, we preventDefault.
  119.   if(!evt._isScroller) {
  120.     evt.preventDefault()
  121.   }
  122. })
  123. </script>
  124. </html>
复制代码

其中

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


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com