CSS는 스크롤 막대를 숨기지만 스크롤할 수 있습니다.

웹 애플리케이션의 지속적인 개발로 인해 웹 디자인은 점점 더 인터랙티브해지고 있습니다. 일반적인 대화형 요소로 스크롤 막대가 자주 사용됩니다. 그러나 때로는 페이지를 더욱 단순하고 아름답게 보이도록 스크롤 막대를 숨기고 싶을 수도 있습니다. 이 기사에서는 CSS를 사용하여 스크롤 막대를 숨기면서도 여전히 스크롤할 수 있는 방법을 소개합니다.

1. CSS의 오버플로 속성을 사용하세요

CSS의 오버플로 속성을 사용하여 요소의 오버플로 내용을 제어할 수 있습니다. 오버플로 속성에는 표시(기본값), 숨김, 스크롤 및 자동이라는 세 가지 매개변수 값이 있습니다.

1.hidden

이 속성 값은 요소와 해당 하위 요소를 숨기는 데 사용됩니다. 내용이 너무 길면 즉시 잘라내어 영역 외부에 숨겨집니다.

2. 스크롤

스크롤 속성 값을 사용하여 요소에 스크롤 막대를 만들 수 있습니다. 콘텐츠가 너무 길어서 화면에 한 번에 표시되지 않는 경우 스크롤 막대를 사용하면 콘텐츠 전체를 스크롤할 수 있습니다.

스크롤을 사용하면 "스크롤 막대를 숨기지만 여전히 스크롤"하는 효과를 얻을 수 있습니다. 요소에 고정된 높이와 너비를 설정하고, 콘텐츠가 오버플로되도록 하고, "overflow:scroll"을 사용하여 스크롤 막대를 표시할 수 있습니다.

3. auto

마지막으로 "auto" 속성 값이 있습니다. 이 속성 값은 콘텐츠가 너무 큰 경우와 같이 필요할 때 브라우저가 자동으로 스크롤 막대를 추가해야 함을 지정합니다. 콘텐츠가 컨테이너를 초과하지 않으면 스크롤 막대가 나타나지 않습니다.

2. 스크롤 막대 숨기기

따라서 "overflow:hidden"을 사용하여 스크롤 막대를 숨길 수 있습니다. 그러면 스크롤바가 숨겨지고 스크롤이 비활성화됩니다.

.스크롤 막대 숨기기 {
overflow:hidden;
}

그러나 이 경우 스크롤 막대를 통해 콘텐츠를 스크롤할 수 없습니다. 따라서 원하는 효과를 얻으려면 다른 방법을 사용해야 합니다. 다음은 스크롤 막대를 숨기기 위해 "overflow:hidden"을 사용하는 기본 예입니다.

3. 계속 스크롤 가능

다음 질문은 콘텐츠를 계속 스크롤 가능하게 만드는 방법입니다. 이 문제를 해결하기 위해 JavaScript를 사용할 수 있습니다. 모바일 장치에서는 스크롤바가 표시되므로 사용자가 사용 중인 장치 유형을 감지해야 합니다.

스크롤 막대의 동작을 제어할 수 있는 메서드가 아래에 제공됩니다. jQuery 라이브러리에 따라 다릅니다.

$(document).ready(function(){
if(navigator.userAgent.indexOf('Mac OS X') != -1 || navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('iPad') != -1){

$('body').css({
  'overflow-y': 'scroll',
  '-webkit-overflow-scrolling': 'touch'
});

} else {

$('body').css('overflow-y', 'scroll');

}
});

이 코드는 PC 또는 Android 장치 스크롤 막대에서 탐색할 때 표준을 활성화합니다. Apple 장치에서는 유사한 스크롤 막대를 사용하지만 기본 iOS 스크롤 막대를 에뮬레이션합니다. 스크롤 막대나 페이지를 터치하여 콘텐츠를 스크롤할 수 있습니다.

물론 이것이 유일한 방법은 아닙니다. JavaScript에 의존하지 않고도 CSS를 통해 유사한 효과를 얻을 수도 있습니다. 요소의 높이와 너비를 설정하고 "overflow:hidden"을 사용하여 스크롤 막대를 숨긴 다음 "-webkit-overflow-scrolling:touch"를 사용하여 관성 스크롤을 활성화할 수 있습니다.

. 관성 스크롤 활성화 {
height: 100%;
Overflow: hide;
}

결론

CSS를 사용하여 스크롤바를 숨기지만 여전히 스크롤할 수 있습니다. 우리는 오버플로 속성과 JavaScript를 사용하여 이 효과를 얻는 두 가지 방법을 다루었습니다. 각 방법에는 고유한 장점과 단점이 있습니다. 최종 결정은 귀하의 필요에 따라 달라집니다. 보다 유연하고 이식 가능한 솔루션이 필요하다면 JavaScript를 사용하세요. 단순히 스크롤 막대를 숨겨도 여전히 스크롤할 수 있어야 한다면 CSS를 사용하세요.

위 내용은 CSS는 스크롤 막대를 숨기지만 스크롤할 수 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!