메인 스크롤바를 항상 보이게 만들기

답변:

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

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

업데이트 : 위의 방법으로 작동하지 않으면 이것을 사용하는 것입니다. 

html {
    overflow-y:scroll;
}
— Corv1nus
소스
3
FF의 어떤 버전이 지원되는지 알고 overflow-y있습니까? -moz-scrollbars-vertical이 overflow-y속성 은 더 이상 사용되지 않는 것으로 보입니다 .
— Ionuț G. Stan
정확하게 기억한다면 Internet Explorer 6.x +, Firefox 1.5+라고 생각합니다. 위의 코드를 사용하고 있으며 FF1.5-3.5.1 및 IE6-8에서 작동합니다.
— Corv1nus
2
사이트의 특정 페이지가 너무 작아서 스크롤 막대를 갖지 못하고 다른 페이지가있는 경우 "페이지 점프"에 대한 대안이 있습니까? 아니면 이것이 "모범 사례"입니까? 전체 페이지를 차지하지 않는 웹 페이지가 많지 않다는 것을 인정해야합니다.
— Jess
2
이것이 최선의 방법인지 확실하지 않지만 모든 페이지에 스크롤 막대가 있고 필요한 경우에만 활성화되어 페이지 점프를 피하는 것이 일반적으로 허용되는 솔루션입니다. 나는 점프보다 일정한 스크롤 막대를 선호하는 경향이 있습니다.
— Corv1nus
1
스타일 html을 조금 해킹 한 사람들 (나 같은)의 경우, :root대신 구조적 의사 선택기 를 사용할 수 있습니다 html. 참조 : developer.mozilla.org/en-US/docs/Web/CSS/:root
— Rounin
31

오버플로가 "자동"이 아닌 "스크롤"로 설정되어 있는지 확인하십시오. 그 말로 , OS X 라이온, 더 그 스크롤바 자동 같은 "스크롤"동작합니다에 오버 플로우 세트에 여전히 사용되고 보여 때. 따라서 위의 해결책이 작동하지 않는 것 같습니다.

이 문제를 해결해야합니다.

::-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);
}

기본값이 마음에 들지 않으면 적절하게 스타일을 지정할 수 있습니다.

— 연체 동물 223
소스
1
이게 작동합니다! 그러나 특정 div에서만 어떻게 만들 수 있습니까?
— Rich
다른 CSS 요소와 마찬가지로 @Rich. .yourdiv ::-webkit-scrollbar {...}
— Kris
@ 크리스 안녕하세요, 답변 주셔서 감사합니다, 여기에 그 예가 있습니다. stackoverflow.com/a/54667091/2637261
— Rich
이것이 사용되는 이유-webkit-appearance: none;
— Suraj Jain
대단해! 허용되는 답변이어야합니다.
— 사이버 펑커
25

지난 몇 년 동안 상황이 바뀌 었습니다. 위의 답변은 모든 경우에 더 이상 유효하지 않습니다. 애플은 모든 곳에서 사라지는 스크롤바를 밀고있다 . Safari, Chrome 및 MacO (및 iO)의 Firefox에서도 실제로 스크롤 할 때만 스크롤 막대가 표시됩니다. 현재 Windows / IE에 대해 잘 모르겠습니다. 그러나 Webkit에는 스크롤 막대의 스타일을 지정하는 비표준 방법이 있습니다 (IE는 오래 전에 떨어졌습니다).

— 프랭크 레머
소스
그러나 그것은 그 새로운 것들에서 정상적으로 저하됩니다.
— Ben
3
사라지는 스크롤바 에서이 훌륭한 점에 감사드립니다. 나에게 스크롤바를 계속 보이게하는 이유는 컨텐츠가 스크롤되는 것에서 그렇지 않은 것으로 변할 때 약간 눈에 띄고 매우 성가신 바보를 피하는 것이 었습니다. 사라지는 스크롤바를 사용하면 몸을 보여주고 숨길 때 몸을 저크하지 않습니다. 그러나이 훌륭한 점에 감사드립니다.
— Noitidart
4
UX 관점에서 볼 때 대부분 스크롤 막대가 보이기를 원합니다. 현재 추세에 따라 스크롤 막대가 표시되지 않으면 목록에서 더 많은 표시 목록을 "시도"해야하는 추가 단계입니다. 사람들이 스크롤 막대를 볼 경우 드롭 다운 또는 목록에 더 많은 항목이 있다는 추가 시각적 힌트가 필요하지 않습니다.
— windsurf88
24 
html {
    overflow-y: scroll;
}

너가 원하는게 그거야?

불행히도 Opera 9.64는 HTML또는에 적용될 때 CSS 선언을 무시하는 것처럼 보이지만 ( BODY와) 같은 다른 블록 수준 요소에서 작동합니다 DIV.

— 이오 누치 G. 스탠
소스
13 
html {height: 101%;}

이 크로스 브라우저 솔루션을 사용 합니다 (참고 : 항상 첫 번째 줄에 DOCTYPE 선언을 사용합니다.이 기능이 quirksmode에서 작동하는지 여부는 알 수 없습니다 ).

이 것 항상 ACTIVE 세로 스크롤 막대 표시 모든 페이지는, 수직 스크롤은 몇 픽셀의 스크롤 될 것입니다.

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

이 솔루션을 사용하여 CSS 유효성 검사 (HTML 유효성 검사에만 고집되어 있음)에 집착하는 경우 다음과 같은 비표준 CSS 속성을 사용하지 않기 때문에 CSS 코드도 W3C에 대해 유효성을 검사합니다 -moz-scrollbars-vertical

— 마르코 데마 이오
소스
1
우아한 솔루션
— Artur Keyan
12

body { height:101%; } 더 큰 페이지를 "자르기"합니다.

대신 다음을 사용합니다.

body { min-height:101%; }
— 스캇
소스
1
이 질문은 5 년 전에 요청되었으며 이미 수락 된 답변이 있습니다. 귀하의 답변은 이미 수락 된 답변보다 더 나은 답변을 제공하지 않습니다.
— Dipen Shah
18
이 답변은 실제로 다른 답변에서 제공되지 않은 추가 정보를 제공합니다.
— GaTechThomas
2

body 태그에 추가 하여이 작업을 수행 할 수있었습니다. html 요소에 아무것도 없기 때문에 더 좋았습니다.

body {
    overflow-y: scroll;
}
— 재즈 피
소스
2

다른 방법은 html 요소의 너비를 100vw로 설정하는 것입니다. 대부분의 브라우저는 아니지만 대부분의 경우 스크롤 막대가 너비에 미치는 영향을 무시합니다.

html { width: 100vw; }
— 루 넬슨
소스
0

높이를 101 %로 설정하면 문제가 해결됩니다. 뷰포트 높이를 초과하는 페이지와 그렇지 않은 페이지 사이를 전환 할 때 페이지가 더 이상 '튕기기'되지 않습니다.

— 산잘 군단
소스
0 
body { 
    min-height: 101vh; 
}

나를 위해 최선을 다한다

— 롤로
소스
0

나는 이것을한다:

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

그런 다음 필요하지 않은 회색으로 표시된 스크롤 막대를 볼 필요가 없습니다.

— 스티 안
소스
질문은 그것이 항상 보이도록 요구합니다.
— Corv1nus
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.