주 스크롤 막대를 항상 표시

주 스크롤 막대를 항상 표시

사용자가 웹 페이지를 방문할 때(페이지에 스크롤바 활성화를 트리거할 콘텐츠가 충분하지 않을 때) 브라우저의 수직 스크롤바를 계속 볼 수 있도록 하려면 어떤 CSS가 필요합니까?

html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

이렇게 하면 스크롤 막대가 항상 표시되고 필요한 경우에만 활성화됩니다.

업데이트: 위의 기능이 작동하지 않는 경우 이 기능만 사용해도 됩니다.

html {
    overflow-y:scroll;
}

오버플로가 "자동"이 아닌 "스크롤"로 설정되었는지 확인합니다.따라서 OS X Lion에서 "scroll"로 설정된 오버플로는 사용 중에만 스크롤 막대가 표시된다는 점에서 auto와 더 유사합니다.따라서 위의 해결책이 효과가 없는 것 같으면 그 이유일 수 있습니다.

다음은 이 문제를 해결하기 위해 필요한 사항입니다.

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

기본값이 마음에 들지 않으면 그에 따라 스타일을 지정할 수 있습니다.

지난 몇 년 동안 상황이 변했습니다.위의 답변은 모든 경우에 더 이상 유효하지 않습니다.애플은 사라지고 있는 스크롤바를 곳곳에 밀어넣고 있습니다.MacOs(및 iOS)에서 Safari, Chrome 및 Firefox는 실제로 스크롤할 때만 스크롤 막대를 표시합니다. 현재 Windows/IE에 대해서는 잘 모르겠습니다.그러나 웹킷에서 스크롤 막대를 스타일화하는 비표준 방법이 있습니다(IE는 오래 전에 삭제했습니다).

html {
    overflow-y: scroll;
}

그게 네가 원하는 거니?

안타깝게도 Opera 9.64는 CSS 선언을 무시하는 것처럼 보입니다.HTML또는BODY같은 다른 블록 레벨 요소에 대해서도 작동하지만DIV.

body { height:101%; }더 큰 페이지를 "삭제"합니다.

대신 다음을 사용합니다.

body { min-height:101%; }

html {height: 101%;}

저는 이 크로스 브라우저 솔루션을 사용합니다(참고: 저는 항상 첫 번째 줄에 DOCTYPE 선언을 사용합니다. 쿼크 모드에서 작동하는지는 모르겠지만 테스트한 적이 없습니다).

모든 페이지에 항상 ACTIVE 수직 스크롤 막대가 표시되며, 수직 스크롤 막대는 소수의 픽셀만 스크롤할 수 있습니다.

페이지 내용이 브라우저의 표시 영역(보기 포트)보다 짧을 때 세로 스크롤 막대가 활성화되어 몇 개의 픽셀로만 스크롤할 수 있습니다.

만약 당신이 이 솔루션을 사용하여 CSS 유효성 검사에 집착한다면(나는 HTML 유효성 검사에만 집착합니다), 당신의 CSS 코드는 당신이 다음과 같은 비표준 CSS 속성을 사용하지 않기 때문에 W3C에 대해서도 유효합니다.-moz-scrollbars-vertical

다른 방법은 HTML 요소의 너비를 100vw로 설정하는 것입니다.대부분은 아니지만 대부분의 브라우저에서는 너비에 대한 스크롤 막대의 영향이 사라집니다.

html { width: 100vw; }

저는 이것을 바디 태그에 추가하여 작동시킬 수 있었습니다.html 요소에 대한 내용이 없어서 더 좋았습니다.

body {
    overflow-y: scroll;
}

높이를 101%로 설정하는 것이 문제에 대한 저의 해결책입니다.뷰포트 높이를 초과하는 페이지와 그렇지 않은 페이지 사이를 전환할 때 페이지가 더 이상 '플릭'되지 않습니다.

body { 
    min-height: 101vh; 
} 

나에게 가장 잘 작동합니다.

사용자 작업을 수행합니다.

html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}

그러면 저는 회색으로 칠해진 추한 스크롤바가 필요 없을 때 볼 필요가 없습니다.

html { height:initial!important; }

!important는 필요하지 않을 수도 있습니다 - 어떤 CSS가 설치되어 있는지에 따라 다릅니다.

언급URL : https://stackoverflow.com/questions/1202425/making-the-main-scrollbar-always-visible