web移动端浮层滚动带动底层元素滚动问题解决

当我们写了这样一个结构的时候

<div class="box">
    <p>
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
        拉开了就开始的放假老实交代方会计师
    </p>
</div>
<div class="jump">
    <p>
        了深刻的积分看lsjdkfjslk
        了深刻的积分看lsjdkfjslk
        了深刻的积分看lsjdkfjslk
        了深刻的积分看lsjdkfjslk
        了深刻的积分看lsjdkfjslk
        了深刻的积分看lsjdkfjslk
        了深刻的积分看lsjdkfjslk
        了深刻的积分看lsjdkfjslk
        了深刻的积分看lsjdkfjslk
        了深刻的积分看lsjdkfjslk
        了深刻的积分看lsjdkfjslk
        了深刻的积分看lsjdkfjslk
        了深刻的积分看lsjdkfjslk
        了深刻的积分看lsjdkfjslk
        了深刻的积分看lsjdkfjslk
        了深刻的积分看lsjdkfjslk
        了深刻的积分看lsjdkfjslk
        了深刻的积分看lsjdkfjslk
        了深刻的积分看lsjdkfjslk
        了深刻的积分看lsjdkfjslk
        了深刻的积分看lsjdkfjslk
        了深刻的积分看lsjdkfjslk
    </p>
</div>

box为底层，内容超出滚动，jump为浮层，依然超出滚动，但是当我们再移动端滑动浮层的时候，浮层滑动到最底部或最顶部后就会带动底层box的滑动，这一般不是我们想要的效果。那怎么解决呢？

有一种写法就是给底层box动态添加noscroll属性，在样式里这样写

 .box{
            width: 100%;
            position: absolute;
            top: 0;
            bottom: 0;
            overflow: auto;
        }
       
        .noscroll{
            overflow: hidden;
        }

当滑动浮层的时候动态给box添加noscroll

$p.on('touchstart', function (ev) {
            $box.addClass('noscroll');
        });

这样滑动浮层时就不会联动到底层box，当关闭的浮层的时候再remove掉noscroll属性即可

$close.on('click', function () {
            $box.removeClass('noscroll');
        });