Sembunyikan bilah gulir, tetapi selagi masih bisa gulir


1129

Saya ingin dapat menggulir seluruh halaman, tetapi tanpa bilah gulir ditampilkan.

Di Google Chrome:

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

Tetapi Mozilla Firefox dan Internet Explorer sepertinya tidak berfungsi seperti itu.

Saya juga mencoba ini di CSS:

overflow: hidden;

Itu menyembunyikan bilah gulir, tetapi saya tidak dapat menggulir lagi.

Apakah ada cara saya bisa menghapus scrollbar sementara masih bisa menggulir seluruh halaman?

Hanya dengan CSS atau HTML saja.

Jawaban:


788

Hanya sebuah tes yang berfungsi dengan baik.

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

Biola yang Bekerja

JavaScript:

Karena lebar bilah gulir berbeda di peramban yang berbeda, lebih baik menanganinya dengan JavaScript. Jika Anda melakukannya Element.offsetWidth - Element.clientWidth, lebar bilah gulir yang tepat akan muncul.

JavaScript Biola Bekerja

Atau

Menggunakan Position: absolute,

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

Biola yang Bekerja

JavaScript Biola Bekerja

Informasi:

Berdasarkan jawaban ini, saya membuat plugin gulir sederhana .


16
Dalam "biola kerja" terakhir Anda, saya telah melihat terlalu banyak !importantsehingga saya menghapus semuanya: jsfiddle.net/5GCsJ/954
Roko C. Buljan

2
Solusi ini tidak berfungsi ketika lebar konten diatur ke otomatis. saat menggulir ke kanan, sebagian konten masih tidak terlihat. Mengapa demikian? Ada solusi? Lihat masalahnya di sini: jsfiddle.net/50fam5g9/7 Catatan: lebar konten tidak dapat diketahui sebelumnya dalam kasus saya itu sebabnya harus diatur ke otomatis.
Sprout Coder

35
Pendekatan ini tidak akan mencakup semua browser, dan akan sangat spesifik untuk versi browser yang Anda gunakan selama pengembangan.
Itsik Avidan

2
Bagaimana dengan bilah gulir horizontal? Bagaimana Anda bisa menyembunyikannya?
www139

11
Mengapa menyulitkan dan menghitung lebar bilah gulir? Cukup tetapkan box-sizing: border-box; width: calc(100% + 50px);dan nilai yang sama untuk bantalan. Tidak ada peramban yang memiliki lebar / tinggi scrollbar 50px, jadi cukup tutupi semuanya ...
Robert Koritnik

362

Mudah di WebKit, dengan gaya opsional:

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

1
mencoba ini di cordovaaplikasi, bekerja dengan baik. harus diterapkan overflow:scrollke elemen.
Kishor Pawar

41
Tidak berfungsi di Firefox, Cukup jelas karena ini murni menyatakan webkit. Terima kasih :)
Zohair

3
berfungsi sangat baik di aplikasi Electron seperti yang diharapkan karena mereka chromium. +1 terima kasih: D
rococo

Sejak iOS8, ini tidak berfungsi saat digunakan dengan-webkit-overflow-scrolling: touch
aleclarson

4
ini bekerja dengan chrome. tetapi tidak bekerja dengan mozilla firefox.
romal tandel

299

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;


13
Bagi saya, overflow: -moz-scrollbars-nonemenyembunyikan bilah gulir di Firebox tetapi juga menonaktifkan gulir. Bisakah Anda memberikan demo di mana ini bekerja untuk Anda?
chipit24

1
Sayangnya, -moz-scrollbars-noneproperti ini dihapus untuk versi Firefox terbaru: developer.mozilla.org/en-US/docs/Web/CSS/overflow
Hristo Eftimov

2
Sejak iOS8, ini tidak berfungsi saat digunakan dengan-webkit-overflow-scrolling: touch
aleclarson

3
Untuk Firefox usang -moz-scrollbars-nonedapat Anda gunakan @-moz-document url-prefix() { .container { overflow: hidden; } }. Lihat stackoverflow.com/questions/952861/… .
Martin Ždila

1
Saya telah memperbarui jawaban saya dengan dukungan terbaru untuk Firefox :)
Hristo Eftimov

292

MEMPERBARUI:

