html如何隐藏滚动条

这篇文章主要介绍了html如何隐藏滚动条,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

html隐藏滚动条的方法:首先创建一个html示例文件,然后在身体中设置内容区域,并在内容区域外层套一个,最后设置p的样式为溢出:“隐藏”即可。

html隐藏滚动条,还带着滚动效果

1,问题描述,见下图。

在不出现滚动条的情况下,头部和内容区域宽度相等,但是内容区域的内容太多,必须得保留滚动效果,不出现滚动条。

2,解决方法

在内容区域外层套一个p,设置p的溢出:隐藏样式,把内容区域的宽度设置为“100% + 20 px”;

& lt; p 风格=翱矶?400 px;高度:400 px;边界:1 px  solid  gray"比; 　　& lt; p 风格=案叨?40 px;行高:40 px;背景颜色:黄色;text-align: center"在头部& lt;/p> 　　& lt; p 风格=案叨?360 px;宽度:400 px;溢出:hidden"比; 　　,,,,,,,& lt; !——,内层带滚动效果的p,宽度比父级p宽20 px,滚动条被父p隐藏了,——比; 　　& lt; p  style =案叨?360 px;宽度:420 px;背景颜色:绿色,overflow-y: scroll"比; 　　& lt; p 风格=氨呓绲撞?1 px  solid  gray"在哈哈哈& lt;/p> 　　& lt; p 风格=氨呓绲撞?1 px  solid  gray"在哈哈哈& lt;/p> 　　& lt; p 风格=氨呓绲撞?1 px  solid  gray"在哈哈哈& lt;/p> 　　& lt; p 风格=氨呓绲撞?1 px  solid  gray"在哈哈哈& lt;/p> 　　& lt; p 风格=氨呓绲撞?1 px  solid  gray"在哈哈哈& lt;/p> 　　& lt; p 风格=氨呓绲撞?1 px  solid  gray"在哈哈哈& lt;/p> 　　& lt; p 风格=氨呓绲撞?1 px  solid  gray"在哈哈哈& lt;/p> 　　& lt; p 风格=氨呓绲撞?1 px  solid  gray"在哈哈哈& lt;/p> 　　& lt; p 风格=氨呓绲撞?1 px  solid  gray"在哈哈哈& lt;/p> 　　& lt; p 风格=氨呓绲撞?1 px  solid  gray"在哈哈哈& lt;/p> 　　& lt; p 风格=氨呓绲撞?1 px  solid  gray"在哈哈哈& lt;/p> 　　& lt; p 风格=氨呓绲撞?1 px  solid  gray"在哈哈哈& lt;/p> 　　& lt; p 风格=氨呓绲撞?1 px  solid  gray"在哈哈哈& lt;/p> 　　& lt; p 风格=氨呓绲撞?1 px  solid  gray"在哈哈哈& lt;/p> 　　& lt;/p> 　　& lt;/p> 　　& lt;/p>

感谢你能够认真阅读完这篇文章,希望小编分享的”html如何隐藏滚动条”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!

html如何隐藏滚动条