html如何隱藏滾動(dòng)條

這篇文章主要介紹了html如何隱藏滾動(dòng)條，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

html隱藏滾動(dòng)條的方法：首先創(chuàng)建一個(gè)HTML示例文件；然后在body中設(shè)置內(nèi)容區(qū)域，并在內(nèi)容區(qū)域外層套一個(gè)p；最后設(shè)置p的樣式為“overflow:hidden”即可。

HTML隱藏滾動(dòng)條，還帶著滾動(dòng)效果

1、問(wèn)題描述，見(jiàn)下圖。

在不出現(xiàn)滾動(dòng)條的情況下，頭部和內(nèi)容區(qū)域?qū)挾认嗟龋莾?nèi)容 區(qū)域的內(nèi)容太多，必須得保留滾動(dòng)效果，不出現(xiàn)滾動(dòng)條。

2、解決方法

在內(nèi)容區(qū)域外層套一個(gè)p，設(shè)置p的overflow:hidden樣式，把內(nèi)容區(qū)域的寬度設(shè)置為 “100% + 20px”；

<p style="width:400px;height:400px;border:1px solid gray">
	<p style="height:40px;line-height:40px;background-color:yellow;text-align:center">頭部</p>
	<p style="height:360px;width:400px;overflow:hidden">
        <!-- 內(nèi)層帶滾動(dòng)效果的p,寬度比父級(jí)p寬20px，滾動(dòng)條被父p隱藏了 -->
		<p style ="height:360px;width:420px;background-color:green;overflow-y:scroll">
			<p style="border-bottom:1px solid gray">哈哈哈</p>
			<p style="border-bottom:1px solid gray">哈哈哈</p>
			<p style="border-bottom:1px solid gray">哈哈哈</p>
			<p style="border-bottom:1px solid gray">哈哈哈</p>
			<p style="border-bottom:1px solid gray">哈哈哈</p>
			<p style="border-bottom:1px solid gray">哈哈哈</p>
			<p style="border-bottom:1px solid gray">哈哈哈</p>
			<p style="border-bottom:1px solid gray">哈哈哈</p>
			<p style="border-bottom:1px solid gray">哈哈哈</p>
			<p style="border-bottom:1px solid gray">哈哈哈</p>
			<p style="border-bottom:1px solid gray">哈哈哈</p>
			<p style="border-bottom:1px solid gray">哈哈哈</p>
			<p style="border-bottom:1px solid gray">哈哈哈</p>
			<p style="border-bottom:1px solid gray">哈哈哈</p>
		</p>
	</p>
</p>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“html如何隱藏滾動(dòng)條”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!