CSS - Tràn: Cuộn; - Luôn hiển thị thanh cuộn dọc?

Vì vậy, hiện tại tôi có:

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

Tuy nhiên tôi không tin rằng sẽ rõ ràng với một số người dùng rằng có nhiều nội dung hơn ở đó. Họ có thể cuộn trang xuống mà không biết rằng div của tôi thực sự chứa nhiều nội dung hơn. Tôi sử dụng chiều cao 510px để nó cắt một số văn bản để trên một số trang có vẻ như có nhiều nội dung hơn, nhưng điều này không hiệu quả với tất cả chúng.

Tôi đang sử dụng máy Mac và trong Chrome và Safari, thanh cuộn dọc sẽ chỉ hiển thị khi chuột ở trên Div và bạn chủ động cuộn. Có cách nào để luôn hiển thị không?

Chỉ cần chạy vào vấn đề này bản thân mình. OSx Lion ẩn các thanh cuộn trong khi không sử dụng để làm cho nó có vẻ "lắt léo" hơn, nhưng đồng thời vấn đề bạn đề cập đến: mọi người đôi khi không thể biết liệu div có tính năng cuộn hay không.

Cách khắc phục: Trong css của bạn bao gồm -

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

tùy chỉnh vẻ ngoài khi cần thiết. Nguồn

Vui lòng lưu ý trên iPad Safari, giải pháp của NoviceCoding sẽ không hoạt động nếu bạn có - webkit-overflow-scrolling: touch;một nơi nào đó trong CSS của bạn. Giải pháp là loại bỏ tất cả các lần xuất hiện -webkit-overflow-scrolling: touch;hoặc đặt -webkit-overflow-scrolling: auto;với giải pháp của NoviceCoding.

Điều này sẽ hoạt động với iPad trên Safari trên iOS 7.1.x từ thử nghiệm của tôi, mặc dù tôi không chắc chắn về iOS 6. Tuy nhiên, nó sẽ không hoạt động trên Firefox. Có một plugin jQuery nhằm mục đích tuân thủ trình duyệt chéo được gọi là jScrollPane .

Ngoài ra, có một bài đăng trùng lặp ở đây trên Stack Overflow có một số chi tiết khác.

Điều này sẽ làm cho các thanh cuộn luôn hiển thị khi có nội dung trong các cửa sổ phải được cuộn để truy cập, nó áp dụng cho tất cả các cửa sổ và tất cả các ứng dụng trên máy Mac:

Khởi chạy Tùy chọn hệ thống từ menu Menu Apple Nhấp vào bảng cài đặt của General General Tìm kiếm 'Hiển thị các thanh cuộn' và chọn hộp radio bên cạnh Luôn luôn ra khỏi Đóng Tùy chọn hệ thống khi kết thúc