阻止在页面元素内滚动时触发页面滚动

一般来说，当我们在页面内部一个可滚动元素上使用滚动时，如果滚动距离超过它的顶部或者底部，就会触发页面滚动，但是在一些情况下，我们不希望引起页面滚动，因为这会影响用户操作。

下面是一种阻止页面滚动的方法。

var scroll = document.getElementsByClassName('scroll')[0];
function handleScroll (e) {
  if (scroll.scrollHeight > scroll.offsetHeight) { // 仅在元素处于可滚动状态下才进行阻止
    if (e.deltaY < 0 && scroll.scrollTop === 0) {
      e.preventDefault();
    }
    if (e.deltaY > 0 && (scroll.scrollTop + scroll.offsetHeight) >= scroll.scrollHeight) {
      e.preventDefault();
    }
  }
}
scroll.addEventListener('mousewheel', handleScroll);

DEMO: JSBIN