pc端弹出层滚动外层也滚动问题

问题现象：
在网页上，写了一个弹出层，弹出层可以滚动，在弹出层滚动到最上方或最下方时，接着再往上（下）滚动，则底层的主体（body）页面跟着滚动。

解决：
本来是想通过滚动监听来控制，但后来发现各种阻止无效。
最后是用在弹出层出来时禁用掉body的滚动条[ $(‘body’).css(‘overflow-y’,’hidden’); ]的方式，但需要处理下body滚动条的样式。

关于滚动scroll整理如下：
滚动分为两种滑轮和键盘。
滑轮滚动又会触发mousewheel和scroll事件。
键盘滚动只触发scroll事件。

在实践中，发现 ：
scroll 事件既不能 event.stopPropagation 也不能 event.preventDefault ；
mousewheel 事件不能 event.stopPropagation 可以 event.preventDefault ；
查了些资料，感觉最靠谱的是这个：
“为什么scroll不能阻止冒泡，这个我在MDN上找到了答案：上面说，scroll只冒泡到document.defaultView，而且不能cancel掉。”

如下，是测试代码：

    $('#user-list ul').on('mousewheel',function(e){
        alert('ul mousewheel');
    });
    $('#user-list ul').on('scroll',function(e){
        alert('ul scroll');
    });
    document.addEventListener('mousewheel', function(){
        alert('document mousewheel');
    });
    document.addEventListener('scroll', function(){
        alert('document scroll');
    });
    window.addEventListener('mousewheel', function(){
        alert('window mousewheel');
    });
    window.addEventListener('scroll', function(){
        alert('window scroll');
    });

    window.addEventListener('keydown', function(e){
        if(37 <= e.keyCode && e.keyCode <= 40 || e.keyCode == 32){
            alert('keydown ' + e.keyCode);
        }
    });

滑轮滚动后：
执行顺序：
ul mousewheel –> document mousewheel –> window mousewheel –> ul scroll –> document scroll –> window scroll

在展开弹出层时，如果用键盘（上下箭头）滚动：
执行顺序：
document scroll –> window scroll

受启发较多的帖子：
https://segmentfault.com/a/1190000003849952
https://segmentfault.com/a/1190000003849952