普歌-知希團隊：在css3中，關于滾輪為什么會失效問題的解決以及overflow屬性的總結
一. 滾輪失效
在css3中我們設計頁面的時候，經常會使用到overflow：hidden這一屬性，但當它直接應用到body中時，我們要格外小心，
不要將 overflow-x: hidden 寫成 overflow：hidden
overflow-x ：是否對內容的左/右邊緣進行裁剪，
當body沒有給定寬高時，如果不進行裁剪，文字肯定會跑到我們的可視范圍之外，這時系統會默認給我們加一個沿著x軸的滾輪，
如果寫了overflow-x:hidden,文字一旦超出我們的可視范圍，就會被隱藏掉，這樣一來x軸的滾輪就會失效，
同理，overflow-y:hidden，一旦超過可視范圍，y軸的滾輪失效，
所以，在body中寫overflow：hidden就意味著，除了可視區域，什么也看不見，滾輪失效
二.案例(無滾動條）
body {
max-width: 540px;
min-width: 320px;
margin: 0 auto;
font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
color: #000;
background: #f2f2f2;
overflow: hidden;
/* overflow-x: hidden; */
-webkit-tap-highlight-color: transparent;
}
三.案例（有滾動條）
body {
max-width: 540px;
min-width: 320px;
margin: 0 auto;
font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
color: #000;
background: #f2f2f2;
/* overflow: hidden; */
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
}
四.overflow屬性總結
| 值 | 描述 |
|---|---|
| visible 默認值 | 內容不會被修剪，會呈現在元素框之外 |
| hidden | 內容會被修剪，并且其余內容是不可見的 |
| scroll | 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容 |
| auto | 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容 |
| inherit | 規定應該從父元素繼承 overflow 屬性的值 |
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/258205.html
標籤：其他
上一篇：一閃一閃的星星特效效果