CSS에서 스크롤 막대를 구현하지 않는 방법 및 사례-프런트엔드 Q&A-php.cn

CSS에서 스크롤 막대를 구현하지 않는 방법 및 사례

PHPz

풀어 주다： 2023-04-21 11:46:21

원래의

812명이 탐색했습니다.

프론트엔드 개발에서 스크롤바는 우리가 흔히 보는 웹페이지에서 거의 모든 페이지에 나타나는 매우 일반적인 요소입니다. 그러나 어떤 경우에는 스크롤 막대가 없는 일부 페이지가 나타날 수 있습니다. 이는 버그가 아니라 디자인 선택입니다. 이 기사에서는 CSS에서 스크롤바를 없애는 몇 가지 방법과 사례를 살펴보겠습니다.

스크롤 막대 숨기기

가장 일반적인 방법은 CSS를 통해 스크롤 막대를 숨기는 것입니다. CSS는 스크롤 막대의 스타일을 제어하는 많은 속성을 제공하며 이 효과를 얻기 위해 CSS3의 몇 가지 새로운 속성을 사용할 수 있습니다. 웹킷 브라우저를 예로 들면 다음과 같습니다:

body::-webkit-scrollbar { display: none; }

로그인 후 복사

이렇게 하면 전체 스크롤 막대를 숨길 수 있지만 다른 브라우저에서는 작동하지 않을 수 있습니다. 여러 브라우저에서 이 방법을 사용해야 하는 경우 다음 코드를 추가할 수 있습니다.

html { overflow: -moz-scrollbars-none; }
html {-ms-overflow-style: none;}
html { overflow: -webkit-scrollbar; }
html::-webkit-scrollbar { display: none; }

로그인 후 복사

Overlay scrollbar

때때로 스크롤바를 유지해야 하지만 페이지와 혼합되도록 스타일을 지정하면 보다 자연스러운 효과를 얻을 수 있습니다. . 이를 위해서는 약간의 기술이 필요합니다.

먼저 컨테이너를 정의하고 고정된 크기로 제한해야 합니다.

.container {
  width: 100%;
  height: 500px;
  overflow: auto;
}

로그인 후 복사

그런 다음 컨테이너 내부에 두 개의 하위 요소를 정의합니다. 하나는 콘텐츠의 실제 컨테이너이고 다른 하나는 스크롤 막대 역할을 합니다. :

<div class="container">
  <div class="content"></div>
  <div class="scrollbar"></div>
</div>

로그인 후 복사

다음으로 스크롤바를 올바른 위치에 배치해야 합니다. CSS 위치 지정을 통해 구현됩니다.

.scrollbar {
  position: fixed;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  background-color: #d3d3d3;
  opacity: 0;
  transition: opacity 0.2s;
}

로그인 후 복사

다음으로 컨테이너에 마우스 휠 이벤트 리스너를 추가하고 스크롤 막대의 위치를 업데이트해야 합니다.

$('.container').bind('scroll', function() {
  updateScrollbar();
})

function updateScrollbar() {
  var scrollRatio = $('.container').scrollTop() / ($('.content').height() - $('.container').height());
  var topPosition = scrollRatio * ($('.container').height() - $('.scrollbar').height());
  $('.scrollbar').css('top', topPosition);
}

로그인 후 복사

스크롤바를 사용하지 않음

스크롤바를 사라지게 하거나 통합하는 것 외에도 페이지 변경이나 뒤집기 효과와 같은 다른 방법을 사용할 수도 있습니다.

페이지 변경 효과:

고정 패널에 숨겨진 콘텐츠를 배치하고 스크롤 지점에 도달하면 CSS 애니메이션을 사용하여 해당 콘텐츠를 보이는 영역으로 밀어 넣습니다.

.panel {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

로그인 후 복사

.hiddenContent {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 100%;
  overflow: auto;
  padding-right: 17px;
  box-sizing: content-box;
  transition: transform 0.5s ease-in-out;
}

로그인 후 복사

.panel.active .hiddenContent {
  transform: translateY(-100%);
}

로그인 후 복사

반전 효과:

컨테이너를 추가하고 관점 속성을 사용하여 콘텐츠가 3차원 공간에서 회전하도록 합니다.

.container {
  height: 100%;
  perspective: 1000px;
}

.content {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.content.inverted {
  transform: rotateX(180deg);
}

로그인 후 복사

$('.container').on('scroll', function() {
  if ($('.container').scrollTop() >= $('.content').height() / 2) {
    $('.content').addClass('inverted');
  } else {
    $('.content').removeClass('inverted');
  }
})

로그인 후 복사

요약:

이 글에서는 CSS에서 스크롤바를 없애는 방법을 살펴보고 몇 가지 방법을 사용하여 이러한 방법을 적용했습니다. 어떤 방법을 사용하든 시각적 단순성과 사용자 경험 사이에는 절충안이 있으며 디자인에 따라 가장 적합한 방법을 선택하십시오.

위 내용은 CSS에서 스크롤 막대를 구현하지 않는 방법 및 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!