大家好，欢迎来到IT知识分享网。
页面中有很多时候需要多区域定相应的宽高，然而当内容过多时会出现超出元素区域或出现滚动条的情况，如何解决这种状况呢？一起去看看吧！
一、滚动条样式相关的CSS属性
overflow属性规定当内容溢出元素框时需要对其进行的操作，即指当对象的内容超过其指定高度及宽度时如何显示内容。
1、overflow属性的值
visible：默认值内容不会被修剪，呈现在元素框之外。
hidden： 内容会被修剪，超出元素的内容隐藏，即不可见。
scroll： 内容会被修剪，超出的内容会出现滚动条，用滚动的方式查看其余的内容。
auto： 浏览器会根据内容相对于元素的宽高自动添加滚动条，用滚动的方式查看其余的内容。
inherit：规定从父元素继承其overflow属性的值。
2、定义与滚动相关的属性及其值
overflow:auto; 会根据内容相对于元素的宽高自动添加滚动条。
overflow:scroll; 显示横、纵向滚动条。
overflow-x:hidden; 不显示横向的滚动条。
overflow-y:hidden; 不显示纵向的滚动条。
overflow-x:scroll; 显示横向的滚动条。
overflow-y:scroll; 显示纵向滚动条。
3、滚动条的样式与滚动属性的运用
滚动条的样式与滚动属性的运用示例
二、在页也中去掉指定方向滚动条
1、去掉横向滚动条
<body style=”overflow:scroll;overflow-x:hidden”>或selector{overflow:scroll;overflow-x:hidden}。
2、去掉竖向滚动条
<body style=”overflow:scroll;overflow-y:hidden”>或selector{overflow:scroll;overflow-y:hidden}。
3、去掉滚动条：
<body scroll=”no”>或selector{overflow:hidden;}
三、CSS实现隐藏滚动条同时又可以滚动
即可以隐藏滚动条，同时又保证页面可以滚动？
使用 overflow:hidden 隐藏滚动条，但存在的问题是：页面或元素失去了滚动的特性。
由于只需要兼容移动浏览器（Chrome 和 Safari），可以使用自定义滚动条的伪对象选择器
::-webkit-scrollbar。
示例
即对出现滚动条的滚动元素使用CSS样式selector::-webkit-scrollbar{display:none}或selector::-webkit-scrollbar {height:0;width:0;}即可以隐藏滚动条。
感谢您阅读了这篇文章，希望会对您有所帮助、喜欢我就点个赞吧，后面的文章内容会越来越精彩喔！
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/45357.html
