解决iOS下拉回弹方法二

原文地址：https://segmentfault.com/a/1190000007301527

一篇解决 iOS下拉回弹的文章分享给大家。加了些注释、并且应用在vue中。再次感谢原作者。

<template>
    <div class="container">
        <div class="scroll" style="height:150px;overflow:auto">
            <div class="takePosition">
                <div class="top">top</div>
                <div class="body">body</div>
                <div class="footer">footer</div>
            </div>                
        </div>
        占位 <br>
        占位 <br>
        占位 <br>
        占位 <br>
        占位 <br>
        占位 <br>
        占位 <br>
        占位 <br>
        <div style="height:350px;overflow:auto">
            <div class="takePosition"></div>               
        </div>        
    </div>
</template>

<script>
export default {
    name:"PartScroll",
    mounted(){
        this.partScroll()
    },
    methods:{
        //部分元素可以滚动，其余不可以滚动
        partScroll(){
            var overscroll = function(el) {
                el.addEventListener('touchstart', function() {
                    var top = el.scrollTop
                    ,totalScroll = el.scrollHeight
                    ,currentScroll = top + el.offsetHeight;
                    if(top === 0) {
                        el.scrollTop = 1;
                    }else if(currentScroll === totalScroll) {
                        el.scrollTop = top - 1;
                    }
                });

                el.addEventListener('touchmove', function(evt) {
                    console.log('el总的',el);
                    console.log('qqq1',el.offsetHeight,'qqq2',el.scrollHeight)
                    if(el.offsetHeight < el.scrollHeight)//这一步意味着该元素可以滚动
                    evt._isScroller = true;
                });
            }
            overscroll(document.querySelector('.scroll'));
            document.body.addEventListener('touchmove', function(evt) {
                console.log('evt:',evt);
                if(evt._isScroller) {
                    return
                };
                // 阻止默认事件
                evt.preventDefault();
            }, {
                passive: false
            });
        }
    }
}
</script>

<style lang="scss" scoped>
    .scroll{
        .takePosition{
            height: 300px;
            background: wheat;
            position: relative;
            .top{
                position: absolute;
                top: 0;
            }
            .body{
                position: absolute;
                bottom: 50%;
            }
            .footer{
                position: absolute;
                bottom: 0;
            }
        }
    }
</style>

请注意

如果想让一个元素可以滑动就在那个元素上，加上 class="scroll"。这是必须的！！！

 

 

原文地址：https://segmentfault.com/a/1190000007301527