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

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

---

사용자가 웹 페이지를 방문 할 때 (페이지에 스크롤바의 활성화를 트리거하기에 충분한 내용이없는 경우) 브라우저의 세로 스크롤바를 계속 보이게하려면 어떤 CSS가 필요합니까?

---

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

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

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

html {
    overflow-y:scroll;
}

---

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

---

html {
    overflow-y: scroll;
}

너가 원하는게 그거야?

불행하게도, 오페라 9.64는 적용 때 CSS 선언을 무시하는 것 HTML또는 BODY그 같은 다른 블록 수준 요소 작동하지만, DIV.

---

오버플로가 "자동"이 아닌 "스크롤"로 설정되어 있는지 확인하십시오. 그렇게 말한다면 , 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);
}

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

---

html {height: 101%;}

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

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

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

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

---

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

대신 다음을 사용합니다.

body { min-height:101%; }

---

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

body {
    overflow-y: scroll;
}

---

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

html { width: 100vw; }

---

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

---

이 코드를 CSS 스타일 시트에 추가하십시오.

html {overflow-y: scroll;}

그게 다야!

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