如何在 <div> 中滚动 - 在固定的 <div> 内

Question

我有一个必须滚动的 div。问题是它在一个固定的 div 内。 我试图以不同的方式解决这个问题，我浏览了这些帖子：

Div with scrollbar inside div with position:fixed

Have a fixed position div that needs to scroll if content overflows

但没有一个对我有用。

我想和你们一起测试一下，看看有什么问题。

我正在开发一个移动响应式网站。 它有一个导航菜单按钮，可以打开 .list div - 单击菜单按钮时。 我在导航栏之后插入了 .list 的 div。

当菜单打开时，它不会显示我的标签中的所有列表项。 我必须给我的主 div .list 不同的高度大小，我发现它效率不高。

我将粘贴导航栏的相关代码部分和相关的 CSS 部分。

HTML：

<div class="list">
  <h2 id="cat-header"> ALL CATEGORIES</h2>
    <ul class="sports">
      <li class="mainli"></li>
      <li class="mainli"></li>
      <li class="mainli"></li>
    </ul>
</div>

CSS：

.sports{
  /*display: none;*/
  padding: 0 ;
  background-color: #fff;
  margin: 0;
  width:100%;
  /*height: 210%*/
  -webkit-overflow-scrolling: touch;
}

.list{
  width: 99.9%;
  /* overflow: hidden; */
  /* overflow-y: scroll; */
  /* top: 65%; */
  overflow-x: hidden;
  /*overflow-y: scroll;*/
  height: 75%;
  display: none;
  -webkit-overflow-scrolling: touch;
}

当点击 #mob-menu-btn 时，它会打开 .list 并修复我的整个标签：

$('#mob-menu-btn').click(function(){

var isHidden = $('.sports').is(':visible');

    if (isHidden){
        $( "body" ).removeClass( "makeFixed" );
    } else {
        $( "body" ).addClass( "makeFixed" );
    }
    $('.list').slideToggle("fast");

})

我的 .makeFixed 看起来像这样：

.makeFixed{
    position: fixed;
}

我最后测试了这个，它没有解决我的问题：

.makeFixed{
    position: fixed;
    top: 0;
    bottom:0;
    overflow-y:scroll;
    overflow-x:hidden;
}

并在.sports 和.list 中更改了height: auto; 和overflow-y: scroll;。

可能是什么问题？

Answer 1

我有以下问题：

if (isHidden){
    $( "body" ).removeClass( "makeFixed" );
} else {
    $( "body" ).addClass( "makeFixed" );
}

具有以下 CSS：

.makeFixed{
    position: fixed;
}

这意味着你将身体固定在……身体上？这是我的建议：

// I'll keep your HTML intact
<div class="list">
  <h2 id="cat-header"> ALL CATEGORIES</h2>
    <ul class="sports">
      <li class="mainli"></li>
      <li class="mainli"></li>
      <li class="mainli"></li>
    </ul>
</div>

// Your list will be your fixed element. It might be better to call this your nav.
.list {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    transition: height 500ms;
    overflow-x: hidden;
}
// I add an active state for it. It will also nicely animate thanks to the previously named transition.
.list.active {
    height: 99%;
}

// I only toggle the .active class on the click of the mobile button
$('#mob-menu-btn').click(function(){ $(".list").toggleClass("active"); });

这样可以大大简化菜单。您使用 CSS 制作动画，您有一个简单的包装器来确定您的菜单将在 何处 定位以及如何定位，如果内容较大，则内容会将溢出推到可滚动状态。

另外，'overflow: auto' 是不必要的，我没有遇到过这个需求。这是一个示例，其中黄色区域固定为非常高，因此滚动将起作用，但要点是相同的（实际上，我已经调整了所有值以使示例在视觉上更明显）：

window.onload = function(){
document.getElementById("button").addEventListener("click", function(){
	if(document.getElementById("list").className == "active"){
		document.getElementById("list").className = "";
	} else {
		document.getElementById("list").className = "active";
	}
});
}

#list {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    transition: height 500ms;
    overflow-x: hidden;
    background: blue;
}
#list.active {
    height: 80%;
}

#list ul {
	height: 3000px;
	background: yellow;
}
#button {
	z-index: 4;
	position: absolute;
	top: 10px;
	left: 10px;
  background: #fff;
}

<div id="button">click me</div>
<div id="list">
  <h2 id="cat-header"> ALL CATEGORIES</h2>
    <ul class="sports">
      <li class="mainli"></li>
      <li class="mainli"></li>
      <li class="mainli"></li>
    </ul>
</div>

Answer 2

使用溢出：自动；在您要滚动的 div 上，如果 div 的高度正确，这将起作用

Answer 3

使用 overflow-y:scroll !important 为 div 指定高度 喜欢 像这样写你的div..

<div style="overflow-y:scroll !important;height:80px;">
/*your scrollable content
</div>

Answer 4

尝试使用

定位列表

.list{
  width: 99.9%;
  /* overflow: hidden; */
  /* overflow-y: scroll; */
  /* top: 65%; */
  overflow-x: hidden;
  /*overflow-y: scroll;*/
  height: 75%;
  display: none;
  -webkit-overflow-scrolling: touch;
  position: fixed;
  z-index:99999;
}

Answer 5

试试这个..

<h2 id="cat-header">ALL CATEGORIES</h2> <div style="overflow-y:scroll ;height:80px;border:1px solid #000"> <ul class="sports"> <li class="mainli">hello</li> <li class="mainli">hello</li> <li class="mainli">hello</li> </ul> </div>