Sembunyikan bilah gulir, tetapi selagi masih bisa gulir

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.

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 .

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;
}

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;

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:

• Vertikal
• Horisontal
• Kedua arah

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;
}

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

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>

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.

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;
}

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;
}

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).

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 .

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>

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.

Ini bekerja untuk saya:

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

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

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;
});

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;
}

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 + ')';

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>

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;
  }
}

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*/
}

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;
}

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;
}

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/

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

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

Untuk menyembunyikan bilah gulir untuk elemen dengan penggunaan konten meluap.

.div{

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

}    

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.

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 */
}

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.

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

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.