Firefox sekarang mendukung menyembunyikan bilah gulir dengan CSS, sehingga semua peramban utama sekarang tercakup (Chrome, Firefox, Internet Explorer, Safari, dll.).

Cukup terapkan CSS berikut ini ke elemen yang ingin Anda hapus dari scrollbar:

.container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

Ini adalah solusi peramban lintas paling tidak hack yang saat ini saya ketahui. Lihat demo.


JAWABAN ASLI:

Inilah cara lain yang belum disebutkan. Ini sangat sederhana dan hanya melibatkan dua divs dan CSS. Tidak diperlukan JavaScript atau CSS eksklusif, dan ia berfungsi di semua browser. Tidak perlu mengatur lebar wadah secara eksplisit, sehingga membuatnya cair.

Metode ini menggunakan margin negatif untuk memindahkan bilah gulir keluar dari induk dan kemudian jumlah padding yang sama untuk mendorong konten kembali ke posisi semula. Teknik ini berfungsi untuk pengguliran vertikal, horizontal dan dua arah.

Demo:

Kode contoh untuk versi vertikal:

HTML:

<div class="parent">
  <div class="child">
    Your content.
  </div>
</div>

CSS:

.parent {
  width: 400px;
  height: 200px;
  border: 1px solid #AAA;
  overflow: hidden;
}

.child {
  height: 100%;
  margin-right: -50px; /* Maximum width of scrollbar */
  padding-right: 50px; /* Maximum width of scrollbar */
  overflow-y: scroll;
}

39
Saya tahu ini adalah jawaban baru untuk pertanyaan lama, tetapi ini harus menjadi jawaban yang diterima sekarang. Pria yang baik.
Vektor

3
Ini benar-benar jawaban terbaik, tangan ke bawah. Sekarang, bagaimana cara memodifikasinya untuk menyembunyikan scrollbar horizontal?
CeeMoney

1
@CeeMoney Saya menambahkan demo horisontal. Untuk elemen konten dengan lebar tetap seperti gambar, itu hanya berfungsi tetapi untuk teks Anda harus menonaktifkan pembungkus.
Richrd

1
@Richrd - terima kasih banyak untuk demo - bekerja dengan sempurna. Tidak tahu mengapa kita semua membuatnya begitu sulit tetapi ini sangat sederhana, saya merasa konyol karena tidak melakukan ini sebelumnya.
CeeMoney

4
@Richrd terima kasih! Saya senang saya menggulir ke jawaban Anda. Jika SO memiliki "jawaban yang diterima secara paksa", saya akan menggunakannya sekarang.
Martin D

78

Menggunakan:

<div style='overflow:hidden; width:500px;'>
   <div style='overflow:scroll; width:508px'>
      My scroll-able area
   </div>
</div>

Ini adalah trik untuk agak menindih scrollbar dengan div yang tumpang tindih yang tidak memiliki bilah gulir:

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

Ini hanya untuk browser WebKit ... Atau Anda dapat menggunakan konten CSS khusus peramban (jika ada di masa mendatang). Setiap browser dapat memiliki properti yang berbeda dan spesifik untuk bilahnya masing-masing.

Untuk penggunaan Microsoft Edge: -ms-overflow-style: -ms-autohiding-scrollbar;atau -ms-overflow-style: none;sebagai per MSDN .

Tidak ada padanan untuk Firefox. Walaupun ada plugin jQuery untuk mencapai ini, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html


ictacademie.info/oussamaelbachiri situs ini @Oussama Dobby menggunakan media = 'layar' lalu ':: - properti webkit-scrollbar' untuk css
Arpit Singh

Dan apa sifat spesifik css?
Oussama el Bachiri

Entah tata letak yang rapuh atau jquery adalah alternatif
Arpit Singh

Solusi pertama Anda memberi saya masalah ini s24.postimg.org/idul8zx9w/Naamloos.jpg Dan apa yang Anda maksud dengan layout hacky @ArpitSingh
Oussama el Bachiri

4
Berikut ini memungkinkan saya untuk mengaktifkan penggulir asli di Cordova dengan jQuery Mobile 1.4 di iOS7 & iOS8 // CSS ::-webkit-scrollbar { display: none; } .ui-content { -webkit-overflow-scrolling: touch; } // jQuery Mobile onMobileInit () $.mobile.touchOverflowEnabled = true;
Ryan Williams

