Bisakah CSS digunakan untuk menyembunyikan bilah gulir? Bagaimana Anda melakukan ini?

Tetapkan overflow: hidden;pada tag tubuh seperti ini:

<style type="text/css">
    body {
        overflow: hidden;
    }
</style>

Kode di atas menyembunyikan bilah gulir horizontal dan vertikal.

Jika Anda hanya ingin menyembunyikan bilah gulir vertikal , gunakan overflow-y:

<style type="text/css">
    body {
        overflow-y: hidden;
    }
</style>

Dan jika Anda ingin menyembunyikan hanya scrollbar horizontal , gunakan overflow-x:

<style type="text/css">
    body {
        overflow-x: hidden;
    }
</style>

Catatan: Ini juga akan menonaktifkan fitur gulir. Lihat jawaban di bawah ini jika Anda hanya ingin menyembunyikan bilah gulir, tetapi bukan fitur gulir.

WebKit mendukung elemen pseudo scrollbar yang dapat disembunyikan dengan aturan standar CSS:

#element::-webkit-scrollbar {
    display: none;
}

Jika Anda ingin semua scrollbar disembunyikan, gunakan

::-webkit-scrollbar {
    display: none;
}

Saya tidak yakin tentang pemulihan - ini berhasil, tetapi mungkin ada cara yang tepat untuk melakukannya:

::-webkit-scrollbar {
    display: block;
}

Tentu saja Anda selalu dapat menggunakan width: 0, yang kemudian dapat dengan mudah dipulihkan width: auto, tetapi saya bukan penggemar penyalahgunaan widthuntuk visibilitas tweak.

Firefox 64 sekarang mendukung properti width-scrollbar eksperimental secara default (63 membutuhkan flag konfigurasi untuk diatur). Untuk menyembunyikan bilah gulir di Firefox 64:

#element {
    scrollbar-width: none;
}

Untuk melihat apakah browser Anda saat ini mendukung elemen pseudo atau scrollbar-width, coba potongan ini:

