禁用元素之间的滚动，但允许在子元素内？

Question

我在jQuery中使用此代码来禁用使用id标识的元素之间的滚动。

$('#element-1').on('scroll touchmove mousewheel', function(e){
 e.preventDefault();
 e.stopPropagation();
 return false;
})

但是当元素内的内容比视口长时，这会阻止滚动。我怎么能允许这个？

<div class="container" id="element-1">
 <div class="row">
    <div>This is one row inside of element 1</div>
 </div>
 <div class="row">
    <div>This is another row inside of element 1</div>
 </div>
 <div class="row">
    <!-- I can no longer see this because I can't scroll! -->
    <div>Just another row inside of element 1</div>
 </div>
</div>
<div class="container" id="element-2">
 <div class="row">
    <div>This is one row inside of element 2</div>
 </div>
 <div class="row">
    <div>This is another row inside of element 2</div>
 </div>
 <div class="row">
    <div>Just another row inside of element 2</div>
 </div>
</div>