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

224

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?

— Jambo
sumber

4

Uhm, bisakah kamu membuat ulang perilaku yang tepat ini di jsfiddle ? CSS yang Anda berikan harus memaksa bilah gulir untuk hadir sepanjang waktu.

— sg3s

1

Ya, sepertinya Anda memiliki beberapa kebiasaan CSS lainnya yang menyebabkan hal itu, ini akan selalu menampilkan bilah gulir. Pastikan pembungkus div yang satu ini ditata dengan benar.

— Shawn Steward

Saya menjalankan Singa! Mungkin itu saja? Saya akan membuka mesin virtual dan melihat bagaimana rasanya di sisi jendela ...

— Jambo

1

Sial, salahku! Ini adalah fitur di Lion. Saya harus benar-benar membaca apa yang saya beli sebelum membelinya ... Terima kasih teman-teman!

— Jambo

386

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);
}

Tampilkan cuplikan kode

/* 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>

Luaskan cuplikan

sesuaikan penampilan sesuai kebutuhan. Sumber

— NoviceCoding
sumber

6

Haruskah ini juga berfungsi di iPad dengan Safari? Saya menggunakan iPad 2 yang menjalankan iOS 6.1.3 dan tidak berfungsi.

— crmpicco

6

Apakah ada cara untuk membuat ini hanya berlaku untuk kelas tertentu?

— futbolpal

2

Hanya bekerja untuk saya setelah saya menetapkan 'overflow: auto' pada wadah (dalam kasus saya, a <ul>). Terima kasih!

— Rob Campion

8

@futbolpal ya, ini sepertinya bekerja di kelas; coba .classname :: - webkit-scrollbar

— Chase

4

bagaimana saya bisa mendapatkan ini berfungsi horizontal? bilah muncul untuk gulir vertikal tetapi bukan gulir horizontal

— BritishSam

14

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.

— Razan Paul
sumber

3

Apakah mungkin untuk memiliki keduanya di css kami - webkit-overflow-scrolling: touch dan scrollbar?

— Julsy

1

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.

— JStarcher
sumber

5

Ketahuilah bahwa pertanyaan ini ditanyakan 2 tahun yang lalu, bahkan sebelum iOS6 ada.

— OGHaza

webkit hanya safari chrome. Anda harus menargetkan mesin khusus Firefox

— TigerBear

-4

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

— Michelle
sumber

18

Ini memang menjawab pertanyaan, semacam, tapi itu adalah perbaikan sisi klien daripada memperbaikinya sisi server. Jadi itu adalah sesuatu yang harus dilakukan pengguna halaman web, stackoverflow adalah situs pemrograman sehingga orang-orang biasanya datang ke sini untuk mencari solusi kode daripada cara bagi pengguna untuk mengubah pengaturan browser mereka.

— Eric Leschinski