zoukankan      html  css  js  c++  java
  • 微信浏览器禁止页面下拉查看网址(不影响页面内部scroll)

    开发项目跑在微信浏览器经常会遇到一个问题,微信浏览器下拉的时候会出现自带的黑色底色(显示网址)如下图:

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

    $(‘body’).on(‘touchmove’, function (event) {event.preventDefault();});
    or
    document.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();
      }
    });

    详情见:
    prevent-overscroll

  • 相关阅读:
    查看文件方法、vim末行操作
    目录结构、文件管理命令
    计算机快捷键、常用命令、别名、
    Redis 使用与优化
    Redis-Sentinel
    Redis主从复制
    Redis持久化
    API的使用
    Redis安装和配置
    集群搭建(脑裂)
  • 原文地址:https://www.cnblogs.com/romanticcrystal/p/9154429.html
Copyright © 2011-2022 走看看