當我們的內容超出了我們的div，往往會出現滾動條，影響美觀。

尤其是當我們在做一些導航選單的時候。滾動條一出現就破壞了UI效果。 我們不希望出現滾動條，也不希望超出去的內容被放逐，就要保留滑鼠滾動的效果。

這裡介紹一個簡單的方法。 大體思路是在div外面再套一個div。這個div設定overflow:hidden。

而內容div設定 overflow-y: scroll;overflow-x: hidden;

然後再設定外層div的width小於內層div的width。

這個內層div其實是會出現滾動條的，所以不影響滑鼠的滾動效果，而且我們看不到滾動條了。

內層div效果：

套上外層div效果後：

css程式碼：

		.nav_wrap{
			height: 400px;
			width: 200px;
			overflow: hidden;
			border: 1px solid #ccc;
			margin: 20px auto;
		}
		.nav_ul{
			height: 100%;
			width: 220px;
			overflow-y: auto;
			overflow-x: hidden;
		}
		.nav_li{
			border: 1px solid #ccc;
			margin: -1px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			font-size: 12px;
			width: 200px;
		}
		.btn_wrap{
			text-align: center;
		}
 

html程式碼：

	<div class= "nav_wrap">
		<ul class= "nav_ul">		
			<li class="nav_li">我是選單1</li>
			<li class="nav_li">我是選單2</li>
		</ul>
	</div>

之前的一個專案中的選單用到了這個技巧。那個專案用了iframe。 也是讓滾動條被遮住了。

今天又順手把目前在做的專案中的導航選單的滾動條去掉了。 簡單總結下來。