33

Jawaban ini tidak termasuk kode, jadi di sini adalah solusi dari halaman :

Menurut halaman, pendekatan ini tidak perlu mengetahui lebar scrollbar sebelumnya untuk dapat bekerja dan solusinya juga bekerja untuk semua browser, dan dapat dilihat di sini .

Hal yang baik adalah bahwa Anda tidak dipaksa untuk menggunakan perbedaan padding atau lebar untuk menyembunyikan scrollbar.

Ini juga aman untuk zoom. Solusi bantalan / lebar menunjukkan bilah gulir bila diperbesar hingga minimum.

Perbaikan Firefox: http://jsbin.com/mugiqoveko/1/edit?output

.element,
.outer-container {
  width: 200px;
  height: 200px;
}
.outer-container {
  border: 5px solid purple;
  position: relative;
  overflow: hidden;
}
.inner-container {
  position: absolute;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-right: 150px;
}
.inner-container::-webkit-scrollbar {
  display: none;
}
<div class="outer-container">
  <div class="inner-container">
    <div class="element">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut
      dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique
      aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie
      vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies.
    </div>
  </div>
</div>


Ini tidak akan berfungsi untuk semua browser ... Hanya browser webkit. Anda menggunakan pemilih khusus webkit::-webkit-scrollbar {}
Awalan

Saya mengujinya di semua browser baru sebelum saya menjawab pertanyaan. Juga FF. Telah terjadi beberapa perubahan dalam FF?
Timo Kähkönen

Saya memperbarui jawabannya. Tampaknya menambahkan padding-right: 150px;perbaikan itu. Diuji dalam FF, Chrome, Safari dan Edge. Berfungsi juga dalam level zoom rendah karena bantalan kanan yang besar.
Timo Kähkönen

2
Edge, IE 11, IE10 (mungkin lebih rendah juga) mendukung html { -ms-overflow-style: none;}. Di browser ini tidak perlu menggunakan padding-hack.
Timo Kähkönen

Harus menggunakan jawaban @ Timo dan overflow-y: scrolluntuk mendapatkan perilaku gulir tetapi disembunyikan (seperti Chrome) untuk membuatnya bekerja di Edge23.
jojo

21

Cukup gunakan tiga baris berikut dan masalah Anda akan terpecahkan:

#liaddshapes::-webkit-scrollbar {
    width: 0 !important;
}

Di mana liaddshapes adalah nama div di mana gulir akan datang.


Tunjukkan masalah Anda pada biola
Innodel

1
Mudah dan bermanfaat, terima kasih! Saya menggunakan {display: none} alih-alih {width: 0;} dan juga berfungsi
Santi Nunez

2
Tidak berfungsi di MS Edge atau Firefox.
Dpedrinha

18

Ini berfungsi untuk saya lintas browser. Namun, ini tidak menyembunyikan bilah gulir asli di peramban seluler.

Dalam SCSS

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
  &::-webkit-scrollbar { /** WebKit */
    display: none;
  }
}

Dalam CSS

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
}
.hide-native-scrollbar::-webkit-scrollbar { /** WebKit */
  display: none;
}

Apa {}maksud dari blok bersarang ( )? Bagaimana cara menafsirkannya? Dan &? Mungkin menguraikan jawaban Anda?
Peter Mortensen

Ini adalah hal SASS (tampaknya, KURANG juga): css-tricks.com/the-sass-ampersand
vipatron

@PeterMortensen Saya baru saja melihat komentar Anda sekarang, &::-webkit-scrollbarmenjadi .hide-native-scrollbar::-webkit-scrollbar { }di CSS
Murhaf Sousli

lakukan saja { width: 0; height: 0;}untuk :: - webkit-scrollbar alih-alih display: noneuntuk iOS.
adriendenat

Dalam FF71 ini memblokir semua gulir.
gen b.

11

Berikut ini berfungsi untuk saya di Microsoft, Chrome, dan Mozilla untuk elemen div tertentu:

