jquery - 使侧边栏 div 可滚动

Question

编辑我添加了溢出-y：自动；可滑动和滑动，然后打开侧边栏的滑动按钮消失......

我在我的应用程序中有一个类似于此设置的侧边栏，但在 y 发生溢出时难以使内容可滚动。

如您所见，我的内容不可见，因为您无法滚动到它。任何帮助，将不胜感激！

jQuery(function($) {
  $("#side").click(function() {
    $('#slidable').toggleClass("open");
  });
})

#side {
  position:absolute;
  right:100%;
  width: 50px;
  height: 50px;
  z-index: 1000000;
  color:black;
}

#slidable {
  position: fixed;
  top:0;
  height: 100vh;
  background: black;
  width: 200px;
  left: 100%;
  transition: 0.4s;
  z-index: 1000000;
  color:black;
  text-align:center;
  font-size:25px;
  font-weight: 300;
  color:white;
}

#slidable.open{
  left: calc(100% - 200px);
}

.fa {
  font-size:30px!;
  margin-top:25px;
  color:black;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="slidable" class="slidable">
  <div id="side" class="side icon">
      <i class="fa fa-bars"></i>
  </div>
  <div>
      <p>Sidebar</p>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        Content that you shouldn't be able to see without scrolling
  </div>
</div>
<div id="content" class="content">
  <p>test here</p>
</div>

Answer 1

您可以通过向应该滚动的内容添加一个类来使用当前的 css 和标记实现滚动，并给出该类height: 100%; overflow: auto;。您可以在下面的代码段中看到它的工作原理。

jQuery(function($) {
  $("#side").click(function() {
    $('#slidable').toggleClass("open");
  });
})

#side {
  position:absolute;
  right:100%;
  width: 50px;
  height: 50px;
  z-index: 1000000;
  color:black;
}

#slidable {
  position: fixed;
  top:0;
  height: 100vh;
  background: black;
  width: 200px;
  left: 100%;
  transition: 0.4s;
  z-index: 1000000;
  color:black;
  text-align:center;
  font-size:25px;
  font-weight: 300;
  color:white;
}

#slidable.open{
  left: calc(100% - 200px);
}

.fa {
  font-size:30px!;
  margin-top:25px;
  color:black;
}
.scrollableContent{
    height: 100%;
    overflow: auto;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="slidable" class="slidable">
  <div id="side" class="side icon">
      <i class="fa fa-bars"></i>
  </div>
  <div class="scrollableContent">
      <p>Sidebar</p>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        Content that you shouldn't be able to see without scrolling
  </div>
</div>
<div id="content" class="content">
  <p>test here</p>
</div>