Cara membuat scroll bar horizontal di html

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

Pengajuan 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

Pernyataan

Pernyataan

Parameter

Pengembalian

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>

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

Desktop

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?