先上代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> #parent{ overflow: hidden;
} #child{ width: 100%; height: 400px; overflow-y: scroll; padding-right: 20px; /* 滾動條的寬度 */ border: 1px solid #ddd;
}
</style>
</head>
<body>
<div id="parent">
<div id="child"> 1<br>2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br>1<br>2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br>1<br>2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br>1<br>2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 1<br>2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br>1<br>2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br>1<br>2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br>1<br>2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 1<br>2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br>1<br>2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br>1<br>2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br>1<br>2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> end. </div>
</div>
</body>
</html>
實踐出真知，簡單描述下個人見解：實際上 #child 上是存在y軸的滾動條的， 只不過 #child 的寬度為 #parent 的100%，而又加上 20px 滾動條寬度的 padding-right， 所以實際 #child 的y軸滾動條在最右邊，屏幕可視區域的右邊 20px。而 #parent 的 overflow 為 hidden，故不可見。可以把 #parent 的overflow：hidden；去掉，會出現根元素html的x軸滾動條，右滑，便可以看到 #child 的y軸滾動條了。本人也是嘗試了好多寫法才得出這個結論，如有理解不正之處請指正。