CSS-오버플로 : 스크롤; -항상 세로 스크롤 막대를 표시 하시겠습니까?

그래서 현재 나는 :

#div {
  position: relative;
  height: 510px;
  overflow-y: scroll;
}

그러나 일부 사용자에게는 더 많은 콘텐츠가 있다는 것이 분명하다고는 생각하지 않습니다. 내 div에 실제로 더 많은 내용이 포함되어 있다는 것을 모르고 페이지를 아래로 스크롤 할 수 있습니다. 높이 510px를 사용하여 일부 텍스트를 잘라내어 일부 페이지에서 더 많은 내용이있는 것처럼 보이지만 일부는 작동하지 않습니다.

Mac을 사용하고 있으며 Chrome 및 Safari에서는 마우스가 Div 위에 있고 활발하게 스크롤 할 때만 세로 스크롤 막대가 표시됩니다. 항상 표시하는 방법이 있습니까?

이 문제를 직접 만났습니다. OSx Lion은 스크롤바를 숨겨서 더 "매끄럽게"보이도록 만들지 만 동시에 문제가 발생합니다. 사람들은 때때로 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);
}

/* always show scrollbars */

::-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 for demo */

#container {
  height: 4em;
  /* shorter than the child */
  overflow-y: scroll;
  /* clip height to 4em and scroll to show the rest */
}

#child {
  height: 12em;
  /* taller than the parent to force scrolling */
}


/* === ignore stuff below, it's just to help with the visual. === */

#container {
  background-color: #ffc;
}

#child {
  margin: 30px;
  background-color: #eee;
  text-align: center;
}

<div id="container">
  <div id="child">Example</div>
</div>

필요에 따라 apperance를 사용자 정의하십시오. 출처

iPad Safari webkit-overflow-scrolling: touch;에서 CSS의 어딘가에 NoviceCoding의 솔루션이 작동하지 않습니다 . 솔루션은 모든 발생을 제거 -webkit-overflow-scrolling: touch;하거나 -webkit-overflow-scrolling: auto;NoviceCoding의 솔루션으로 넣 습니다 .

이것은 내 테스트에서 iOS 7.1.x의 Safari에서 iPad와 함께 작동하지만 iOS 6에 대해서는 확실하지 않습니다. 그러나 Firefox에서는 작동하지 않습니다. jScrollPane 이라는 크로스 브라우저 호환을 목표로하는 jQuery 플러그인이 있습니다 .

또한 스택 오버플 로에 다른 세부 정보 가있는 게시물 이 중복 되어 있습니다.

이렇게하면 액세스 할 수 있도록 스크롤해야하는 윈도우 내에 컨텐츠가있을 때 스크롤 막대가 항상 표시되며 Mac의 모든 윈도우와 모든 앱에 적용됩니다.

 Apple 메뉴에서 시스템 환경 설정을 실행하십시오. "일반"설정 패널을 클릭하십시오. '스크롤 막대 표시'를 찾아 "항상"옆에있는 라디오 박스를 선택하십시오. 완료되면 시스템 환경 설정을 닫으십시오