HTML에서 스크롤 막대를 숨기는 방법

HTML에서 스크롤 막대를 숨기는 방법: 먼저 HTML 샘플 파일을 만든 다음 본문에 콘텐츠 영역을 설정하고 콘텐츠 영역 외부에 p를 배치합니다. 마지막으로 p 스타일을 "overflow:hidden"으로 설정합니다.

이 문서의 운영 환경: Windows 7 시스템, 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!