`
ch_kexin
  • 浏览: 899307 次
  • 性别: Icon_minigender_2
  • 来自: 青岛
社区版块
存档分类
最新评论

微信浏览器禁止页面下拉查看网址(不影响页面内部scroll)

    博客分类:
  • HTMl
 
阅读更多

此类事件是手机touchmove默认事件行为,可以通过js代码隐藏事件:

$(‘body’).on(‘touchmove’, function (event) {event.preventDefault();});
or
document.addEventListener('touchmove', function(e){e.preventDefault()}, false);
or
document.body.addEventListener('touchmove', function(e) {e.preventDefault();},false);

 但这样往往会把页面原生的scroll效果也一同去掉了,下面的代码可以完美解决这个问题:

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();
  }
});

作者:我是7号_frank
链接:https://www.jianshu.com/p/2eddee561971
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 

分享到:
评论

相关推荐

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

    微信浏览器禁止页面下拉查看网址实例详解主要介绍了微信浏览器禁止页面下拉查看网址实例详解的相关资料。在移动端浏览器中,防止页面下拉查看网址是一种常见的需求。微信浏览器作为最流行的移动端浏览器之一,也提供...

    JavaScript禁止微信浏览器下拉回弹效果

    本文实例为大家分享了JavaScript禁止微信浏览器下拉回弹的效果,供大家参考,具体内容如下 方法1: [removed] var overscroll = function(el){ el.addEventListener('touchstart', function(){ var top = el....

    微信浏览器下拉黑边解决方案 wScroollFix

    在微信浏览器中,用户在页面滚动到顶部或底部后继续滑动时,有时会出现下拉黑边的问题。这种黑边现象实际上是微信内置浏览器为保护用户安全而设计的,它会在页面下拉时显示当前页面的域名信息,防止钓鱼网站。然而,...

    微信禁止下拉查看URL的处理方法

    总的来说,微信内禁止下拉查看URL的处理涉及到对移动设备触摸事件的精准控制和页面滚动状态的判断。开发者需要根据实际需求和用户交互体验来选择合适的策略,平衡安全性和可用性。在实践中,不断优化和完善代码是...

    JavaScript中防止微信浏览器被整体拖动的方法

    总之,这个解决方案利用JavaScript的触摸事件来控制微信浏览器的滚动行为,确保用户在页面顶部或底部的拖动操作只会影响到页面内部,而不是整个浏览器窗口。这种技术在微信网页开发中非常实用,因为它能提高移动用户...

    针对 iOS端禁止列表顶部下拉和底部上拉露出浏览器灰色背景 的解决方案。

    在iOS设备上,当用户在Web应用或者网页中进行滚动操作时,有时会发现列表顶部下拉或底部上拉会暴露浏览器的灰色背景,这在视觉体验上可能会显得不连贯,影响整体应用的美观度。针对这个问题,本文将提供一种解决方案...

    微信小程序下拉刷新组件

    是当微信小程序的下拉刷新功能不符合场景、或者不适用时候的替代方案。提供了类似手机端chrome浏览器的下拉刷新效果(当然没有那么酷炫)。 支持场景 scroll-view swiper中嵌套使用scroll-view 使用了自定义顶导...

    HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码

    H5手指下滑弹出负一屏, 阻止移动端浏览器内置下拉刷新功能,具体实例代码如下所示: &lt;div class=outer-scroll&gt; 默认隐藏,负一屏,手指下滑即可弹出显示,上滑隐藏 &lt;div class=scroll-box&gt; 正式内容 ...

    移动端 下拉加载数据

    在移动端开发中,下拉加载数据是一种常见的用户体验优化策略,特别是在微信端的网页应用中,为了提高用户浏览效率和减少页面加载时间而被广泛应用。"移动端下拉加载数据"这一功能,通常被称为“无限滚动”或“瀑布流...

    html5下拉刷新控件

    这种技术通常与Ajax结合使用,以便在不重新加载整个页面的情况下更新内容。在本文中,我们将深入探讨HTML5下拉刷新控件的工作原理、实现方式以及相关技术。 一、下拉刷新的基本概念 1. 用户体验优化:下拉刷新设计...

    mui框架 页面无法滚动的解决方法(推荐)

    这个问题可能会对用户体验造成负面影响,但幸运的是,解决起来并不复杂。 当遇到Mui框架下的页面无法滚动的问题时,首先要考虑的原因可能是滚动功能没有正确初始化。Mui框架提供了一个滚动组件,用于实现页面或特定...

    微信中iscroll5刷新与dot模板demo

    iscroll5的上拉下拉刷新功能很强大,不过离实际应用还是差点代码的,我修改了iscroll5的一些代码,自己再写了几个类封装,可以很好的工作在微信中,经测试android5和ios9完全没有问题,需要的可以参考一下。...

    华西网源码

    社区下拉菜单那的活动链接和第二版一样,可以添加一个自定义的DIY调用,或者手动修改也行 3.其他的就根据自己的情况调整一下链接什么的即可 2)门户修改 1.门户头部导航修改我已经在上面说过了,文件是...

Global site tag (gtag.js) - Google Analytics