프리카운터넷

프로그래밍&개발

기존 공부방

스크롤바 감추기

스크롤바가 필요없는 짧은 문서에서 없애기

익스플로러 5.5 이상에서는 프레임이 나눠지지 않은 문서에서 문서의 길이와 관계없이 스크롤바의 흔적이 문서 안에 됩니다. 이런 때 간단하게 스크롤바를 보이지 않게 하는 방법입니다.



<body>		<body scroll="no"> 혹은, <body style="overflow:hidden"> 혹은, <body style="overflow:auto">

위의 그림은 문서의 윗부분에 프리카운터 라는 글자만 들어 있어서 스크롤바가 보이지 않아도 될만큼 짧은 문서입니다

왼쪽그림 -
에 스크롤바 숨김관련 소스를 넣지 않은 일반적인 문서입니다. 스크롤바가 보입니다.

오른쪽그림 -
에 scroll="no" 을 추가해서 <body scroll="no"> 이렇게 하거나,
에 style="overflow:hidden" 을 추가해서 <body style="overflow:hidden"> 이렇게 하면 스크롤바가 강제로 사라졌습니다.
에 style="overflow:auto" 을 추가해서 <body style="overflow:auto"> 이렇게 하면 스크롤바의 생성유무가 문서의 양에 맞게 알아서 자동으로 생기거나 사라집니다. 위의 경우는 문서의 양이 스크롤바가 필요없을 만큼 적으므로 스크롤바가 보이지 않게 됐습니다. 스크롤바가 필요한 만큼의 긴 문서였다면, <body> 안에 style="overflow:auto" 를 넣었어도 스크롤바가 생겼겠지요.

스크롤바가 필요한 긴 문서에서 강제로 없애기, 혹은 자동으로..

같은 방법으로,
내용이 길어서 스크롤바(가로, 세로 모두 포함)가 생기는 문서에서도 강제로 스크롤바를 없앨 수 있습니다.



<body> 혹은 <body style="overflow:auto">		<body scroll="no"> 혹은 <body style="overflow:hidden">

왼쪽그림 -
문서의 크기에 맞게 스크롤바가 자동으로 생겼습니다.
에 스크롤바 숨김 관련소스를 넣지 않으면 스크롤바가 생기는 건 당연하구요.
style="overflow:auto" 를 넣어도 마찬가지로 자동으로 스크롤바가 문서의 양에 맞게 생깁니다.

오른쪽그림 -
짧은 문서에서 스크롤바를 강제로 없앴던 방법과 마찬가지로,
에 scroll="no" 을 추가해서 <body scroll="no"> 이렇게 하거나,
에 style="overflow:hidden" 을 추가해서 <body style="overflow:hidden"> 이렇게 하면 문서가 길더라도 스크롤바는 강제로 사라집니다.

가로스크롤바-세로스크롤바 각각 따로 제어하기

아래의 그림에서 보시는 것처럼, 가로스크롤바나 세로스크롤바를 각각 따로 제어할 수도 있습니다.



<body style="overflow-x:auto; overflow-y:hidden">		<body style="overflow-x:hidden; overflow-y:auto">

왼쪽그림 -
<body style="overflow-x:auto; overflow-y:hidden">의 형태는,
가로스크롤바는 문서의 폭에 맞게 자동으로 생성(스크롤바가 필요없는 폭에서는 생기지 않음)하고, 세로스크롤바는 감추어지게 만듭니다.

오른쪽그림 -
<body style="overflow-x:hidden; overflow-y:auto">의 형태는,
가로스크롤바는 감추고, 세로스크롤바는 문서의 높이에 맞게 자동으로 생성(스크롤바가 필요없는 높이에서는 생기지 않음)됩니다.

긴 문서나 짧은 문서 모두에 부담없이 사용할 수 있는 것은,

에 style="overflow:auto" 를 추가해서 <body style="overflow:auto"> 로 하는 겁니다.
이렇게 하면, 스크롤바가 필요없는 문서에서는 스크롤바가 사라지고, 스크롤바가 필요한 문서에서는 스크롤바가 자동으로 생기니까요.