CSS-오버플로 : 스크롤;

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

---

그래서 현재 나는 :

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

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

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

---

이 문제를 직접 만났습니다. OSx Lion은 스크롤 막대를 숨겨서 더 "매끄럽게"보이도록 만들지 만 동시에 문제가 발생합니다. 사람들은 때때로 div에 스크롤 기능이 있는지 여부를 알 수 없습니다.

수정 사항 : CSS에-

@media(device-width: 768px) and (device-height: 1024px){
    ::-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);
    }
}

필요에 따라 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 메뉴에서 시스템 환경 설정을 실행하십시오. "일반"설정 패널을 클릭하십시오. '스크롤 막대 표시'를 찾아 "항상"옆에있는 라디오 박스를 선택하십시오. 완료되면 시스템 환경 설정을 닫으십시오

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