Membuat bilah gulir utama selalu terlihat

CSS apa yang diperlukan untuk membuat scrollbar vertikal browser tetap terlihat ketika pengguna mengunjungi halaman web (ketika halaman tidak memiliki cukup konten untuk memicu aktivasi scrollbar)?

html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

Ini membuat bilah gulir selalu terlihat dan hanya aktif bila diperlukan.

Pembaruan: Jika cara di atas tidak berhasil, gunakan saja ini.

html {
    overflow-y:scroll;
}

Pastikan overflow diatur ke "gulir" bukan "otomatis." Dengan mengatakan itu , di OS X Lion, overflow yang diatur ke "scroll" berperilaku lebih seperti auto di scrollbar yang masih hanya akan ditampilkan ketika sedang digunakan. Jadi, jika ada solusi di atas tampaknya tidak berhasil itu mungkin sebabnya.

Inilah yang harus Anda perbaiki:

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

Anda dapat mengaturnya dengan gaya jika Anda tidak menyukai default.

Banyak hal telah berubah dalam beberapa tahun terakhir. Jawaban di atas tidak berlaku lagi dalam semua kasus. Apple mendorong bilah gulir yang menghilang di mana-mana. Safari, Chrome, dan bahkan Firefox di MacO (dan iO) hanya menampilkan scrollbar ketika benar-benar bergulir - Saya tidak tahu tentang Windows / IE saat ini. Namun ada cara-cara non-standar untuk menata bilah gulir di Webkit (yaitu IE yang sudah lama tidak digunakan).

html {
    overflow-y: scroll;
}

Itukah yang kamu inginkan?

Sayangnya, Opera 9.64 tampaknya mengabaikan deklarasi CSS itu ketika diterapkan pada HTMLatau BODY, meskipun itu berfungsi untuk elemen tingkat blok lainnya DIV.

html {height: 101%;}

Saya menggunakan solusi lintas browser ini (catatan: Saya selalu menggunakan deklarasi DOCTYPE di baris 1, saya tidak tahu apakah itu berfungsi di quirksmode, tidak pernah mengujinya ).

Ini akan selalu menampilkan bilah gulir vertikal AKTIF di setiap halaman, bilah gulir vertikal hanya dapat digulir beberapa piksel.

Ketika konten halaman lebih pendek dari area yang terlihat oleh browser (port tampilan) Anda masih akan melihat scrollbar vertikal aktif, dan itu hanya dapat digulir beberapa piksel.

Jika Anda terobsesi dengan validasi CSS (Saya hanya terobsesi dengan validasi HTML) dengan menggunakan solusi ini, kode CSS Anda juga akan divalidasi untuk W3C karena Anda tidak menggunakan atribut CSS standar seperti -moz-scrollbars-vertical

body { height:101%; } akan "memotong" halaman yang lebih besar.

Sebagai gantinya, saya menggunakan:

body { min-height:101%; }

Saya bisa membuatnya berfungsi dengan menambahkannya ke tag tubuh. Lebih baik untuk saya karena saya tidak punya apa-apa di elemen html.

body {
    overflow-y: scroll;
}

Pendekatan alternatif adalah mengatur lebar elemen html ke 100vw. Pada banyak, jika tidak sebagian besar browser, ini meniadakan efek scrollbar pada lebar.

html { width: 100vw; }

Pengaturan tinggi hingga 101% adalah solusi saya untuk masalah ini. Halaman Anda tidak akan lagi 'jentik' saat beralih di antara yang melebihi tinggi viewport dan yang tidak.

body { 
    min-height: 101vh; 
} 

bekerja yang terbaik untukku

Saya melakukan ini:

html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}

Maka saya tidak perlu melihat scrollbar abu-abu jelek ketika itu tidak diperlukan.