javascript - 如何在固定的 中滚动

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;
}

这意味着您正在将 body 固定到…… body ？这是我的建议:

// 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>