css：滾動問題

我在頁面中有3個單獨的部分。每個應該單獨滾動。如果我們滾動整個頁面，每個div都應該滾動。css：滾動問題

如何實現這一目標。以下是搗鼓那個http://jsfiddle.net/qLonzsvj/

html{ 
overflow-x:hidden; 
} 
.left-column 
{ 
    float:left; 
    width:30%; 

} 
.right-column 
    { 
    float:right; 
    width:30%; 

    } 
    .center-column 
    { 
    margin:auto; 
    width:30%; 

    }

來源

2015-02-23 asdfdefsad

的可能重複[滾動特別DIV內容與瀏覽器的主滾動條]（http://stackoverflow.com/questions/6887112/scroll-particular-div-contents-with-browsers-main-scrollbar） – 2015-02-23 06:03:39

重複的問題！ – 2015-02-23 06:03:55

我認爲這是你在找什麼頁面。

CSS

html, body { 
 
height: 100%; 
 
position:relative; 
 
} 
 

 
body 
 
{ 
 
background:#00253f; 
 
line-height:100px; 
 
text-align:center; 
 
} 
 

 
.left 
 
{ 
 
position:absolute; 
 
margin-left:5%; 
 
margin-top:3%; 
 
display:block; 
 
height:80%; 
 
width:20%; 
 
background:#ddd; 
 
overflow:scroll; 
 
} 
 

 
.center 
 
{ 
 
position:absolute; 
 
margin-left:25%; 
 
margin-top:3%; 
 
display:block; 
 
height:80%; 
 
width:50%; 
 
background:#ccc; 
 
overflow:scroll; 
 
} 
 

 
.right 
 
{ 
 
position:absolute; 
 
margin-left:75%; 
 
margin-top:3%; 
 
display:block; 
 
height:80%; 
 
width:20%; 
 
background:#ddd; 
 
overflow:scroll; 
 
}

HTML

<div class="left"> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br></div> 
 
<div class="center"> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br></div> 
 
<div class="right"> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br></div>

檢查演示這裏 jsfiddle

來源

2015-02-23 06:53:54 divy3993

如果我們來到一個滾動區域結束時開始滾動。我怎樣才能防止呢？ – asdfdefsad 2015-02-23 11:58:06

那麼你需要JavaScript。 [更新的演示]（http://jsfiddle.net/divy3993/78h8e88x/4/） – divy3993 2015-02-23 15:44:36

有幾件事情需要改變，讓這個工作我做了一個小模擬了上的jsfiddle你需要給boxs限定的高度和滾動的overflow屬性。你也不需要爲了實現這個目的而將你的盒子全部浮起來。

:::編輯::: 更新的js搗鼓滾動 http://jsfiddle.net/kriscoulson/qLonzsvj/2/

*{ 
 
    box-sizing: border-box; 
 
} 
 
.cols { 
 
    float:left; 
 
    width:33%; 
 
    overflow: scroll; 
 
    height:30px; 
 
} 
 

 
.left-column{ 
 
    background: red; 
 
    
 
} 
 
.center-column{ 
 
    background: blue; 
 
} 
 
.right-column{ 
 
    background: green; 
 
}

<div id="container"> 
 
<div class="cols left-column"> 
 
    <div>div1</div> 
 
    <div>div1</div> 
 
    <div>div1</div> 
 
</div> 
 
<div class="cols center-column"> 
 
    <div>div2</div> 
 
    <div>div2</div> 
 
    <div>div2</div> 
 
</div> 
 
<div class="cols right-column"> 
 
    <div>div3</div> 
 
    <div>div3</div> 
 
    <div>div3</div> 
 
</div>

來源

2015-02-23 06:14:07 Enjayy

關於頁面滾動 – asdfdefsad 2015-02-23 06:30:24

頁面不會滾動，因爲沒有滾動的內容可以添加固定的像素高度或類似2000px的最小高度，它將滾動 http://jsfiddle.net/kriscoulson/qLonzsvj/2/ – Enjayy 2015-02-23 06:32:30

css：滾動問題

回答

相關問題