html怎麼隱藏捲軸

html隱藏滾動條的方法：先建立一個HTML範例檔案；然後在body中設定內容區域，並在內容區域外層套用一個p；最後設定p的樣式為「overflow:hidden」即可。

本文操作環境：Windows7系統、HTML5&&CSS3版，DELL G3電腦

HTML隱藏捲軸，也帶著捲動效果

1、問題描述，見下圖。

       在不出現捲軸的情況下，頭部和內容​​區域寬度相等，但是內容 區域的內容太多，必須得保留滾動效果，不出現捲軸。

2、解決方法

    在內容區域外層套一個p，設定p的overflow:hidden樣式，把內容區域的寬度設定為「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">
        <!-- 内层带滚动效果的p,宽度比父级p宽20px，滚动条被父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>

推薦學習：《HTML影片教學》

#

以上是html怎麼隱藏捲軸的詳細內容。更多資訊請關注PHP中文網其他相關文章！