body rolling on the movable end of the elastic layer

body rolling on the movable end of the elastic layer

This very common problem in the mobile terminal, the Internet also has some solutions, now I come to sum up: css solutions has compatibility issues, js is relatively stable solution (although too much trouble)

ps: examples in this article are written with vue

Solutions of about css

1. overflow:hidden;

This is the solution most people began to think, although the problem can be solved in the pc side, but in the end movement is not enough,
but it was said in html, body and set overflow: hidden can, but tested, the result is not about her. . .
On Android barely okay, but there will be a card a card effect, not directly on ios. View example of using a mobile phone .

// vue
watch:{
    showMark:function(val){
        if(val){
            document.body.style.overflow = 'hidden';
            document.documentElement.style.overflow = 'hidden';
        }else{
            document.body.style.overflow = 'auto';
            document.documentElement.style.overflow = 'auto';
        }
    }
}

2.position:fixed

This method is better, tested, run well than a method of Andrews, the browser on the micro-channel may be ios
but set to fixed body positioning while rolling jump back to the top position. It seems to be able to use this?
Ah, if you do not mind playing back the top of the page, but I think there will be a small problem on the estimate complex pages, especially when used transform in the body, fixed there will be a strange bug. View example of using a mobile phone

// vue
watch:{
    showMark:function(val){
        if(val){
            document.body.style.position = 'fixed';
        }else{
            document.body.style.overflow = 'static';
        }
    }
}

3. pointer-events: none;

Ah, do not use this, I tried to use this style on the floor playing, invalid, the job in the body, but will touch events are removed. . .
View example of using a mobile phone

About js solution

When the elastic layer is not required where the rolling elements of

Ah, this situation can be easily handled, directly on the bomb to prevent touchmove layer events. View example of using a mobile phone

// vue下，直接加一个@touchmove.prevent

// 用原生js,则统一给一个class元素添加touchmove事件，并阻止默认行为
// 这里使用了jquery
$('.stop-scroll').on('touchmove',function(e){
    e.preventDefault();
})

When the elastic layer element where required rolling

Ah, the situation became more complicated, you need to simulate a rolling effect of its own, you can find yourself a suitable plug, or refer to the author of the plug-in touchScroll.js , or you yourself write a plug-in for the project. View example of using a mobile phone

// touchScroll.js初始化(vue)
mounted(){
    this.touchScroll = new TouchScroll({
        target: this.$refs.content, //模拟滚动的对象
        des:'y',//x,y
        noScrolls: [this.$refs.mark] //不需要滚动的对象列表
    });

},
watch:{
    showPupop(val){
        if(val){
            // 打开弹层获取高度
            this.touchScroll.start();
        }else{
            // 关闭弹窗重置
            this.touchScroll.reset();
        }
    }
}