Question

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

“blue”div中没有滚动条。
获取主滚动条
向下滚动意味着滚动，如果达到div，则滚动div内容，直到内容结束，然后滚动到页脚。

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

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/

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

2 个答案: