Question

我试图创建一个带有侧边栏的水平滚动区域，这是不可滚动的。我想在不使用position: fixed;的情况下创建它，但我无法使其正常工作。我错过了什么？

HTML

<div class="sidebar">
     <h1 class="logo">Title</h1>
</div>

<div class="scroll-area">
   <p>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
     Animi  harum, magnam, ducimus corporis ipsam blanditiis possimus
     voluptate obcaecati laboriosam dicta quidem perspiciatis ipsa
     tenetur. Asperiores veritatis dicta doloremque. Ea, ad.
   </p>

   <div class="image-gallery">
    <ul>
        <li><img src="http://placehold.it/500x800"></li>
        <li><img src="http://placehold.it/500x800"></li>
        <li><img src="http://placehold.it/500x800"></li>
    </ul>
   </div>
</div>

CSS

.scroll-area {
  width: 3000px;
  overflow: scroll;
}

ul li {
  display: inline;
}

修改

我已创建fiddle来形象化我的问题。就像现在一样，侧边栏与内容一起滚动。

Answer 1

这是一个实现我相信你正在尝试做的事情的例子。根据需要替换代码。

HTML：

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch Report</button>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
            </button>
                <h4 class="modal-title" id="myModalLabel"> Annuities Report</h4>

        </div>  
        <pre class="report-pre modal-body report-modal-body">
                                INDIVIDUAL ANNUITIES
                                                                                                                                                      BY AGENCY WITH AGENT DETAIL
                                                                                                                                                        COMMISSIONABLE DEPOSITS
                                                                                                                                                             MONTH TO DATE

AGENCY NUMBER    
AGENCY NAME                         FLEXIBLE ANNUITY                                                    SPIA                                                    SPDA                                                      VARIABLE ANNUITY                                                           TOTAL
 AGENT #         
 AGENT NAME COUNT    1ST YEAR   EXTERNAL   INTERNAL    SUBSEQUENT       TOTAL   COUNT    1ST YEAR   EXTERNAL   INTERNAL          TOTAL   COUNT    1ST YEAR   EXTERNAL   INTERNAL          TOTAL   COUNT    1ST YEAR   EXTERNAL   INTERNAL    SUBSEQUENT       TOTAL    COUNT   1ST YEAR   EXTERNAL   INTERNAL    SUBSEQUENT       TOTAL
            -----------------------------------------------------------------   ------------------------------------------------------   ------------------------------------------------------   -----------------------------------------------------------------    ----------------------------------------------------------------

EN00000006       
POE - James       
 AG00000001      
 POE, Henry 1.00       2,512     25,812          0        450         28,775     .00           0          0          0              0     .00           0          0          0              0     .00           0          0          0      1,741          1,741     1.00      2,512     25,812          0      2,191         30,516
 AG00050001      
 Eve,       .00           0          0          0          0              0     .00           0          0          0              0     .00           0          0          0              0     .00          52          0          0      3,081          3,133      .00         52          0          0      3,081          3,133
 AG000400      
 Bob,    .00          30          0          0        100            130     .00           0          0          0              0     .00           0          0          0              0     .00         166          0          0        370            536      .00        196          0          0        470            666

             1.00       2,542     25,812          0        550         28,905     .00           0          0          0              0     .00           0          0          0              0     .00         218          0          0      5,192          5,410     1.00      2,760     25,812          0      5,742         34,315
EN00000010       
LOST AGENT       
 AG00005      
 Jim, RI   .00           0          0          0          0              0     .00           0          0          0              0     .00           0          0          0              0     .00           0          0          0        100            100      .00          0          0          0        100            100

              .00           0          0          0          0              0     .00           0          0          0              0     .00           0          0          0              0     .00           0          0          0        100            100      .00          0          0          0        100            100


            </pre>

        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
    <!-- /.modal-dialog -->
</div>

CSS：

.report-modal-body {
    max-height:calc(100vh - 150px);
    overflow-y:auto;
    overflow-x:auto;
}
.report-pre {
    width:100%;
    overflow-x:auto;
    word-wrap:normal;
    margin:1px;
}

Fiddle

Answer 2

试试这个

white-space:nowrap;

完整代码：

.scroll-area {
  width: 85%;
  float: left;
  overflow: scroll;
  white-space: nowrap;
}
.sidebar {
  width: 15%;
  float: left;
}

我希望这会对你有所帮助。这是 Fiddle

具有非滚动侧边栏的水平滚动内容

2 个答案: