Question

我有一个彼此叠置的面板，为了正确对齐它们，我需要隐藏溢出部分。但是，每个面板都需要一个滚动条。我无法应用滚动条，因为父面板已隐藏为溢出。

在下面的示例中，如果单击该按钮，则后面板的内容大于面板的大小，并且需要垂直滚动条。

$(".backpnl").on('click tap', function() {
  
  $( '.frontPanel' ).toggleClass('active', 500)
});

.mainPanel {
  width: 400px;
  height: 400px;
  border: 1px solid #000;
  position: relative;
  overflow: hidden;
}

.frontPanel {
  background: #5D1202;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  padding: 20px;
}

.backPanel {
  background: #280700;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  box-shadow: inset 0px 0px 20px 0px #000;
  padding: 20px;
}
.backPanel:before{
  content: "";
    position: absolute;
    z-index: -1;
    display: block;
    width: 400px;
    height: 400px;
}
.frontPanel.active{
  margin-left: 350px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainPanel">
  <div class="frontPanel">
    <h1>Front Panel</h1>
    <button class="backpnl">Click here</button>
  </div>
  <div class="backPanel">
    <h1>Back Panel</h1>
    <p>--- Text 1---</p>
    <p>--- Text 2---</p>
    <p>--- Text 3---</p>
    <p>--- Text 4---</p>
    <p>--- Text 5---</p>
    <p>--- Text 6---</p>
    <p>--- Text 7---</p>
    <p>--- Text 8---</p>
    <p>--- Text 9---</p>
    <p>--- Text 10---</p>
    <p>--- Text 11---</p>
    <p>--- Text 12---</p>
    <p>--- Text 13---</p>
  </div>
</div>

您知道如何解决此问题，以便面板在需要时可以具有滚动条吗？

当父div隐藏溢出时如何向div添加滚动条

0 个答案: