html - Bootstrap - 滚动固定折叠菜单

Question

对于我的移动网站，我有一个触发按钮，单击该按钮会弹出一个最初折叠的 div。 div 固定在屏幕顶部并占据整个屏幕高度。在那个 div 中，有一个 Accordion 菜单列表。由于元素是固定的，我无法向下滚动我的长菜单列表。当我将它设置为绝对时，它会将它放在页面的错误区域(我猜是相对于前一个 div，而不是页面)。

这是一个演示。 http://www.bootply.com/a2ryNdYbAw

我想在手机上查看会有所帮助，这样您就可以看到滚动问题。

Answer 1

如果您只是想让页面在 Accordion 展开超出 View 时滚动，您可以将 overflow: auto; 添加到 refine ID

查看工作代码段。

*旁注:我还在 #refine.collapsing 中添加了 overflow: hidden，因此当 Accordion 打开时右侧的滚动条被隐藏，因为看起来更好。这与滚动问题无关，如果需要可以将其删除。

#refine.collapsing {
  position: fixed;
  left: 0;
  right: 0;
  background-color: #ffffff;
  overflow: hidden;
}
#refine.collapse.in {
  left: 0;
  right: 0;
  height: 100%;
  background-color: #ffffff;
  border: none;
}
#refine {
  background-color: #ffffff;
  padding: 0 0px 10px 0px;
  border-bottom: 1px solid #f00;
  border-top: 1px solid #ccc;
  box-shadow: 0 4px 4px -2px #828181;
  -moz-box-shadow: 0 4px 4px -2px #828181;
  -webkit-box-shadow: 0 4px 4px -2px #828181;
  top: 0;
  position: fixed;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">

  <div class="row">
    <div class="col-md-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In enim ipsum, interdum non pharetra malesuada, scelerisque et ligula. Proin semper imperdiet semper. Cras porta pulvinar magna. Maecenas malesuada dui sed quam egestas accumsan. In vel interdum
      sapien, in pretium velit. Morbi tristique ligula eget nibh sollicitudin efficitur. Duis imperdiet, dui tincidunt semper facilisis, eros libero condimentum sem, ut venenatis elit tellus in ligula. Suspendisse venenatis aliquet velit, venenatis pharetra
      ligula. Ut lorem metus, vulputate sed ipsum nec, consequat posuere orci. Nulla libero nisl, lobortis a nibh sit amet, sagittis venenatis lacus. Ut sollicitudin sapien eget facilisis commodo. Nunc pharetra felis id sapien aliquet iaculis. Ut a ante
      mi. Donec hendrerit pretium sapien, in lacinia felis congue non. Sed in purus sit amet diam iaculis viverra. Mauris dapibus vulputate ultricies. Nunc nec mi condimentum, tincidunt ipsum nec, congue justo. Curabitur et eros ligula. Maecenas molestie
      arcu vitae tempor molestie. Aliquam sit amet nibh sem.</div>
  </div>

  <div class="row">
    <div class="col-xs-12">

      <a role="button" class="btn btn-block btn-footer-a btn-default" data-toggle="collapse" href="#refine">Filter by</a>
      <div class="collapse" id="refine">
        <div class="col-xs-12 refine-header">
          <div class="row">
            <div class="col-xs-3 vcenter">text</div>
            <div class="col-xs-7 vcenter text-right">text</div>
            <div class="col-xs-2 vcenter">text</div>
          </div>
        </div>

        <div class="col-xs-12">
          <div class="panel-group" id="refine-accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
              <div class="panel-heading" role="tab">
                <div class="panel-title">
                  <a role="button" data-toggle="collapse" data-parent="#refine-accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="btn-block">
         Size
        </a>
                </div>
              </div>
              <div id="collapseOne" class="panel-collapse collapse" role="tabpanel">
                <div class="panel-body">
                  <ul class="list-unstyled">
                    <li>
                      <input type="checkbox">Men's (23)</li>
                    <li>
                      <input type="checkbox">Ladies' (47)</li>
                    <li>
                      <input type="checkbox">Midsize (12)</li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading" role="tab">
                <div class="panel-title">
                  <a class="collapsed btn-block" role="button" data-toggle="collapse" data-parent="#refine-accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Case material
        </a>
                </div>
              </div>
              <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel">
                <div class="panel-body">
                  <ul class="list-unstyled">
                    <li>
                      <input type="checkbox">Stainless Steel</li>
                    <li>
                      <input type="checkbox">Steel and Yellow Gold</li>
                    <li>
                      <input type="checkbox">Steel and Rose Gold</li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading" role="tab">
                <div class="panel-title">
                  <a class="collapsed btn-block" role="button" data-toggle="collapse" data-parent="#refine-accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Band material
        </a>
                </div>
              </div>
              <div id="collapseThree" class="panel-collapse collapse" role="tabpanel">
                <div class="panel-body">
                  <ul class="list-unstyled">
                    <li>
                      <input type="checkbox">Blue (1)</li>
                    <li>
                      <input type="checkbox">Black (4)</li>
                    <li>
                      <input type="checkbox">Silver (23)</li>
                    <li>
                      <input type="checkbox">Blue (1)</li>
                    <li>
                      <input type="checkbox">Black (4)</li>
                    <li>
                      <input type="checkbox">Silver (23)</li>
                    <li>
                      <input type="checkbox">Blue (1)</li>
                    <li>
                      <input type="checkbox">Black (4)</li>
                    <li>
                      <input type="checkbox">Silver (23)</li>
                    <li>
                      <input type="checkbox">Blue (1)</li>
                    <li>
                      <input type="checkbox">Black (4)</li>
                    <li>
                      <input type="checkbox">Silver (23)</li>
                    <li>
                      <input type="checkbox">Blue (1)</li>
                    <li>
                      <input type="checkbox">Black (4)</li>
                    <li>
                      <input type="checkbox">Silver (23)</li>
                    <li>
                      <input type="checkbox">Blue (1)</li>
                    <li>
                      <input type="checkbox">Black (4)</li>
                    <li>
                      <input type="checkbox">Silver (23)</li>
                    <li>
                      <input type="checkbox">Blue (1)</li>
                    <li>
                      <input type="checkbox">Black (4)</li>
                    <li>
                      <input type="checkbox">Silver (23)</li>
                    <li>
                      <input type="checkbox">Blue (1)</li>
                    <li>
                      <input type="checkbox">Black (4)</li>
                    <li>
                      <input type="checkbox">Silver (23)</li>
                    <li>
                      <input type="checkbox">Blue (1)</li>
                    <li>
                      <input type="checkbox">Black (4)</li>
                    <li>
                      <input type="checkbox">Silver (23)</li>
                    <li>
                      <input type="checkbox">Blue (1)</li>
                    <li>
                      <input type="checkbox">Black (4)</li>
                    <li>
                      <input type="checkbox">Silver (23)</li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading" role="tab">
                <div class="panel-title">
                  <a class="collapsed btn-block" role="button" data-toggle="collapse" data-parent="#refine-accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
          Dial color
        </a>
                </div>
              </div>
              <div id="collapseFour" class="panel-collapse collapse" role="tabpanel">
                <div class="panel-body">
                  <ul class="list-unstyled">
                    <li>
                      <input type="checkbox">Blue (1)</li>
                    <li>
                      <input type="checkbox">Black (4)</li>
                    <li>
                      <input type="checkbox">Silver (23)</li>
                  </ul>
                </div>
              </div>
            </div>

            <div class="panel panel-default">
              <div class="panel-heading" role="tab">
                <div class="panel-title">
                  <a class="collapsed btn-block" role="button" data-toggle="collapse" data-parent="#refine-accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
          Another
        </a>
                </div>
              </div>
              <div id="collapseFive" class="panel-collapse collapse" role="tabpanel">
                <div class="panel-body">
                  <ul class="list-unstyled">
                    <li>
                      <input type="checkbox">Blue (1)</li>
                    <li>
                      <input type="checkbox">Black (4)</li>
                    <li>
                      <input type="checkbox">Silver (23)</li>
                    <li>
                      <input type="checkbox">Blue (1)</li>
                    <li>
                      <input type="checkbox">Black (4)</li>
                    <li>
                      <input type="checkbox">Silver (23)</li>
                    <li>
                      <input type="checkbox">Blue (1)</li>
                    <li>
                      <input type="checkbox">Black (4)</li>
                    <li>
                      <input type="checkbox">Silver (23)</li>
                    <li>
                      <input type="checkbox">Blue (1)</li>
                    <li>
                      <input type="checkbox">Black (4)</li>
                    <li>
                      <input type="checkbox">Silver (23)</li>
                    <li>
                      <input type="checkbox">Blue (1)</li>
                    <li>
                      <input type="checkbox">Black (4)</li>
                    <li>
                      <input type="checkbox">Silver (23)</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>