我如何滚动 <div> -在固定范围内 <div>

Question

我有一个必须滚动的div。 问题是它在固定的div内。 我尝试以不同的方式解决此问题，我浏览了以下文章：

div滚动条位于div内，位置：固定

具有固定位置的div，如果内容溢出，则需要滚动

但他们都没有为我工作。

我想和你们一起测试一下，找出问题所在。

我正在开发一个响应式移动网站。 它具有一个导航菜单按钮，可在单击菜单按钮时向上打开.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;
}

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

可能是什么问题？

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进行动画处理后，您将获得一个简单的包装程序，该包装程序将确定菜单的位置以及放置方式，并且如果菜单内容较大，则内容将使溢出内容可滚动。

另外，“溢出：自动”是不必要的，我还没有遇到这个需要。 这是一个示例，其中黄色区域固定为非常高，因此可以进行滚动，但是要点是相同的（实际上，我已经调整了所有值以使示例在视觉上更加明显）：

 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>