it-swarm-id.com

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

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 )

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

screenshot of a div with no visible scroll bar

screenshot of a div with a visible scroll bar


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

154
Jeremy Banks

Tampilan bilah gulir dapat dikontrol dengan elemen pseudo -webkit-scrollbar WebKit[ blog ]. 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 membuat ulang tampilan bilah gulir tersembunyi:

Contoh ( jsfiddle )

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

screenshot showing webkit's scrollbar, without needing to hover

237
Jeremy Banks

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.

17
Blaise

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

12
Alex Banman

Bilah gulir 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 bekerja sangat baik untuk saya - Anda dapat membuat beberapa scrollbar kustom yang sangat indah yang sesuai dengan desain situs Anda.

3
Chris M. Welsh

Cara lain yang baik untuk berurusan dengan bilah gulir tersembunyi Lion adalah menampilkan Prompt 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. Salah satu situs yang melakukan ini adalah http://versusio.com , cukup periksa halaman contoh ini dan tunggu 1,5 detik untuk melihat Prompt:

http://versusio.com/en/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') untuk memudar ketika pengguna menggulir setelah dia melihat Prompt

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

2
user976647