CSS - Overflow: Gulir; - Selalu tampilkan bilah gulir vertikal?

Jadi saat ini saya punya:

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

Namun saya tidak percaya bahwa akan jelas bagi beberapa pengguna bahwa ada lebih banyak konten di sana. Mereka dapat menggulir ke bawah halaman tanpa mengetahui bahwa div saya sebenarnya mengandung lebih banyak konten. Saya menggunakan ketinggian 510px sehingga memotong beberapa teks sehingga pada beberapa halaman memang terlihat seperti ada lebih banyak konten, tetapi ini tidak bekerja untuk mereka semua.

Saya menggunakan Mac, dan di Chrome dan Safari bilah gulir vertikal hanya akan ditampilkan ketika mouse melewati Div dan Anda gulir secara aktif. Apakah ada cara untuk selalu menampilkannya?

Hanya mengalami masalah ini sendiri. OSx Lion menyembunyikan bilah gulir saat tidak digunakan untuk membuatnya tampak lebih "licin", tetapi pada saat yang sama masalah yang Anda bahas muncul: orang kadang-kadang tidak dapat melihat apakah div memiliki fitur gulir atau tidak.

Cara mengatasinya: Di css Anda termasuk -

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

sesuaikan penampilan sesuai kebutuhan. Sumber

Harap dicatat di iPad Safari, solusi NoviceCoding tidak akan berfungsi jika Anda punya - webkit-overflow-scrolling: touch;di suatu tempat di CSS Anda. Solusinya adalah menghapus semua kemunculan -webkit-overflow-scrolling: touch;atau menempatkan -webkit-overflow-scrolling: auto;dengan solusi NoviceCoding.

Ini akan bekerja dengan iPad di Safari di iOS 7.1.x dari pengujian saya, saya tidak yakin tentang iOS 6 sekalipun. Namun, itu tidak akan berfungsi di Firefox. Ada plugin jQuery yang bertujuan untuk mematuhi browser yang disebut jScrollPane .

Juga, ada posting duplikat di sini di Stack Overflow yang memiliki beberapa detail lainnya.

Ini akan membuat bilah gulir selalu ditampilkan ketika ada konten di dalam windows yang harus digulir untuk mengakses, itu berlaku untuk semua jendela dan semua aplikasi di Mac:

Luncurkan System Preferences dari  Apple menu Klik pada panel pengaturan "General" Cari 'Show scroll bar' dan pilih radiobox di sebelah "Selalu" Tutup System Preferences ketika selesai