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。列出不同的高度尺寸，我发现它不那么有效。

我将粘贴导航栏的相关代码部分以及相关的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;
}

点击#mom-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;
}

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

可能是什么问题？

enter image description here

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

使用overflow：auto;在你要滚动的div上，如果div具有正确的高度，这将起作用

Answer 3

使用overflow-y给div赋予高度：scroll！important和喜欢像这样写你的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>

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

5 个答案: