DIV滾動條沒有出現

我用css很少，但我認爲以下應創建一個可滾動區域。相反，它似乎只是隱藏了所有不適合的文本，但無法滾動。行爲在Chrome/ie/firefox中看起來是一樣的，所以我猜測我只是在做一些錯誤的事情。DIV滾動條沒有出現

的index.html

<!DOCTYPE HTML> 
<html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <title>Foo</title> 
    </head> 
    <body> 
    <div id="history" class="scroll-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac euismod nulla. Fusce enim tortor, elementum ut volutpat non, interdum ut nunc. Vestibulum placerat mi vel risus ultricies non bibendum urna vestibulum. Curabitur volutpat, turpis vel suscipit accumsan, lectus nibh blandit sem, ut elementum massa tortor quis augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis cursus lacus ac diam sollicitudin tempor. Vivamus at sagittis lacus. Donec augue neque, cursus in tristique at, mattis vitae eros. 
    </div> 
    </body> 
</html>

的style.css

#history { 
    height: 200px; 
    width: 200px; 
    border: 1px solid #666; 
    padding: 8px; 
} 

.scroll-area { 
    overflow-style: auto; 
    overflow: hidden; 
}

Non-scrolling picture example

來源

2013-04-25 Alex Pritchard

你嘗試過嗎？滾動區域{ overflow-y：scroll; 溢出：隱藏; } – proggrock 2013-04-25 17:17:18

謝謝大家。溢出：隱藏絕對是問題！欣賞所有超快速的反應。 – 2013-04-25 17:42:09

那麼你使用的是不以任何支持overflow-style主要瀏覽器尚未..

設置overflow自動或滾動.scroll-area將垂直滾動條顯示爲e xpected

http://jsfiddle.net/kRcaR/1/

來源

2013-04-25 17:16:43 Adrift

爲瀏覽器支持不足提示選擇此答案。謝謝！ – 2013-04-25 17:41:41

不客氣！ :) – Adrift 2013-04-25 17:42:18

你應該明確設置overflow到auto（或scroll如果你需要滾動條出現在所有的時間）：

.scroll-area { 
    overflow: auto; 
}

DEMO：http://jsfiddle.net/aNTHx/

來源

2013-04-25 17:15:41 VisioN

您需要設置overflow: auto或者如果你只是想y軸滾動overflow-y: auto; overflow-x: hidden;

來源

2013-04-25 17:16:26

你的div應該有垂直滾動這個溢出造型：

.scroll-area { 
    overflow-y: scroll; 
}

或者，如果你要滾動水平：

.scroll-area { 
    overflow-x: scroll; 
}

來源

2013-04-25 17:16:34

你隱藏滾動條與overflow: hidden;。

如果更改爲：

.scroll-area { 
    overflow-style: auto; 
    overflow: auto; 
}

來源

2013-04-25 17:17:05 ajtrichards

HTML

<div id="history" class="scroll-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac euismod nulla. Fusce enim tortor, elementum ut volutpat non, interdum ut nunc. Vestibulum place 
</div>

CSS

#history { 
    height: 200px; 
    width: 200px; 
    border: 1px solid #666; 
    padding: 8px; 
} 

.scroll-area { 
    overflow-style: auto; 
    overflow: scroll; 
}

DEMO

說明

如果你想在滾動的HTML元素的內容，您應該使用屬性overflow: scroll;

古德勒克未來的代碼。

來源

2013-04-25 17:20:08

DIV滾動條沒有出現

回答

相關問題