.content {
  /* These rules create an artificially confined space, so we get
     a scrollbar that we can hide. They are not directly involved in
     hiding the scrollbar. */

  border: 1px dashed gray;
  padding: .5em;

  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content {
  /* This is the magic bit for Firefox */
  scrollbar-width: none;
}

.content::-webkit-scrollbar {
  /* This is the magic bit for WebKit */
  display: none;
}

<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.

Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>

(Perhatikan bahwa ini bukan jawaban yang benar untuk pertanyaan, karena menyembunyikan bilah horizontal juga, tapi itulah yang saya cari ketika Google menunjuk saya ke sini, jadi saya pikir saya akan tetap mempostingnya.)

Ya, semacam ..

Ketika Anda mengajukan pertanyaan, "Dapatkah bilah gulir dari browser dihapus dengan cara tertentu, bukan hanya disembunyikan atau disamarkan", semua orang akan mengatakan "Tidak mungkin" karena tidak mungkin untuk menghapus bilah gulir dari semua browser dalam suatu cara yang sesuai dan lintas-kompatibel, dan kemudian ada seluruh argumen kegunaan.

Namun, adalah mungkin untuk mencegah browser dari kebutuhan untuk menghasilkan dan menampilkan scrollbar jika Anda tidak mengizinkan halaman web Anda meluap.

Ini hanya berarti bahwa kita harus secara proaktif menggantikan perilaku yang sama yang biasanya dilakukan browser untuk kita dan memberi tahu browser terima kasih tetapi tidak, terima kasih sobat. Daripada mencoba menghilangkan scrollbar (yang kita semua tahu tidak mungkin), kita dapat menghindari scrolling (layak dilakukan) dan gulir di dalam elemen yang kita buat dan memiliki kontrol lebih besar atas.

Buat div dengan overflow tersembunyi. Deteksi ketika pengguna mencoba menggulir, tetapi tidak dapat karena kami telah menonaktifkan kemampuan browser untuk menggulir dengan overflow: disembunyikan .. dan alih-alih memindahkan konten menggunakan JavaScript saat ini terjadi. Dengan demikian membuat scrolling kita sendiri tanpa scrolling default browser atau menggunakan plugin seperti iScroll .

---

Demi menjadi teliti; semua cara spesifik vendor dalam memanipulasi scroll-bar:

Internet Explorer 5.5+

* Properti ini tidak pernah menjadi bagian dari spesifikasi CSS, juga tidak pernah disetujui atau diawali vendor, tetapi mereka bekerja di Internet Explorer dan Konqueror. Ini juga dapat diatur secara lokal di lembar gaya pengguna untuk setiap aplikasi. Di Internet Explorer Anda menemukannya di bawah tab "Aksesibilitas", di Konqueror di bawah tab "Stylesheets".

body, html { /* These are defaults and can be replaced by hexadecimal color values */
    scrollbar-base-color: aqua;
    scrollbar-face-color: ThreeDFace;
    scrollbar-highlight-color: ThreeDHighlight;
    scrollbar-3dlight-color: ThreeDLightShadow;
    scrollbar-shadow-color: ThreeDDarkShadow;
    scrollbar-darkshadow-color: ThreeDDarkShadow;
    scrollbar-track-color: Scrollbar;
    scrollbar-arrow-color: ButtonText;
}

Pada Internet Explorer 8 properti ini adalah vendor diawali oleh Microsoft, tetapi mereka masih belum pernah disetujui oleh W3C .

-ms-scrollbar-base-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-base-color
-ms-scrollbar-track-color

Rincian lebih lanjut tentang Internet Explorer

Internet Explorer scrolltersedia yang mengatur apakah akan menonaktifkan atau mengaktifkan bilah gulir; itu juga dapat digunakan untuk mendapatkan nilai posisi bilah gulir.

Dengan Microsoft Internet Explorer 6 dan yang lebih baru, ketika Anda menggunakan !DOCTYPEdeklarasi untuk menentukan mode yang sesuai standar, atribut ini berlaku untuk elemen HTML. Ketika modus standar-compliant tidak ditentukan, seperti dengan versi sebelumnya dari Internet Explorer, atribut ini berlaku untuk BODYelemen, TIDAK yangHTML elemen.

Ini juga perlu dicatat bahwa ketika bekerja dengan .NET kelas ScrollBar di System.Windows.Controls.Primitivesdalam kerangka Presentasi bertanggung jawab atas rendering scrollbar.

http://msdn.microsoft.com/en-us/library/ie/ms534393(v=vs.85).aspx

• MSDN. Properti UI dasar
• W3C. Tentang properti scrollbar non-standar
• MSDN. .NET ScrollBar Class

WebKit

Ekstensi WebKit yang terkait dengan kustomisasi scroll-bar adalah:

::-webkit-scrollbar {}             /* 1 */
::-webkit-scrollbar-button {}      /* 2 */
::-webkit-scrollbar-track {}       /* 3 */
::-webkit-scrollbar-track-piece {} /* 4 */
::-webkit-scrollbar-thumb {}       /* 5 */
::-webkit-scrollbar-corner {}      /* 6 */
::-webkit-resizer {}               /* 7 */

Ini masing-masing dapat dikombinasikan dengan penyeleksi semu tambahan:

• :horizontal - Kelas pseudo horizontal berlaku untuk setiap bilah gulir yang memiliki orientasi horizontal.
• :vertical - Kelas pseudo vertikal berlaku untuk setiap bilah gulir yang memiliki orientasi vertikal.
• :decrement- Class pseudo-decrement berlaku untuk tombol dan track piece. Ini menunjukkan apakah tombol atau track piece akan menurunkan posisi tampilan ketika digunakan (misalnya, di atas scrollbar vertikal, dibiarkan pada scrollbar horizontal).
• :increment- Peningkatan pseudo-class berlaku untuk tombol dan track piece. Ini menunjukkan apakah tombol atau track piece akan meningkatkan posisi tampilan ketika digunakan (mis., Turun di scrollbar vertikal, tepat di scrollbar horizontal).
• :start- Kelas pseudo awal berlaku untuk tombol dan lagu. Ini menunjukkan apakah objek ditempatkan sebelum jempol.
• :end- Kelas pseudo akhir berlaku untuk tombol dan track piece. Ini menunjukkan apakah objek ditempatkan setelah ibu jari.
• :double-button- Kelas pseudo tombol ganda berlaku untuk tombol dan lagu. Ini digunakan untuk mendeteksi apakah suatu tombol adalah bagian dari sepasang tombol yang bersama-sama di ujung scrollbar yang sama. Untuk lagu, ini menunjukkan apakah lagu tersebut berbatasan dengan sepasang tombol.
• :single-button- Kelas pseudo tombol tunggal berlaku untuk tombol dan lagu. Ini digunakan untuk mendeteksi apakah sebuah tombol dengan sendirinya di ujung scrollbar. Untuk lagu, ini menunjukkan apakah lagu tersebut berbatasan dengan tombol tunggal.
• :no-button - Berlaku untuk melacak bagian dan menunjukkan apakah potongan trek berjalan ke tepi bilah gulir, yaitu, tidak ada tombol di ujung trek.
• :corner-present - Berlaku untuk semua bagian bilah gulir dan menunjukkan ada atau tidaknya sudut bilah gulir.
• :window-inactive- Berlaku untuk semua bagian bilah gulir dan menunjukkan apakah jendela yang berisi bilah gulir sedang aktif atau tidak. (Dalam nightlies baru-baru ini, kelas pseudo ini sekarang berlaku untuk :: selection juga. Kami berencana untuk memperluasnya agar berfungsi dengan konten apa pun dan mengusulkannya sebagai kelas pseudo standar baru.)

Contoh kombinasi ini

::-webkit-scrollbar-track-piece:start { /* Select the top half (or left half) or scrollbar track individually */ }
::-webkit-scrollbar-thumb:window-inactive { /* Select the thumb when the browser window isn't in focus */ }
::-webkit-scrollbar-button:horizontal:decrement:hover { /* Select the down or left scroll button when it's being hovered by the mouse */ }

• Styling Scrollbars - Webkit.org

Rincian lebih lanjut tentang Chrome

addWindowScrollHandler public static HandlerRegistration addWindowScrollHandler (Window.ScrollHandler handler)

  Menambahkan Parameter handler Window.ScrollEvent: handler - handler Returns: mengembalikan registrasi handler [ sumber ] ( http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html# addWindowScrollHandler (com.google.gwt.user.client.Window.ScrollHandler) )

Mozilla

Mozilla memang memiliki beberapa ekstensi untuk memanipulasi bilah gulir, tetapi semuanya disarankan untuk tidak digunakan.

• -moz-scrollbars-none Mereka merekomendasikan menggunakan overflow: disembunyikan di tempat ini.
• -moz-scrollbars-horizontal Mirip dengan overflow-x
• -moz-scrollbars-vertical Mirip dengan overflow-y

• -moz-hidden-unscrollableHanya berfungsi secara internal di dalam pengaturan profil pengguna. Nonaktifkan menggulir elemen root XML dan menonaktifkan menggunakan tombol panah dan roda mouse untuk menggulir halaman web.

• Dokumen Pengembang Mozilla di 'Overflow'

Rincian lebih lanjut tentang Mozilla

Sejauh ini saya tidak benar-benar berguna, tetapi perlu dicatat bahwa atribut yang mengontrol apakah scrollbar ditampilkan di Firefox adalah ( tautan referensi ):

• Atribut:        scrollbar
• Ketik:               nsIDOMBarProp
• Deskripsi:   Objek yang mengontrol apakah scrollbar ditampilkan di jendela atau tidak. Atribut ini "dapat diganti" dalam JavaScript. Baca saja

Terakhir, padding seperti sihir.

Seperti yang telah disebutkan sebelumnya dalam beberapa jawaban lain, berikut adalah ilustrasi yang cukup jelas.

Pelajaran sejarah

Hanya karena saya penasaran, saya ingin belajar tentang asal-usul scrollbar, dan ini adalah referensi terbaik yang saya temukan.

• 10 Penemuan pada Scrolling dan Scrollbars
• https://tools.ietf.org/id/draft-hellstrom-textpreview-02.txt
• https://tools.ietf.org/id/draft-mrose-blocks-service-01.txt

Lain-lain

Dalam konsep spesifikasi HTML5, seamlessatribut didefinisikan untuk mencegah bilah gulir muncul di iFrames sehingga mereka dapat dicampur dengan konten di sekitarnya pada halaman . Padahal elemen ini tidak muncul di revisi terbaru.

The scrollbarBarProp objek adalah anak dari windowobjek dan merupakan elemen antarmuka pengguna yang berisi mekanisme bergulir, atau beberapa konsep antarmuka yang mirip. window.scrollbars.visibleakan kembali truejika bilah gulir terlihat.

interface Window {
  // The current browsing context
  readonly attribute WindowProxy window;
  readonly attribute WindowProxy self;
           attribute DOMString name;
  [PutForwards=href] readonly attribute Location location;
  readonly attribute History history;
  readonly attribute UndoManager undoManager;
  Selection getSelection();
  [Replaceable] readonly attribute BarProp locationbar;
  [Replaceable] readonly attribute BarProp menubar;
  [Replaceable] readonly attribute BarProp personalbar;
  [Replaceable] readonly attribute BarProp scrollbars;
  [Replaceable] readonly attribute BarProp statusbar;
  [Replaceable] readonly attribute BarProp toolbar;
  void close();
  void focus();
  void blur();
  // Truncated

API Sejarah juga menyertakan fitur untuk pemulihan gulir pada navigasi halaman untuk mempertahankan posisi gulir pada pemuatan halaman.

window.history.scrollRestoration dapat digunakan untuk memeriksa status restorasi gulir atau mengubah statusnya (menambahkan ="auto"/"manual" . Otomatis adalah nilai default. Mengubahnya menjadi manual berarti Anda sebagai pengembang akan memiliki kepemilikan atas setiap perubahan gulir yang mungkin diperlukan saat pengguna menelusuri riwayat aplikasi Jika perlu, Anda dapat melacak posisi gulir saat mendorong entri riwayat dengan history.pushState ().

---

Bacaan lebih lanjut:

• Scrollbar di Wikipedia
• Bilah gulir (Windows)
• Metode Gulir
• Metode Gulir - Jaringan Microsoft Dev
• iScroll di Github (direferensikan di bagian pertama di atas)
• Menggulir dan Menggulirkan artikel tentang kegunaan oleh Jakob Nielsen

Contohnya

• Panel gulir independen tanpa gulir badan (hanya menggunakan CSS) - Ben Frain (10-21-2014)

Anda dapat melakukan ini dengan pembungkus divyang memiliki overflow tersembunyi, dan divset bagian dalam auto.

Untuk menghapus divbilah gulir bagian dalam , Anda dapat menariknya keluar dari divviewport luar dengan menerapkan margin negatif ke bagian dalam div. Kemudian oleskan padding yang sama ke div bagian dalam sehingga konten tetap terlihat.

JSFiddle

HTML

<div class="hide-scroll">
    <div class="viewport">
        ...
    </div>
</div>

CSS

.hide-scroll {
    overflow: hidden;
}

.viewport {
    overflow: auto;

    /* Make sure the inner div is not larger than the container
     * so that we have room to scroll.
     */
    max-height: 100%;

    /* Pick an arbitrary margin/padding that should be bigger
     * than the max width of all the scroll bars across
     * the devices you are targeting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}

Ini berfungsi untuk saya dengan properti CSS sederhana:

.container {
    -ms-overflow-style: none;  // Internet Explorer 10+
    scrollbar-width: none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

Untuk versi Firefox yang lebih lama, gunakan: overflow: -moz-scrollbars-none;

Inilah solusi saya, yang secara teoritis mencakup semua browser modern:

html {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

html::-webkit-scrollbar {
    width: 0px; /* For Chrome, Safari, and Opera */
}

html dapat diganti dengan elemen apa pun yang ingin Anda sembunyikan di scrollbar.

_{Catatan : Saya telah membaca 19 jawaban lainnya untuk melihat apakah kode yang saya posting sudah tercakup, dan sepertinya tidak ada satu jawaban yang meringkas situasi seperti yang terjadi pada 2019, meskipun banyak dari mereka masuk ke detail yang sangat baik. Mohon maaf jika ini telah dikatakan oleh orang lain dan saya melewatkannya.}

Saya pikir saya menemukan solusi untuk kalian jika Anda masih tertarik. Ini adalah minggu pertamaku, tapi itu berhasil untukku ...

<div class="contentScroller">
    <div class="content">
    </div>
</div>

.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}

Jika Anda mencari solusi untuk menyembunyikan bilah gulir untuk perangkat seluler, ikuti jawaban Peter !

Ini jsfiddle , yang menggunakan solusi di bawah ini untuk menyembunyikan scrollbar horizontal.

.scroll-wrapper{
    overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
}

Itu diuji pada tablet Samsung dengan Android 4.0.4 (Ice Cream Sandwich, baik di browser asli dan Chrome) dan pada iPad dengan iOS 6 (baik di Safari dan Chrome).

Gunakan properti CSSoverflow :

.noscroll {
  width: 150px;
  height: 150px;
  overflow: auto; /* Or hidden, or visible */
}

Berikut ini beberapa contoh lainnya:

• overflow-x, overflow-y tes
• Properti Overflow CSS

Seperti yang sudah dikatakan orang lain, gunakan CSS overflow.

Tetapi jika Anda masih ingin pengguna dapat menggulir konten itu (tanpa scrollbar terlihat) Anda harus menggunakan JavaScript.

Se jawaban saya di sini untuk solusi: Sembunyikan scrollbar sementara masih bisa gulir dengan mouse / keyboard

Selain jawaban Peter:

#element::-webkit-scrollbar {
    display: none;
}

Ini akan bekerja sama untuk Internet Explorer 10:

 #element {
      -ms-overflow-style: none;
 }

Pendekatan lintas peramban untuk menyembunyikan bilah gulir.

Itu diuji pada Edge, Chrome, Firefox, dan Safari

Sembunyikan bilah gulir saat masih dapat menggulir dengan roda mouse!

Codepen

/* Make parent invisible */
#parent {
    visibility: hidden;
    overflow: scroll;
}

