使用非滾動條側欄水平滾動內容

我正在嘗試使用側欄創建水平滾動區域，該滾動區域不可滾動。我想在不使用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想象我的問題。就像現在一樣，側邊欄與內容一起滾動。

來源

2015-07-13 jdo

這是一個實現我相信你正在嘗試做的事情的例子。根據需要替換代碼。

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

來源

2015-07-13 11:22:14 Lansana

我明白這一點。我想要實現的是在左側有一個不可滾動的側邊欄，在側邊欄的右側有一個可滾動的區域，可水平滾動。 – jdo

檢查編輯，應該做你想做的。 – Lansana

我已經添加了一個小提琴，可能使它更容易理解我想要做什麼。 – jdo

嘗試這個

white-space:nowrap;

全碼：

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

我希望這會幫助你。這裏是Fiddle

來源

2015-07-13 11:30:26

使用非滾動條側欄水平滾動內容

回答

相關問題