CSS에서 세로 스크롤 막대를 항상 표시하도록 하는 방법은 무엇입니까?

CSS에서 항상 세로 스크롤 막대를 표시하는 방법

특정 시나리오에서는 세로 스크롤 막대가 항상 표시되도록 할 수 있습니다. , div의 콘텐츠가 표시 영역을 넘어 확장되지 않는 경우에도 마찬가지입니다. 기본적으로 브라우저는 마우스가 요소 위로 이동할 때까지 스크롤 막대를 숨깁니다.

스크롤 막대가 항상 표시되도록 하려면 다음 CSS를 추가하세요.

:::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

첫 번째 줄은 기본 브라우저 스타일을 제거합니다. 두 번째 줄은 스크롤바 썸에 대한 사용자 정의 스타일을 정의합니다.

예:

#div {
  position: relative;
  height: 510px;
  overflow-y: scroll;
  
  ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
  }
  
  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .5);
    box-shadow: 0 0 1px rgba(255, 255, 255, .5);
  }
}

위 내용은 CSS에서 세로 스크롤 막대를 항상 표시하도록 하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!