普歌-知希团队：在CSS中，滚轮为什么会失效问题解决，overflow属性总结

本文链接：https://blog.csdn.net/weixin_52768646/article/details/113758036

本文探讨了在CSS3中如何处理滚轮失效的问题，重点在于overflow属性的使用。当overflow设置为hidden时，可能导致滚轮失效，尤其是在body元素上。案例展示了一种无滚动条和有滚动条的body样式设置。文章总结了overflow属性的四个基本值：visible、hidden、scroll和auto，以及它们的效果。

摘要由CSDN通过智能技术生成

普歌-知希团队：在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 属性的值