当前位置: 首页 > 编程笔记 >

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

谷弘致
2023-03-14
本文向大家介绍JavaScript中防止微信浏览器被整体拖动的方法,包括了JavaScript中防止微信浏览器被整体拖动的方法的使用技巧和注意事项,需要的朋友参考一下

在微信网页开发中,我使用的页面结构是在body下的container覆盖全屏,container下有个header和page的容器,page负责显示所有内容并实现滚动。

结构如图: 

但是遇到了一个问题:在页面已经滚动到顶部时,继续往下拖动page容器,会将微信浏览器整体往下拖,漏出“该网页由XXX提供”的提示,然后在安卓下,影响并不大,但是在iphone下,就没那么简单了,经过测试,在苹果下,往下拖动后快速滑动页面中的page,page并不会滚动,上拖同样遇到了这个问题,非常影响体验。

查阅文献后,我准备在touchstart和touchmove上做些处理。

思路是当page页面滚动到顶部时,再向下拖动会阻止默认的拖动事件,page页面到底后也阻止向上拖动。结构与代码如下

doctype html

html
  head
    title 微信拖动测试
    meta(charset="utf-8")
    meta(name="viewport", content="initial-scale=1, maximum-scale=1, minimum-scale=1")
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js")
  body
    #container
      .header
        | header
      .page
        .box box1 in page
        .box box2 in page
        .box box3 in page
        .box.bottom box4 in page
  script.
    $(function() {
      var startY, endY;
      var box_height = $('#container').height();
      $('.page').on('touchstart', function(event) {
        event.stopPropagation();
        startY = event.touches[0].pageY;
      });
      $('.page').on('touchmove', function(event) {
        event.stopPropagation();
        var endY = event.changedTouches[0].pageY;
        var changedY = endY - startY;
        var scroll_top = $('.page').scrollTop();
          // 判断是否在顶部,且向下拖动
        if (scroll_top === 0 && changedY > 0) {
          event.preventDefault();
        }
          // 判断是否在底部,且向上拖动
        var o = $('.bottom').offset();
        if (o.top + o.height === box_height && changedY < 0) {
          event.preventDefault();
        }
      });
       // header禁止拖动
      $('.header').on('touchmove', function(event) {
        event.preventDefault();
      });
    });

样式如下:

*{
  padding: 0;
  margin: 0;
}
#container{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #efefef;
  color: #fff;
  text-align: center;
  font-size: 40px;
}
.header{
  position: absolute;
  left: 0;
  right: 0;
  height: 80px;
  line-height: 80px;
  background-color: #ddd;
}
.page{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 80px;
  background-color: #ccc;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.page > *{
  z-index: 1;
}
.box{
  width: 100%;
  height: 300px;
  line-height: 300px;
  box-sizing: border-box;
  border-bottom: 2px solid #fff;
}

总结

以上所述是小编给大家介绍的JavaScript中防止微信浏览器被整体拖动的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 本文向大家介绍JS打开新窗口防止被浏览器阻止的方法,包括了JS打开新窗口防止被浏览器阻止的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS打开新窗口防止被浏览器阻止的方法。分享给大家供大家参考。具体分析如下: 用传统的window.open()方式打开新窗口,会被浏览器阻止,那么,我们如何才能让JS打开新窗口不被浏览器阻止呢?其实办法还是有的,这里我们就来分析一下如何解决这个问题

  • 问题内容: 这就是我们防止浏览器缓存JS和CSS文件的方式。这似乎有点hacky ..有更好的方法吗? 更新:我们要防止缓存的原因是为了确保在执行新发行版时加载较新版本的文件。 问题答案: 您希望缓存CSS和JS。当它们回来时,它加快了网页的加载。添加时间戳后,您的用户将不得不一次又一次下载它。 如果要确保它们始终具有新版本,则要使构建系统在文件末尾添加一个构建号而不是时间戳。 如果您只是在开发中

  • 本文向大家介绍javascript 判断是否是微信浏览器的方法,包括了javascript 判断是否是微信浏览器的方法的使用技巧和注意事项,需要的朋友参考一下 用js判断当前环境是否是是微信内置浏览器有两个方法: 1.判断useragent 2.判断是否支持微信内置浏览器才支持的一些方法,比如WeixinJSBridge 本次先介绍第一中方法,第二种方法等哪天再更新! 判断代码如下: 就是如此简单

  • 问题内容: 如何防止使用JavaScript浏览网页? 问题答案: 使用可以显示消息,但不会中断导航(因为为时已晚)。但是,使用会中断导航: 注意:返回空字符串,因为较新的浏览器提供了诸如“任何未保存的更改将丢失的信息”之类的消息,这些消息不能被覆盖。 在较旧的浏览器中,您可以指定要在提示中显示的消息:

  • 问题内容: 如果转到页面a并滚动浏览,则刷新页面将在您离开页面的位置刷新。这很好,但是在URL中存在锚点位置的页面上也会发生这种情况。例如,如果您单击一个链接并在环顾四周后刷新页面,您将不会处于锚点,而页面会跳来跳去。有什么办法可以防止使用javascript吗?因此,无论如何,您始终可以导航到锚点。 问题答案: 由于浏览器行为的更改,不再建议使用此解决方案。查看其他答案。 基本上,如果使用锚,则

  • 问题内容: 我有JavaScript,它可以执行大量计算以及从DOM中读取/写入值。该页面很大,因此通常会阻塞浏览器长达一分钟的时间(有时使用IE会更长),并且CPU使用率达到100%。 是否有任何资源可以优化JavaScript以防止这种情况发生(我所能找到的就是如何关闭Firefox长期运行的脚本警告)? 问题答案: 如果您可以将计算算法转换为可迭代调用的内容,则可以使用具有短超时值的setT