1. 程式人生 > >CSS設定滾動條不可見,但可以滾動

CSS設定滾動條不可見,但可以滾動

在一個固定視窗內我們做一個可滾動的選單的時候經常會出現很寬的滾動條;不僅影響美觀而且影響佈局;

解決辦法就是在它的外層再套一個div並且設定為overflow:heidden;子元素設定overflow-y(x):scroll;並給夠足夠的寬度來放滾動條;

這樣滾動條就被父元素給隱藏掉;

<div class="letterBox">
	<ul class="letter">
		<li>A</li>
		<li>B</li>
		<li>C</li>
		<li>D</li>
		<li>E</li>
		<li>F</li>
		<li>F</li>
		<li>F</li>
		<li>F</li>
		<li>F</li>
		<li>F</li>
		<li>G</li>
		<li>H</li>
	</ul>
</div>

css:

.letterBox{
	width: 20px;
	height: 100px;
	position: absolute;
	right: 0px;
	top: 0;
	overflow: hidden;
	border: 1px solid #e2e2ee;
}
.letter{
	width: 40px;
	height: 100px;
	text-align: center;
	overflow-y: scroll;
}