Mencegah bilah gulir disembunyikan untuk pengguna trackpad MacOS di WebKit / Blink

162

Perilaku default WebKit / Blink (Safari / Chrome) di MacOS sejak 10.7 (Mac OS X Lion) adalah untuk menyembunyikan bilah gulir dari pengguna trackpad saat sedang tidak digunakan. Ini bisa membingungkan ; bilah gulir sering merupakan satu-satunya isyarat visual bahwa suatu elemen dapat digulir.

Contoh ( jsfiddle )

HTML 
<div class="frame">
    Foo<br />
    Bar<br />
    Baz<br />
    Help I'm trapped in an HTML factory! 
</div>
CSS 
.frame {
    overflow-y: auto;
    border: 1px solid black;
    height: 3em;
    width: 10em;
    line-height: 1em;
}​
Cuplikan layar WebKit (Chrome)

tangkapan layar div tanpa bilah gulir yang terlihat

Tangkapan Layar Presto (Opera)

tangkapan layar div dengan bilah gulir yang terlihat

Bagaimana saya bisa memaksa bilah gulir untuk selalu ditampilkan pada elemen yang dapat digulir di WebKit?

css macos webkit scrollbar blink Jeremy Banks
sumber
Sudahkah Anda mencoba overflow: gulir? Ini digunakan untuk bekerja di Chrome. Seharusnya memaksa scrollbar untuk selalu menampilkan.
xaddict
2
Perhatikan bahwa ini juga masalah di Firefox pada Mac OS X.
Blaise
Man, aku benci kalau situs berantakan dengan UI pada saya sistem dan user agent.
amn

Jawaban:

249

Tampilan bilah gulir dapat dikontrol dengan -webkit-scrollbarpseudo-elements  [ blog ] WebKit . Anda dapat menonaktifkan tampilan dan perilaku default dengan mengatur -webkit-appearance [ docs ] ke none.

Karena Anda menghapus gaya default, Anda juga perlu menentukan gaya sendiri atau bilah gulir tidak akan pernah muncul. CSS berikut ini menciptakan kembali tampilan bilah gulir tersembunyi:

Contoh ( jsfiddle )

CSS 
.frame::-webkit-scrollbar {
    -webkit-appearance: none;
}

.frame::-webkit-scrollbar:vertical {
    width: 11px;
}

.frame::-webkit-scrollbar:horizontal {
    height: 11px;
}

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

.frame::-webkit-scrollbar-track { 
    background-color: #fff; 
    border-radius: 8px; 
}
Cuplikan layar WebKit (Chrome)

tangkapan layar menampilkan bilah gulir webkit, tanpa harus melayang

Jeremy Banks
sumber
1
Untuk scrollbar macosx singa paksa, trik yang dijelaskan di sini tidak bekerja dengan teknik ini: stackoverflow.com/a/3417992/62255 . Tidak masalah - karena kita secara eksplisit mengatur dimensi di sini, kita dapat mengaksesnya secara langsung.
jedierikb
5
Perhatikan bahwa Anda juga dapat menyesuaikan track / background scrollbar dengan:.frame::-webkit-scrollbar-track { background-color: #FFF; border-radius: 8px; }
XML
Catatan gaya scrollbar webkit tidak berfungsi di iOS 7 (dan mungkin 6).
RobW
4
Satu hal yang perlu disebutkan adalah bahwa, dalam pengujian saya dan komentar yang sangat lama oleh orang lain , sepertinya Anda tidak dapat memiliki scrollbar yang selalu aktif DAN pengguliran seperti momentum yang biasa digunakan orang dengan iOS. Melakukan CSS momentum-scrolling menyebabkan scrollbar kustom saya menghilang.
jmq
2
Belum memverifikasi ini akhir-akhir ini, tetapi saya menemukan catatan ini di CSS kami yang mereferensikan solusi ini: "Perhatikan bahwa ini akan menampilkan bilah gulir gaya OS X misalnya di Chrome pada Windows."
Henrik N
19

Untuk aplikasi web satu halaman di mana saya menambahkan bagian yang dapat digulir secara dinamis, saya memicu scrollbar OSX dengan secara terprogram menggulirkan satu piksel ke bawah dan mencadangkan:

// Plain JS:
var el = document.getElementById('scrollable-section');
el.scrollTop = 1;
el.scrollTop = 0;

// jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);

Ini memicu isyarat visual memudar dan keluar.

Blaise
sumber
19

Berikut adalah sedikit kode yang mengaktifkan kembali bilah gulir di seluruh situs web Anda. Saya tidak yakin apakah itu jauh berbeda dari jawaban paling populer saat ini tetapi ini dia:

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

Ditemukan di tautan ini: http://simurai.com/blog/2011/07/26/webkit-scrollbar

Alex Banman
sumber
3

Scrollbar browser tidak berfungsi sama sekali di iPhone / iPad. Di tempat kerja kami menggunakan scrollbar JavaScript khusus seperti jScrollPane untuk memberikan UI lintas-browser yang konsisten: http://jscrollpane.kelvinluck.com/

Ini berfungsi sangat baik untuk saya - Anda dapat membuat beberapa scrollbar kustom yang sangat indah yang sesuai dengan desain situs Anda.

Chris M. Welsh
sumber
2

Cara lain yang baik untuk berurusan dengan bilah gulir tersembunyi Lion adalah menampilkan permintaan untuk menggulir ke bawah. Ini tidak berfungsi dengan area gulir kecil seperti bidang teks tetapi baik dengan area gulir besar dan mempertahankan gaya situs secara keseluruhan. Satu situs melakukan ini adalah http://versusio.com , cukup periksa halaman contoh ini dan tunggu 1,5 detik untuk melihat prompt:

http://versusio.com/id/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb

Implementasinya tidak sulit tetapi Anda harus berhati-hati, bahwa Anda tidak menampilkan prompt ketika pengguna sudah menggulir.

Anda memerlukan jQuery + Underscore dan

$(window).scroll untuk memeriksa apakah pengguna sudah menggulir sendiri,

_.delay() untuk memicu penundaan sebelum Anda menampilkan prompt - prompt seharusnya tidak terlalu mencolok

$('#prompt_div').fadeIn('slow') memudar di prompt Anda dan tentu saja

$('#prompt_div').fadeOut('slow') memudar ketika pengguna menggulir setelah dia melihat prompt

Selain itu, Anda dapat mengikat acara Google Analytics untuk melacak perilaku pengguliran pengguna.

pengguna976647
sumber