Terima kasih telah membantu kami meningkatkan kualitas Unity Documentation. Meskipun kami tidak dapat menerima semua kiriman, kami membaca setiap perubahan yang disarankan dari pengguna kami dan akan membuat pembaruan jika berlaku
MenutupPengajuan gagal
Karena alasan tertentu, perubahan yang Anda sarankan tidak dapat dikirimkan. Silakan coba lagi dalam beberapa menit. Dan terima kasih telah meluangkan waktu untuk membantu kami meningkatkan kualitas Unity Documentation
MenutupPernyataan
public static float HorizontalScrollbar(Posisi lurus, nilai float, ukuran float, float leftValue, float rightValue);Pernyataan
public static float HorizontalScrollbar(Posisi tegak lurus, nilai float, ukuran float, float leftValue, float rightValue, gaya GUIStyle);Parameter
positionRectangle pada layar untuk digunakan sebagai scrollbar. nilaiPosisi antara min dan maks. sizeBerapa banyak yang bisa kita lihat?leftValueNilai di ujung kiri scrollbar. rightValueNilai di ujung kanan bilah gulir. styleGaya yang akan digunakan untuk latar belakang scrollbar. Jika ditinggalkan, gaya horizontalScrollbar_ dari GUISkin saat ini akan digunakanPengembalian
float Nilai yang dimodifikasi. Ini dapat diubah oleh pengguna dengan menyeret bilah gulir, atau mengklik panah di bagian akhir
Keterangan
Buat bilah gulir horizontal. Scrollbar adalah apa yang Anda gunakan untuk menggulir dokumen. Kemungkinan besar, Anda ingin menggunakan scrollViews sebagai gantinya
using UnityEngine; using System.Collections;
public class ExampleClass : MonoBehaviour { public float hSbarValue;
void OnGUI() { hSbarValue = GUI.HorizontalScrollbar(new Rect(25, 25, 100, 30), hSbarValue, 1.0F, 0.0F, 10.0F); } }
Menemukan elemen tambahan
Gaya tombol di akhir bilah gulir dicari di kulit saat ini dengan menambahkan "tombol kiri" dan "tombol kanan" ke nama gaya. Nama ibu jari scrollbar (hal yang Anda seret) ditemukan dengan menambahkan "ibu jari" ke nama gaya
Web adalah tempat yang agak vertikal. Anda membaca situs web seperti Anda membaca halaman fisik. kiri ke kanan, atas ke bawah. Namun terkadang, Anda ingin menjauh dari vertikalitas semua itu dan melakukan sesuatu yang gila. membuat daftar horizontal. Atau lebih gila lagi, situs horizontal
Saya akan senang jika kita bisa melakukan sesuatu seperti ini
/* This isn't real */ div { scroll-direction: horizontal; }_Sayangnya, itu tidak akan terjadi. Itu bahkan tidak ada di peta jalan untuk CSS
Sayang sekali, karena di perusahaan tempat saya bekerja ini akan sangat berguna. Kami melakukan beberapa presentasi web. Presentasi adalah hal yang sangat horizontal – biasanya slide memiliki angka 4. 3 atau 16. 9 radius. Ini berarti kami selalu memiliki perjuangan antara horizontalitas presentasi dan vertikalitas teknologi web. Dan oleh kami, maksud saya saya. Tetapi jika ada satu hal yang saya sukai, itu adalah tantangan
Kasus Penggunaan Lain
Kasus penggunaan khusus yang membuat saya menggali ide ini bahwa pelanggan ingin menampilkan semua produk mereka dalam satu slide. Tentu saja, katalog produk mereka terlalu besar untuk ditampilkan dalam satu tampilan. Jadi kami memutuskan untuk membaginya menjadi tiga kategori, masing-masing dapat digulir secara horizontal. Sehingga tiga produk yang paling menonjol di setiap kategori terlihat dan produk yang kurang penting masih dapat diakses dengan mudah
Cara Non-JavaScript
Tidak mengherankan, ada banyak cara untuk melakukan ini di JavaScript. Beberapa dari mereka ada di situs ini
Saya ingin tahu apakah mungkin dilakukan dengan CSS murni. Solusinya ternyata cukup mudah
- Buat wadah dengan item
- Putar wadah 90 derajat berlawanan arah jarum jam sehingga bagian bawah berada di kanan
- Putar item kembali ke sisi yang benar
Langkah 1) Siapkan wadah
Buat <div>, dan buat banyak elemen anak
Dalam contoh ini, container side-scrolling kita akan berukuran lebar 300px, dengan 8 item masing-masing berukuran 100×100px. Ini adalah ukuran sewenang-wenang;
<div class="horizontal-scroll-wrapper squares"> <div>item 1</div> <div>item 2</div> <div>item 3</div> <div>item 4</div> <div>item 5</div> <div>item 6</div> <div>item 7</div> <div>item 8</div> </div>Ketinggian wadah akan menjadi "lebar" dan sebaliknya. Jadi di bawah ini, "lebar" wadah kita adalah 300px
.horizontal-scroll-wrapper { width: 100px; height: 300px; overflow-y: auto; overflow-x: hidden; }Sekarang anak-anak
.horizontal-scroll-wrapper > div { width: 100px; height: 100px; }_Langkah 2) Memutar wadah
Sekarang kita putar wadah -90 derajat dengan CSS transform. Dan begitulah. penggulung horizontal
.horizontal-scroll-wrapper { ... transform: rotate(-90deg); transform-origin: right top; }Hanya ada satu masalah kecil. anak-anak kita juga telah berotasi, dan sekarang segala sesuatu di dalamnya ada di sisinya
Langkah 3) Putar anak-anak kembali tegak
Bagaimana kita bisa membuat anak-anak tegak kembali?
.horizontal-scroll-wrapper > div { ... transform: rotate(90deg); transform-origin: right top; }_Langkah 4) Memperbaiki posisi
Ini mulai terlihat baik-baik saja, tetapi masih ada beberapa masalah
Dengan memutar pembungkus menggunakan bagian kanan atas sebagai titik jangkar, sisi kiri kita telah bergeser sesuai lebar wadah. Jika Anda merasa sulit untuk memahaminya, cukup letakkan jari Anda di sudut kanan atas halaman dan putar. Solusinya. geser kembali dengan <div class="horizontal-scroll-wrapper squares"> <div>item 1</div> <div>item 2</div> <div>item 3</div> <div>item 4</div> <div>item 5</div> <div>item 6</div> <div>item 7</div> <div>item 8</div> </div>_0
Lebih baik. Namun item pertama masih hilang, karena fenomena yang sama terjadi pada item tersebut. Kita dapat memperbaikinya dengan memberikan anak pertama margin atas lebarnya atau dengan menerjemahkan semua item dengan cara yang sama seperti pembungkus. Cara termudah yang saya temukan adalah dengan menambahkan bantalan atas ke pembungkus yang sama dengan lebar item, membuat semacam penyangga untuk item
.horizontal-scroll-wrapper { ... transform:rotate(-90deg) translateY(-100px); ... }_Demo
Lihat Pen Horizontal scroll (contoh sederhana) oleh Pieter Biesemans (@pieter-biesemans) di CodePen
Inilah tempat lain di mana Anda dapat melihat anak-anak non-persegi
Lihat Pen Scroll horizontal (contoh ekstensif) oleh Pieter Biesemans (@pieter-biesemans) di CodePen
Kesesuaian
Saya telah menguji perangkat yang langsung tersedia untuk saya
DeviceOSBrowserworks?DesktopWin10Chrome 54YDesktopWin10Firefox 47Y (w scrollbars)DesktopWin10IE11Y (w scrollbars)DesktopWin10Opera 41YDesktopWin10Vivaldi 1. 4YLaptop (layar sentuh)Win10Chrome 54NSamsung Galaxy S3Android 4. 3Chrome Mobile 52YSamsung Galaxy S6Android 5. 0Chrome Seluler 52 Nexus 6P Android 6 Chrome Seluler 52YiPad2iOSChrome Seluler 52NiPad2iOSSafari Seluler 9. 0NiPad Air 2iOSSafari Mobile 9. 0NDesktop
Karena penataan scrollbar saat ini hanya didukung oleh WebKit/Blink, Firefox dan IE masih menampilkan warna abu-abu jelek. Anda bisa mengendus ini dengan JavaScript dan menyembunyikannya sepenuhnya, tapi itu untuk tutorial lain
Menggunakan roda gulir mouse berfungsi dengan baik di desktop. Laptop saya adalah masalah yang berbeda. Layar sentuh dan panel sentuh berfungsi seolah-olah div tidak diputar
Seluler
Saya agak terkejut saat mengetahui bahwa Android benar-benar memahami bahwa penampung telah diputar, dan membiarkan Anda menggulir ke samping dengan menggesek ke kiri dan ke kanan
iOS di sisi lain tidak bermain bagus. Itu bertindak seperti wadah tidak diputar, jadi Anda harus menggesek ke atas dan ke bawah untuk menggulir ke samping, yang tentu saja berlawanan dengan intuisi. Selain itu, menggesek ke kiri dan ke kanan akan memindahkan item ke atas dan ke bawah di bungkusnya, yang tidak terduga dan aneh. Menyetel luapan ke tersembunyi tidak mengatasi masalah ini
Kesimpulan
Menurut Can I Use, transformasi CSS saat ini didukung oleh lebih dari 93% pengguna (pada saat penulisan ini, November 2016), jadi tidak ada masalah di sana.
Berhati-hatilah dalam menggunakan ini dalam produksi. Saya telah menguji ini pada beberapa perangkat, tetapi tidak secara ekstensif atau mendalam
Masalah terbesar adalah dengan input sentuh yang mengharuskan Anda menggesek ke atas dan ke bawah untuk ke kiri dan ke kanan. Solusi yang mungkin adalah menyertakan pesan di situs Anda yang menjelaskan hal ini, tetapi Anda harus bergantung pada orang yang benar-benar membaca pesan Anda. Dan itu pun masih berlawanan dengan intuisi. Solusi lain yang mungkin adalah menangkap input sentuh dengan JavaScript pada perangkat tersebut, tetapi lebih baik Anda melakukan semuanya dalam JavaScript dan meninggalkan peretasan CSS ini sepenuhnya
Bagaimana cara membuat gulungan horizontal dalam HTML?
Bagaimana cara menambahkan bilah gulir vertikal dan horizontal di HTML?
Bagaimana cara menambahkan scrollbar horizontal di div HTML?
Uji Scrollbar