/* Safari and Chrome specific style. Don't need to make parent invisible, because we can style WebKit scrollbars */
#parent:not(*:root) {
  visibility: visible;
}

/* Make Safari and Chrome scrollbar invisible */
#parent::-webkit-scrollbar {
  visibility: hidden;
}

/* Make the child visible */
#child {
    visibility: visible;
}

Jika Anda ingin menggulir agar berfungsi, sebelum menyembunyikan bilah gulir, pertimbangkan untuk mengaturnya. Versi modern OS X dan OS seluler memiliki bilah gulir yang, walaupun tidak praktis untuk dipegang dengan mouse, cukup indah dan netral.

Untuk menyembunyikan scrollbar, teknik oleh John Kurlak bekerja dengan baik kecuali untuk meninggalkan pengguna Firefox yang tidak memiliki touchpad tanpa cara untuk menggulir kecuali mereka memiliki mouse dengan roda, yang mungkin mereka lakukan, tetapi bahkan kemudian mereka biasanya hanya dapat menggulir secara vertikal .

Teknik John menggunakan tiga elemen:

• Elemen luar untuk menutupi scrollbar.
• Elemen tengah untuk memiliki scrollbar.
• Dan elemen konten untuk mengatur ukuran elemen tengah dan membuatnya memiliki scrollbar.

