zoukankan      html  css  js  c++  java
  • ionic 禁止页面在微信中上下滑动

    问题背景:

    在ionic项目中需要做一个拖拽替换的效果。放到微信中,在拖拽元素的时候,页面也会跟着上下滑动,导致效果非常不好,所以需要禁止页面上下滑动。

    需要实现的效果:

    当不拖拽元素的时候,元素的父级可以上下滑动。当拖拽元素的时候,禁止页面及父级上下滑动

    上代码:

    var overScroll = function(el,isScroll) {//判断isScroll是否允许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){
                    if(isScroll == 'no'){
                        evt._isScroller = false;
                    }else{
                        evt._isScroller = true;
                    }
                }
        });
    }            

    当页面加载的时候:

        overScroll(document.querySelector('#shortcutItems'),'yes');//允许父级元素上下滑动
        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();
            }
        });

    接下来元素拖拽自然有touchstart、touchmove和touchend事件

    在touchstart事件中添加:

    overScroll(document.querySelector('#shortcutItems'),'no');//设置父级不能滚动

    在touchend事件中添加:

    overScroll(document.querySelector('#shortcutItems'),'yes');//设置父级可以滚动
  • 相关阅读:
    HDU 2089 不要62
    HDU 5038 Grade(分级)
    FZU 2105 Digits Count(位数计算)
    FZU 2218 Simple String Problem(简单字符串问题)
    FZU 2221 RunningMan(跑男)
    FZU 2216 The Longest Straight(最长直道)
    FZU 2212 Super Mobile Charger(超级充电宝)
    FZU 2219 StarCraft(星际争霸)
    FZU 2213 Common Tangents(公切线)
    FZU 2215 Simple Polynomial Problem(简单多项式问题)
  • 原文地址:https://www.cnblogs.com/ywang/p/6340715.html
Copyright © 2011-2022 走看看