CSS - Overflow: Scroll; - 항상 수직 스크롤 막대를 표시합니까?

CSS - Overflow: Scroll; - 항상 수직 스크롤 막대를 표시합니까?

그래서 현재 저는 다음을 가지고 있습니다.

#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>

필요에 따라 모양을 사용자 지정합니다.출처

2021년 이후에 이곳에 오는 모든 사람들:

"iOS 14에서는 사용자 지정 스크롤 막대가 더 이상 지원되지 않습니다."

developer.apple.com 포럼의 공식 "Frameworks Engineer"에 따르면.

iPad Safari에서 참고하세요, 만약 당신이 -을 가지고 있다면 노비스 코딩의 솔루션은 작동하지 않을 것입니다.webkit-overflow-scrolling: touch;당신의 CSS 어딘가에.해결책은 발생하는 모든 것을 제거하는 것입니다.-webkit-overflow-scrolling: touch;또는 퍼팅-webkit-overflow-scrolling: auto;NovieCoding 솔루션을 사용합니다.

이것은 제 테스트에서 iOS 7.1.x에서 iPad on Safari와 함께 작동할 것입니다, 하지만 iOS 6에 대해서는 잘 모르겠습니다.그러나 파이어폭스에서는 작동하지 않습니다.jScrollPane이라는 브라우저 간 호환을 목표로 하는 jQuery 플러그인이 있습니다.

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

언급URL : https://stackoverflow.com/questions/7492062/css-overflow-scroll-always-show-vertical-scroll-bar