Harus dimungkinkan untuk mengatur ukuran elemen luar dan konten yang sama yang menghilangkan penggunaan persentase, tapi saya tidak bisa memikirkan hal lain yang tidak akan bekerja dengan tweaker yang tepat.

Kekhawatiran terbesar saya adalah apakah semua versi browser mengatur bilah gulir untuk membuat konten yang meluap terlihat. Saya telah menguji di browser saat ini, tetapi tidak pada browser yang lebih lama.

Maafkan SASS saya ; P

%size {
    // set width and height
}

.outer {
    // mask scrollbars of child
    overflow: hidden;
    // set mask size
    @extend %size;
    // has absolutely positioned child
    position: relative;
}

.middle {
    // always have scrollbars.
    // don't use auto, it leaves vertical scrollbar showing
    overflow: scroll;
    // without absolute, the vertical scrollbar shows
    position: absolute;
}
// prevent text selection from revealing scrollbar, which it only does on
// some webkit based browsers.
.middle::-webkit-scrollbar {
    display: none;
}

.content {
    // push scrollbars behind mask
    @extend %size;
}

Pengujian

OS X adalah 10.6.8. Windows adalah Windows 7.

• Firefox 32.0 Scrollbars disembunyikan. Tombol panah tidak menggulir, bahkan setelah mengklik untuk fokus, tetapi roda mouse dan dua jari di trackpad dapat melakukannya. OS X dan Windows.
• Chrome 37.0 Scrollbars disembunyikan. Tombol panah berfungsi setelah mengklik untuk fokus. Roda mouse dan trackpad berfungsi. OS X dan Windows.
• Internet Explorer 11 Scrollbars disembunyikan. Tombol panah berfungsi setelah mengklik untuk fokus. Roda mouse berfungsi. Windows.
• Safari 5.1.10 Scrollbars disembunyikan. Tombol panah berfungsi setelah mengklik untuk fokus. Roda mouse dan trackpad berfungsi. OS X.
• Android 4.4.4 dan 4.1.2. Scrollbar disembunyikan. Pekerjaan gulir sentuh. Mencoba di Chrome 37.0, Firefox 32.0, dan HTMLViewer di 4.4.4 (apa pun itu). Di HTMLViewer, halaman adalah ukuran konten yang di-mask dan bisa digulir juga! Menggulir berinteraksi dapat diterima dengan zoom halaman.

