CSS에서 스크롤 막대 비활성화
-
CSS에서 스크롤 막대를 비활성화하려면
html및body태그에 대해overflow를hidden으로 설정하십시오 -
CSS에서 수평 스크롤 막대를 비활성화하려면
overflow-x를hidden으로 설정하십시오
이 자습서에서는 웹 페이지에서 스크롤 막대의 기능을 비활성화하는 몇 가지 방법을 소개합니다.
CSS에서 스크롤 막대를 비활성화하려면 html 및 body 태그에 대해 overflow를 hidden으로 설정하십시오
CSS overflow 속성을 사용하여 CSS에서 스크롤 막대를 비활성화할 수 있습니다. overflow 속성은 웹 페이지에서 스크롤바의 동작을 정의합니다. 요소의 내용이 지정된 영역보다 클 때 스크롤 막대를 숨기거나 표시할 수 있습니다. overflow 속성에 hidden 값을 사용하면 콘텐츠가 요소 영역에 잘리고 나머지 요소는 보이지 않게 됩니다. scroll로 설정하여 클리핑되지 않은 나머지 콘텐츠를 볼 수 있는 스크롤바를 추가할 수 있습니다. PHP를 사용하여 웹 페이지에 긴 텍스트를 생성합니다. 그런 다음 스크롤 막대를 비활성화합니다.
예를 들어, PHP에서 $text 변수를 만들고 Hello World 값을 지정합니다. for 루프를 사용하여 100번 반복합니다. 변수를 표시하는 동안 br 태그를 추가하는 것을 잊지 마십시오. 이렇게 하면 Hello World 텍스트의 100줄이 생성됩니다. HTML의 body 안에 PHP를 포함합니다. CSS에서 html 및 body 태그를 선택합니다. 여백을 0으로 설정하고 높이를 100%로 지정합니다. 그런 다음 overflow 속성을 숨김으로 설정합니다.
아래 예에서는 html과 body의 height를 100%로 설정했습니다. 이는 body 및 height가 상위 컨테이너의 100% 높이를 가짐을 의미합니다. 이러한 컨테이너의 높이는 브라우저의 높이와 같습니다. 텍스트는 브라우저 높이에 맞게 잘리고 나머지는 보이지 않습니다. 스크롤 막대를 비활성화하기 위해 여백이 다른 값으로 재정의된 경우 margin 속성을 0으로 설정할 수도 있습니다. overflow 대신 overflow-y를 사용하고 hidden으로 설정할 수도 있습니다. 스크롤 막대를 세로로 비활성화합니다.
예제 코드:
<body>
<?php
$text = "Hello World";
for($i=0; $i<100; $i++){
echo $text. "<br>";
</body>
}
?>
html, body
{
height: 100%;
overflow: hidden
}
CSS에서 수평 스크롤 막대를 비활성화하려면 overflow-x를 hidden으로 설정하십시오
overflow-x 속성을 사용하고 hidden으로 설정하여 CSS에서 수평 스크롤 막대를 비활성화할 수 있습니다. 텍스트를 한 줄로 제한하여 스크롤 막대를 가로로 비활성화하는 것을 테스트할 수 있습니다. PHP에서 텍스트를 여러 번 반복하고 CSS를 사용하여 한 줄에 나타나도록 할 수 있습니다.
예를 들어, 위의 방법과 같이 PHP를 사용하여 Hello World 텍스트를 반복합니다. 다음 줄에 텍스트가 나타나지 않도록 br 태그를 사용하지 마십시오. CSS에서 body 태그의 display 속성을 inline-block으로 설정합니다. html 태그에서 white-space 속성을 nowrap으로 설정합니다. 그런 다음 body 태그를 선택하여 overflow-x를 hidden으로 설정합니다.
display를 inline-block으로 설정하면 텍스트가 한 줄로 표시됩니다. 텍스트를 한 줄로 표시하려면 상위 컨테이너의 white-space 속성을 nowrap으로 설정해야 합니다. 지금까지는 가로 스크롤 막대가 제대로 작동했습니다. overflow-x를 hidden으로 설정하면 뷰포트에 따라 텍스트가 잘리고 수평 스크롤 막대가 비활성화됩니다.
예제 코드:
<body>
<?php
$text = "Helloo World";
for($i=0; $i<100; $i++){
echo $text;
}
?>
</body>
html{
white-space:nowrap;
}
body {
display:inline-block;
overflow-x: hidden
}
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn