Saya memiliki elemen yang disebut item dan konten di dalam elemen lebih panjang dari tinggi elemen, saya ingin membuatnya dapat digulir tetapi menyembunyikan bilah gulir, bagaimana saya melakukannya?
<div class="left-side">
<div class="items" style="display:block;width: 94%;margin: 0 auto;overflow: hidden;">
</div>
</div>
.left-side {
width: 1470px;
padding-top: 20px;
height: 878px;
}
Saya mencoba mengatur overflow kelas sisi kiri ke auto, tetapi itu tidak melakukan apa-apa.
Anda bisa menyembunyikannya:
html {
overflow: scroll;
}
::-webkit-scrollbar {
width: 0px;
background: transparent; /* make scrollbar transparent */
}
Untuk informasi lebih lanjut, lihat : https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll
jika Anda benar-benar ingin menyingkirkan scrollbar, pisahkan informasi menjadi dua halaman terpisah.
Panduan kegunaan pada scrollbar oleh Jakob Nielsen:
Ada lima panduan kegunaan penting untuk scrolling dan scrollbar:
- Tawarkan scrollbar jika suatu area memiliki konten bergulir. Jangan mengandalkan
pengguliran otomatis atau menyeret, yang mungkin tidak disadari oleh orang-orang.
- Sembunyikan scrollbar jika semua konten terlihat. Jika orang melihat scrollbar, mereka mereka menganggap ada konten tambahan dan akan frustrasi jika mereka tidak bisa menggulir.
- Patuhi standar GUI dan gunakan scrollbar yang terlihat seperti scrollbar.
- Hindari pengguliran horizontal pada halaman Web dan minimalkan di tempat lain.
- Tampilkan semua informasi penting di atas fold. Pengguna sering memutuskan untuk tetap tinggal atau pergi berdasarkan apa yang dapat mereka lihat tanpa menggulir. Ditambah lagi, mereka hanya mengalokasikan 20% perhatian mereka di bawah fold.
Untuk membuat scrollbar Anda hanya terlihat ketika dibutuhkan (yaitu ketika ada konten untuk digulir ke bawah), gunakan overflow: auto
.
Anda dapat menggunakan plugin SlimScroll untuk membuat div dapat digulir meskipun diatur ke overflow: hidden;
(yaitu scrollbar hidden).
Anda juga dapat mengontrol touch scroll serta kecepatan scroll menggunakan plugin ini.
Semoga ini membantu :)