Saya hanya berpikir saya akan menunjukkan kepada orang lain yang membaca pertanyaan ini bahwa pengaturan overflow: hidden(atau overflow-y) padabody elemen tidak menyembunyikan scrollbar untuk saya.

Saya harus menggunakan htmlelemen.

Saya menulis versi WebKit dengan beberapa opsi seperti sembunyikan otomatis , versi kecil , gulir -y saja , atau hanya-x :

._scrollable{
    @size: 15px;
    @little_version_ratio: 2;
    @scrollbar-bg-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color-hover: rgba(0,0,0,0.3);
    @scrollbar-coner-color: rgba(0,0,0,0);

    overflow-y: scroll;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;

    &::-webkit-scrollbar {
        background: none;
        width: @size;
        height: @size;
    }

    &::-webkit-scrollbar-track {
        background-color:@scrollbar-bg-color;
        border-radius: @size;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: @size;
        background-color:@scrollbar-handler-color;
        &:hover{
            background-color:@scrollbar-handler-color-hover;
        }
    }

    &::-webkit-scrollbar-corner {
      background-color: @scrollbar-coner-color;
    }

    &.little{
        &::-webkit-scrollbar {
            background: none;
            width: @size / @little_version_ratio;
            height: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-track {
            border-radius: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: @size / @little_version_ratio;
        }
    }

    &.autoHideScrollbar{
        overflow-x: hidden;
        overflow-y: hidden;
        &:hover{
            overflow-y: scroll;
            overflow-x: scroll;
            -webkit-overflow-scrolling: touch;
            &.only-y{
                overflow-y: scroll !important;
                overflow-x: hidden !important;
            }

            &.only-x{
                overflow-x: scroll !important;
                overflow-y: hidden !important;
            }
        }
    }

    &.only-y:not(.autoHideScrollbar){
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }

    &.only-x:not(.autoHideScrollbar){
        overflow-x: scroll !important;
        overflow-y: hidden !important;
    }
}

http://codepen.io/hicTech/pen/KmKrjb

Salin kode CSS ini ke kode pelanggan untuk menyembunyikan bilah gulir:

<style>

    ::-webkit-scrollbar {
       display: none;
    }

    #element::-webkit-scrollbar {
       display: none;
    }

