div滚动条与垂直“主”滚动条

Question

我有一个内容很大，给定高度的div。 div有一个滚动条。 我想要的是删除此滚动条，并使用主滚动条滚动de div内容。 当到达div内容的末尾时，主滚动条应滚动页面的其余部分。

1. “蓝色” div中没有​​滚动条。
2. 获取主滚动条
3. 向下滚动将意味着滚动，如果达到div，则滚动div内容，直到内容结束，滚动到页脚之后。

我已经在上面花了两个晚上，现在我真的完成了。 这可能吗？

Jsfiddle： https ：//jsfiddle.net/og3r2169/

CSS

#container{
width: 80%;
margin: 0 auto;
}

#container-content {
background-color: grey;
width: 100%;
overflow: Hidden;
height: 600px
}

#content { 
background-color: blue;
max-height: 500px;
overflow: auto;
}

#footer {
background-color: red;
height: 200px;  
}

Answer 1

您是否尝试过：js：

$(document).ready(function(){

$('#container-content').scroll(function(){

var element = $('#content'),
        originalY = element.offset().top;
         var scrollTop = $('#container-content').scrollTop();
         if(scrollTop>=originalY){

         $('#content').animate({scrollTop:"+=50"});
         return false;
         }
});

});

CSS：

#container{
width: 80%;
margin: 0 auto;
overflow: hidden;
}

#container-content {
background-color: grey;
width: 100%;
overflow: scroll;
height: 400px
}

#content {
background-color: blue;
max-height: 500px;
overflow: hidden;
}

#footer {
background-color: red;
height: 200px;  
}

fiddel

Answer 2

改变一件事：

#content {
  overflow: visible;
}

这将使#container保持完整长度，并让周围的元素进行滚动。

小提琴： https ： //jsfiddle.net/g23zox0y/