div.rightsidebar {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar { 
    width: 0 !important;
}

perhatikan bahwa scrollbar-width(hanya FF) ditandai sebagai "percobaan"
cimak

Ya @cimak, tetapi pada FF Anda dapat menyembunyikannya tanpa masalah, jadi benar-benar hanya digunakan untuk Chrome.
Meloman

9

HTML:

<div class="parent">
    <div class="child">
    </div>
</div>

CSS:

.parent{
    position: relative;
    width: 300px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}

.child {
    height: 150px;   
    width: 318px;
    overflow-y: scroll;
}

Terapkan CSS yang sesuai.

Periksa di sini (diuji di Internet Explorer dan Firefox).


8

Pada 11 Desember 2018 (Firefox 64 ke atas), jawaban atas pertanyaan ini memang sangat sederhana karena Firefox 64+ sekarang mengimplementasikan spec CSS Scrollbar Styling .

Cukup gunakan CSS berikut:

scrollbar-width: none;

Firefox 64 rilis catatan di sini .


3
Ini sangat menyenangkan untuk diketahui! Sepertinya browser memang membuat kemajuan, haha!
Oussama el Bachiri

7

Menggunakan:

CSS

#subparent {
    overflow: hidden;
    width: 500px;
    border: 1px rgba(0, 0, 0, 1.00) solid;
}

#parent {
    width: 515px;
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 10%;
}

#child {
    width: 511px;
    background-color: rgba(123, 8, 10, 0.42);
}

HTML

<body>
    <div id="subparent">
        <div id="parent">
            <div id="child">
                <!- Code here for scroll ->
            </div>
        </div>
     </div>
</body>

Tidak yakin mengapa ini dibatalkan, tetapi saya hanya memutarnya karena berjalan ke arah yang benar, solusi lain tidak benar-benar berfungsi dengan baik dalam kasus saya. overflow-x: disembunyikan; + overflow-y: gulir; adalah apa triknya, bersama dengan lebar> 100% (110% dalam kasus saya bekerja dengan baik).
dAngelov

1
itu adalah hal yang sama dengan solusi paling upvoted: mencoba untuk menyembunyikan scrollbar. ini tidak ideal karena bervariasi dengan browser
mwm

6

Menggunakan

function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // Firefox, Chrome
    document.body.scroll = "yes"; // Internet Explorer only
}

function unloadScrollBars() {
    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
    document.body.scroll = "no"; // Internet Explorer only
}

Panggil fungsi-fungsi ini untuk setiap titik yang ingin Anda muat atau keluarkan atau muat ulang scrollbar. Itu masih dapat digulir di Chrome saat saya mengujinya di Chrome, tetapi saya tidak yakin dengan peramban lain.


6

Ini bekerja untuk saya:

scroll-content {
    overflow-x: hidden;
    overflow-y: scroll;
}

scroll-content::-webkit-scrollbar {
    width: 0;
}

5

Pada browser modern, Anda dapat menggunakan wheel event:

// Content is the element you want to apply the wheel scroll effect to
content.addEventListener('wheel', function(e) {
    const step = 100; // How many pixels to scroll

    if (e.deltaY > 0) // Scroll down
        content.scrollTop += step;
    else // Scroll up
        content.scrollTop -= step;
});

Ini jawaban yang saya cari. Terima kasih. Saya menggunakan overflow: hiddendan kode ini, untuk mat-card-content(dalam sudut 5, tentu saja) yang dapat digulir dan ini memecahkan masalah saya. Catatan: Saya menggunakan e.deltaYsebagai saya stepdan itu berfungsi seperti scrolling biasa, jadi saya pikir untuk scrolling normal tetapi dengan scrollbar tersembunyi, ini adalah yang paling cocok.
imans77

1
halaman yang ditautkan di sini memperingatkan bahwa pendekatan ini tidak tepat?
jnnnnn

5

Masalah saya: Saya tidak ingin gaya apa pun dalam konten HTML saya. Saya ingin tubuh saya langsung dapat digulir tanpa scrollbar apa pun, dan hanya gulungan vertikal, yang bekerja dengan kisi - kisi CSS untuk ukuran layar apa pun.

The box-sizing nilai dampak bantalan atau marjin solusi, mereka bekerja dengan box-sizing: konten-kotak .

Saya masih membutuhkan arahan "-moz-scrollbars-none", dan seperti gdoron dan Mr_Green, saya harus menyembunyikan scrollbar. Saya mencoba -moz-transformdan -moz-padding-start, untuk memengaruhi hanya Firefox, tetapi ada efek samping responsif yang membutuhkan terlalu banyak pekerjaan.