</style>

HTML saya seperti ini:

<div class="container">
  <div class="content">
  </div>
</div>

Tambahkan ini ke divtempat Anda ingin menyembunyikan scrollbar:

.content {
  position: absolute;
  right: -100px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 75%; /* This can be any value of your choice */
}

Dan tambahkan ini ke wadah

.container {
  overflow-x: hidden;
  max-height: 100%;
  max-width: 100%;
}

Untuk menonaktifkan bilah gulir vertikal, cukup tambahkan overflow-y:hidden; .

Temukan lebih banyak tentang itu: melimpah .

Jawaban saya akan bergulir bahkan ketika overflow:hidden; , menggunakan jQuery:

Misalnya, gulir secara horizontal dengan roda mouse:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
    $(function() {

       $("YourSelector").mousewheel(function(event, delta) {

          this.scrollLeft -= (delta * 30);
          event.preventDefault();
       });
    });
</script>

Saya yakin Anda dapat memanipulasinya dengan overflowatribut CSS, tetapi mereka memiliki dukungan browser yang terbatas. Satu sumber mengatakan itu Internet Explorer 5 (dan lebih baru), Firefox 1.5 (dan lebih baru), dan Safari 3 (dan lebih baru) - mungkin cukup untuk keperluan Anda.

Menggulir, Menggulir, Menggulir memiliki diskusi yang baik.

Saya mencoba segalanya dan yang paling berhasil untuk solusi saya adalah selalu memiliki tampilan scrollbar vertikal, dan kemudian menambahkan beberapa margin negatif untuk menyembunyikannya.

body {
  overflow-y: scroll;
  margin-right: -20px;
}