屏蔽wheelscroll

大智若愚- 仅屏蔽document，不屏蔽弹窗内部scroll

by 21freestyle

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scrollWheel demo</title>
</head>
<body>
   <ul>
       <li class="item">1</li>
       <li class="item">2</li>
       <li class="item">3</li>
       <li class="item">4</li>
        <li class="item">1</li>
       <li class="item">2</li>
       <li class="item">3</li>
       <li class="item">4</li>
       <li class="item">5</li>
        <li class="item">1</li>
       <li class="item">2</li>
       <li class="item">3</li>
       <li class="item">4</li>
       <li class="item">5</li>
        <li class="item">1</li>
       <li class="item">2</li>
       <li class="item">3</li>
       <li class="item">4</li>
       <li class="item">5</li>
       <li class="item">5</li>
   </ul>
    <div class="middle">
        <p class="item">hello</p>
        <p class="item">hello</p>
        <p class="item">hello</p>
        <p class="item">hello</p>
        <p class="item">hello</p>
        <p class="item">hello</p>
        <p class="item">hello</p>
        <p class="item">hello</p>
        <p class="item">hello</p>
        <p class="item">hello</p>
        <p class="item">hello</p>
        <p class="item">hello</p>
        <p class="item">hello</p>
        <p class="item">hello</p>
        <p class="item">hello</p>
        <p class="item">hello</p>
        <p class="item">hello</p>
        <p class="item">hello</p>
        <p class="item">hello</p>
        <p class="item">hello</p>
        
    </div>
    
   <ul>
       <li class="item">1</li>
       <li class="item">2</li>
       <li class="item">3</li>
       <li class="item">4</li>
       <li class="item">5</li>
       <li class="item">1</li>
       <li class="item">2</li>
       <li class="item">3</li>
       <li class="item">4</li>
       <li class="item">5</li>
       <li class="item">1</li>
       <li class="item">2</li>
       <li class="item">3</li>
       <li class="item">4</li>
       <li class="item">5</li>
       <li class="item">1</li>
     ...

CSS

.middle {
    overflow: scroll;
    height: 300px;
    background: #fc0;
}

JavaScript

$(document).get(0).addEventListener('mousewheel', removeWheelEvent, false);  
$('.middle').get(0).addEventListener('mousewheel', enAbleScroll, false);   
function enAbleScroll(e) {
    e.stopPropagation();
    e.cancelBubble = false;
    var obj = $('.middle').get(0);
    var delta = 0;
        
        if (e.wheelDelta) { /* IE/Opera. */
                delta = e.wheelDelta/120;
        } else if (e.detail) { /** Mozilla case. */
                /** In Mozilla, sign of delta is different than in IE.
                 * Also, delta is multiple of 3.
                 */
                delta = -e.detail/3;
        }
   console.log(delta);
     if($(obj).innerHeight() + $(obj).scrollTop() >= obj.scrollHeight) {
        console.log('bottom');
        if(delta < 0) {
           console.log('to bottom!!');
           e.preventDefault();
           return false;
        }
    }
    if($(obj).scrollTop() === 0) {
        console.log('top');
        
        if(delta > 0) {
           console.log('to top!!');
           e.preventDefault();
           return false;
        }
    }
    return false;
}
function removeWheelEvent (e) {
    console.log('ssss');
    e.stopPropagation();
    e.preventDefault();
    e.cancelBubble = false;
    return false;
}