Solusi ini berfungsi untuk konten tubuh HTML dengan gaya "display: grid", dan responsif.

/* Hide HTML and body scroll bar in CSS grid context */
html, body {
  position: static; /* Or relative or fixed ... */
  box-sizing: content-box; /* Important for hidding scrollbar */
  display: grid; /* For CSS grid */

  /* Full screen */
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
}

html {
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  overflow: -moz-scrollbars-none; /* Should hide the scroll bar */
}

/* No scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none; /* Might be enough */
  background: transparent;
  visibility: hidden;
  width: 0px;
}

/* Firefox only workaround */
@-moz-document url-prefix() {
  /* Make HTML with overflow hidden */
  html {
    overflow: hidden;
  }

  /* Make body max height auto */
  /* Set right scroll bar out the screen  */
  body {
    /* Enable scrolling content */
    max-height: auto;

    /* 100vw +15px: trick to set the scroll bar out the screen */
    width: calc(100vw + 15px);
    min-width: calc(100vw + 15px);
    max-width: calc(100vw + 15px);

    /* Set back the content inside the screen */
    padding-right: 15px;
  }
}

body {
  /* Allow vertical scroll */
  overflow-y: scroll;
}

4

Menambahkan padding ke bagian dalam div, seperti pada jawaban yang saat ini diterima, tidak akan berfungsi jika karena alasan tertentu Anda ingin menggunakan box-model: border-box.

Apa yang berhasil di kedua kasus adalah meningkatkan lebar bagian dalam divhingga 100% plus lebar scrollbar (dengan asumsi overflow: hiddenpada bagian luar).

Misalnya, dalam CSS:

.container2 {
    width: calc(100% + 19px);
}

Dalam JavaScript, lintas-browser:

var child = document.getElementById('container2');
var addWidth = child.offsetWidth - child.clientWidth + "px";
child.style.width = 'calc(100% + ' + addWidth + ')';

4

Ini adalah bagaimana saya melakukannya untuk gulir horizontal; hanya CSS dan berfungsi baik dengan kerangka kerja seperti Bootstrap / col- *. Hanya perlu dua ekstra divdan induk dengan satu widthatau max-widthset:

Anda dapat memilih teks untuk membuatnya gulir atau gulir dengan jari jika Anda memiliki layar sentuh.

.overflow-x-scroll-no-scrollbar {
    overflow: hidden;
}
.overflow-x-scroll-no-scrollbar div {
    overflow-x: hidden;
    margin-bottom: -17px;
    overflow-y: hidden;
    width: 100%;
}
.overflow-x-scroll-no-scrollbar div * {
    overflow-x: auto;
    width: 100%;
    padding-bottom: 17px;
    white-space: nowrap;
    cursor: pointer
}

/* The following classes are only here to make the example looks nicer */
.row {
    width: 100%
}
.col-xs-4 {
    width: 33%;
    float: left
}
.col-xs-3 {
    width:25%;
    float:left
}
.bg-gray {
    background-color: #DDDDDD
}
.bg-orange {
    background-color:#FF9966
}
.bg-blue {
    background-color: #6699FF
}
.bg-orange-light{
    background-color: #FFAA88
}
.bg-blue-light{
    background-color: #88AAFF
}
<html><body>
  <div class="row">
    <div class="col-xs-4 bg-orange">Column 1</div>
    <div class="col-xs-3 bg-gray">Column 2</div>
    <div class="col-xs-4 bg-blue">Column 3</div>
  </div>
  <div class="row">
    <div class="col-xs-4 bg-orange-light">Content 1</div>
    <div class="col-xs-3 overflow-x-scroll-no-scrollbar">
      <div>
        <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
      </div>
    </div>
    <div class="col-xs-4 bg-blue-light">Content 3</div>
  </div>
</body></html>

Versi singkat untuk orang malas:

.overflow-x-scroll-no-scrollbar {
    overflow: hidden;
}
.overflow-x-scroll-no-scrollbar div {
  overflow-x: hidden;
  margin-bottom: -17px;
  overflow-y: hidden;
  width: 100%;
}
.overflow-x-scroll-no-scrollbar div * {
  overflow-x: auto;
  width: 100%;
  padding-bottom: 17px;
  white-space: nowrap;
  cursor:pointer
}

