带有垂直“主”滚动条的 div 滚动条答案

【问题标题】：div scrollbar with vertical "main" scrollbar带有垂直“主”滚动条的 div 滚动条
【发布时间】：2016-04-02 06:58:29
【问题描述】：

我有一个内容大且高度为给定的 div。 div 有一个滚动条。我想要的是删除这个滚动条并让 de div 内容与主滚动条一起滚动。当到达 div 内容的末尾时，主滚动条应该滚动页面的其余部分。

“蓝色”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;  
}

【问题讨论】：

您只想禁用 div 滚动？然后删除max-height: 500px
不完全。我想禁用它，但是主垂直（浏览器）滚动条需要滚动 div。我知道如何禁用 div 滚动条，它就在我的示例中
可以使用脚本，但只需删除最大高度，您将在视觉上实现相同的效果，所以我不明白您为什么要这样做？ ...它只会给浏览器带来非常不必要的工作量，这可能会导致糟糕的用户体验。
@LGSon：我想要这个，因为我有一个背景图片，这个图片不允许增长/重复等。我想在上面放置一个包含网站主要内容的 div。内容比背景图像的高度要多得多。所以我想给 div 一个最大高度，但我不想使用 div 本身的滚动条
但是你用background-attachment: fixed解决

标签： javascript jquery html css scroll

【解决方案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

【讨论】：

试过了，但现在内容 div 会自动滚动。这需要默认浏览器滚动条来完成。默认浏览器滚动条需要像往常一样滚动，但也需要滚动 div 内容。当到达内容 div 的内容末尾时，默认的 scollbar 需要滚动页面的其余部分

【解决方案2】：

只需改变一件事：

#content {
  overflow: visible;
}

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

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

【讨论】：

检查过但现在内容不能滚动了
那么你想用主滚动条在div内部滚动，当到达div内容的底部时，继续用主滚动条滚动整个body？我不认为这是可能的。即使你找到了一个 JS 方法，你在响应性方面也会遇到问题。
没错。我要改变设计。我已经完成了。