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;
}