/* The following classes are only here to make the example looks nicer */
.parent-style {
    width: 100px;
    background-color: #FF9966
}
<div class="parent-style overflow-x-scroll-no-scrollbar">
  <div>
    <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
  </div>
</div>


Terima kasih, saya mencoba, ini bekerja dengan baik. Satu hal yang lebih baik untuk berubah margin-bottommenjadi padding-bottomtetapi dengan nilai yang sama. Ini tidak akan memakan ruang di bawah untuk elemen di bagian bawah. Ini mencegah tumpang tindih.
haxpor

@haxpor Ini margin-bottomnegatif, saya pikir itu tidak dapat diubah menjadi padding-bottom, yang tidak dapat menangani nilai
Jean

4

Penataan SASS berikut ini akan membuat bilah gulir Anda transparan di sebagian besar browser (Firefox tidak didukung):

.hide-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;

  &::-webkit-scrollbar {
    width: 1px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
}

3

Saya kebetulan mencoba solusi di atas dalam proyek saya dan untuk beberapa alasan saya tidak dapat menyembunyikan scroll bar karena posisi div. Oleh karena itu, saya memutuskan untuk menyembunyikan bilah gulir dengan memperkenalkan div yang menutupnya secara dangkal. Contoh di bawah ini untuk bilah gulir horizontal:

<div id="container">
  <div id="content">
     My content that could overflow horizontally
  </div>
  <div id="scroll-cover">
     &nbsp; 
  </div>
</div>

CSS yang sesuai adalah sebagai berikut:

#container{
   width: 100%;
   height: 100%;
   overflow: hidden;
   position: relative;
}

#content{
  width: 100%;
  height: 100%;
  overflow-x: scroll;
}
#scroll-cover{
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: 0;
  background-color: #fff; /*change this to match color of page*/
}

3

Ini akan berada di badan:

<div id="maincontainer" >
<div id="child">this is the 1st step</div>
<div id="child">this is the 2nd step</div>
<div id="child">this is the 3rd step</div>

Dan ini adalah CSS:

#maincontainer
{
    background: grey;
    width: 101%;
    height: 101%;
    overflow: auto;
    position: fixed;
}

#child
{
    background: white;
    height:500px;
}

3

Ini adalah solusi divitis-esque yang seharusnya tidak berfungsi untuk semua peramban ...

Markupnya adalah sebagai berikut dan perlu berada di dalam sesuatu dengan posisi relatif (dan lebarnya harus diatur, misalnya 400 piksel):

<div class="hide-scrollbar">
    <div class="scrollbar">
        <div class="scrollbar-inner">

        </div>
    </div>
</div>

CSS:

.hide-scrollbar {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.scrollbar {
    overflow-y: scroll;
    position: absolute;
    top: 0;
    left: 0;
    right: -50px;
    bottom: 0;
}

.scrollbar-inner {
    width: 400px;
}

3

The perfect-scrollbarPlugin tampaknya menjadi cara untuk pergi, lihat: https://github.com/noraesae/perfect-scrollbar

Ini adalah solusi berbasis JavaScript yang terdokumentasi dengan baik dan lengkap untuk masalah scrollbar.

Halaman demo: http://noraesae.github.io/perfect-scrollbar/


2
Saya tidak bisa melihat bagaimana ini terkait dengan pertanyaan?
Chris Nevill

3
Telah menatap sempurna-scrollbar selama 2 menit tanpa pemberitahuan langsung bagaimana menggunakannya untuk menyembunyikan scrollbar . Jika Anda memperluas jawaban Anda tentang topik itu, saya yakin Anda akan mendapatkan lebih banyak suara.
Christiaan Westerbeek

3

Anda dapat menggunakan kode di bawah ini untuk menyembunyikan bilah gulir, tetapi masih dapat menggulir:

.element::-webkit-scrollbar { 
    width: 0 !important 
}

3

Untuk menyembunyikan bilah gulir untuk elemen dengan penggunaan konten meluap.

.div{

  scrollbar-width: none; /* The most elegant way for Firefox */

}    

Dukungan praktis tidak ada kecuali untuk FF seperti yang Anda sebutkan dengan terlalu sedikit untuk apa yang diminta OP. Periksa caniuse.com/#feat=mdn-css_properties_scrollbar-width
Adrien

@Adrien Nah, pertanyaan awal menyatakan bahwa mereka memiliki solusi untuk browser lain. (Tapi Mozilla Firefox dan Internet Explorer sepertinya tidak berfungsi seperti itu) katanya, itulah alasan saya memberikan Solusi Firefox.
Alvin Moyo

Saya menemukan ini bekerja dengan baik ketika dikombinasikan dengan yang setara: div :: - webkit-scrollbar {display: none; } untuk Webkit / Chrome.
Sean Halls

2

Jenis lain dari pendekatan peretasan adalah untuk melakukan overflow-y: hiddendan kemudian gulir secara manual elemen dengan sesuatu seperti ini:

function detectMouseWheelDirection(e) {
  var delta = null, direction = false;
  if (!e) { // If the event is not provided, we get it from the window object
    e = window.event;
  }
  if (e.wheelDelta) { // Will work in most cases
    delta = e.wheelDelta / 60;
  } else if (e.detail) { // Fallback for Firefox
    delta = -e.detail / 2;
  }
  if (delta !== null) {
    direction = delta > 0 ? -200 : 200;
  }
  return direction;
}

if (element.addEventListener) {
  element.addEventListener('DOMMouseScroll', function(e) {
    element.scrollBy({
      top: detectMouseWheelDirection(e),
      left: 0,
      behavior: 'smooth'
    });
  });
}

Ada artikel bagus tentang cara mendeteksi dan menangani onmousewheelperistiwa di blog deepmikoto . Ini mungkin bekerja untuk Anda, tetapi ini jelas bukan solusi yang elegan.


2

Saya hanya ingin berbagi cuplikan gabungan untuk menyembunyikan bilah gulir yang saya gunakan saat mengembangkan. Ini adalah kumpulan beberapa cuplikan yang ditemukan di Internet yang berfungsi untuk saya:

.container {
    overflow-x: scroll; /* For horiz. scroll, otherwise overflow-y: scroll; */

    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    scrollbar-width: none;
}


.container::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}

1

Biola kerja sederhana lainnya :

#maincontainer {
    background: orange;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

#childcontainer {
    background: yellow;
    position: relative;
    width: 200px;
    height: 200px;
    top: 20px;
    left: 20px;
    overflow: auto;
}

Overflow tersembunyi di wadah induk, dan overflow otomatis di wadah anak. Sederhana.


Ini tidak menyembunyikan bilah gulir, itu hanya mendorongnya keluar dari pandangan dengan nilai "kiri".
robertmiles3

@ robertmiles3 bukankah itu hal yang sama? bersembunyi dan tidak bisa melihat?
Bryan Willis

1
@ robertmiles3 jawaban yang dipilih di atas melakukan hal yang sama dari kanan. Sepertinya semua solusi diretas hingga FIrefox memutuskan untuk mengizinkan CSS menyembunyikan bilah gulir lagi. blogs.msdn.com/b/kurlak/archive/2013/11/03/...
geoyws

Saya harus setuju. Ini adalah solusi serupa yang diusulkan oleh jawaban yang diterima. Jika berhasil, itu akan berhasil. terbalik
JSON

1

Solusi rumit ini bekerja bahkan pada browser web IE lama

Ini solusi untuk [ scrollbar vertikal ]

<html>
<head>
<style>
html,body{
         overflow:-moz-scrollbars-vertical;
         overflow-x:hidden;
         overflow-y:hidden;
         height:100%;
         margin:0 0 0 0
         }
</style>
</head>
<body id=body
      style="overflow:auto;
             height:100%" 
      onload="document.getElementById('body').style.width=document.body.offsetWidth+20+'px'">
//your stuff here
</body> 
</html>

Coba saja: jsfiddle


0

Cukup atur lebar lebar anak menjadi 100%, padding hingga 15 piksel, overflow-xuntuk menggulir dan overflow:hiddenuntuk induk dan lebar apa pun yang Anda inginkan.

Ini berfungsi dengan baik di semua browser utama, termasuk Internet Explorer dan Edge dengan pengecualian Internet Explorer 8 dan yang lebih rendah.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.