Ocultar barra de rolagem, mas enquanto continua sendo capaz de rolar

Quero poder rolar a página inteira, mas sem que a barra de rolagem seja exibida.

No Google Chrome, é:

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

Mas o Mozilla Firefox e o Internet Explorer não parecem funcionar assim.

Eu também tentei isso em CSS:

overflow: hidden;

Isso oculta a barra de rolagem, mas não posso mais rolar.

Existe uma maneira de remover a barra de rolagem enquanto ainda consigo rolar a página inteira?

Com apenas CSS ou HTML, por favor.

Apenas um teste que está funcionando bem.

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

Violino de trabalho

JavaScript:

Como a largura da barra de rolagem difere em diferentes navegadores, é melhor lidar com isso com JavaScript. Se o fizer Element.offsetWidth - Element.clientWidth, a largura exata da barra de rolagem será exibida.

JavaScript Working Fiddle

Ou

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

Violino de trabalho

JavaScript Working Fiddle

Em formação:

Com base nesta resposta, criei um plugin de rolagem simples .

É fácil no WebKit, com estilo opcional:

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

Isso funciona para mim com propriedades simples de CSS:

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

Para versões mais antigas do Firefox, use: overflow: -moz-scrollbars-none;

ATUALIZAR:

O Firefox agora suporta ocultar barras de rolagem com CSS, para que todos os principais navegadores estejam cobertos (Chrome, Firefox, Internet Explorer, Safari etc.).

Basta aplicar o seguinte CSS ao elemento do qual você deseja remover as barras de rolagem:

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

Esta é a solução menos hacker entre navegadores que eu conheço atualmente. Confira a demonstração.

RESPOSTA ORIGINAL:

Aqui está outra maneira que ainda não foi mencionada. É realmente simples e envolve apenas duas divs e CSS. Nenhum JavaScript ou CSS proprietário é necessário e funciona em todos os navegadores. Também não é necessário definir explicitamente a largura do contêiner, tornando-o fluido.

Esse método usa uma margem negativa para mover a barra de rolagem para fora do pai e, em seguida, a mesma quantidade de preenchimento para empurrar o conteúdo de volta à sua posição original. A técnica funciona para rolagem vertical, horizontal e bidirecional.

Demonstrações:

• Vertical
• Horizontal
• Ambas direcoes

Código de exemplo para a versão vertical:

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

Usar:

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

Este é um truque para sobrepor um pouco a barra de rolagem a uma div sobreposta que não possui nenhuma barra de rolagem:

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

Isso é apenas para navegadores WebKit ... Ou você pode usar conteúdo CSS específico do navegador (se houver algum no futuro). Todo navegador pode ter uma propriedade diferente e específica para suas respectivas barras.

Para o Microsoft Edge, use: -ms-overflow-style: -ms-autohiding-scrollbar;ou -ms-overflow-style: none;conforme o MSDN .

Não há equivalente para o Firefox. Embora exista um plugin jQuery para isso, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

Esta resposta não inclui o código, então aqui está a solução da página :

De acordo com a página, essa abordagem não precisa saber a largura da barra de rolagem antes do tempo para funcionar e a solução funciona para todos os navegadores também, e pode ser vista aqui .

O bom é que você não é forçado a usar diferenças de preenchimento ou largura para ocultar a barra de rolagem.

Esse zoom também é seguro. As soluções de preenchimento / largura mostram a barra de rolagem quando ampliada ao mínimo.

Correção do 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>

Basta seguir as três linhas a seguir e seu problema será resolvido:

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

Onde liaddshapes é o nome da div em que o scroll está chegando.

Isso funciona para mim em vários navegadores. No entanto, isso não oculta barras de rolagem nativas em navegadores móveis.

No SCSS

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

Em CSS

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

O seguinte estava trabalhando para mim no Microsoft, Chrome e Mozilla para um elemento div específico:

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

Aplique CSS de acordo.

Verifique aqui (testado no Internet Explorer e Firefox).

A partir de 11 de dezembro de 2018 (Firefox 64 e superior), a resposta a essa pergunta é muito simples, pois o Firefox 64+ agora implementa a especificação CSS Scrollbar Styling .

Basta usar o seguinte CSS:

scrollbar-width: none;

Link da nota de versão do Firefox 64 aqui .

Usar:

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>

Usar

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
}

Chame essas funções para qualquer ponto que você queira carregar, descarregar ou recarregar as barras de rolagem. Ele ainda pode ser rolado no Chrome quando o testei no Chrome, mas não tenho certeza dos outros navegadores.

Isso funciona para mim:

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

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

Nos navegadores modernos, você pode usar 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;
});

Meu problema: não quero nenhum estilo no meu conteúdo HTML. Quero que meu corpo seja rolado diretamente sem nenhuma barra de rolagem e apenas uma rolagem vertical, trabalhando com grades CSS para qualquer tamanho de tela.

O valor do tamanho da caixa afeta as soluções de preenchimento ou margem, elas funcionam com o tamanho da caixa: caixa de conteúdo .

Eu ainda preciso da diretiva "-moz-scrollbars-none" e, como gdoron e Mr_Green, tive que ocultar a barra de rolagem. Eu tentei -moz-transforme -moz-padding-start, impactar apenas o Firefox, mas houve efeitos colaterais responsivos que precisavam de muito trabalho.

Esta solução funciona para o conteúdo do corpo HTML com o estilo "display: grid" e é responsiva.

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

Adicionar preenchimento a um interior div, como na resposta atualmente aceita, não funcionará se, por algum motivo, você desejar usar box-model: border-box.

O que funciona nos dois casos é aumentar a largura do interior divpara 100% mais a largura da barra de rolagem (assumindo overflow: hiddena div externa).

Por exemplo, em CSS:

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

Em JavaScript, entre navegadores:

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

É assim que faço para rolagem horizontal; apenas CSS e funciona bem com estruturas como o Bootstrap / col- *. Ele precisa apenas de dois divs extras e o pai com um widthou max-widthconjunto:

Você pode selecionar o texto para fazer rolagem ou rolagem com os dedos, se tiver uma tela sensível ao toque.

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

Versão curta para pessoas preguiçosas:

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

O seguinte estilo SASS deve tornar sua barra de rolagem transparente na maioria dos navegadores (o Firefox não é suportado):

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

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

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

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

Por acaso, tentei as soluções acima em meu projeto e, por algum motivo, não consegui ocultar a barra de rolagem devido ao posicionamento da div. Por isso, decidi ocultar a barra de rolagem introduzindo uma div que a cobre superficialmente. O exemplo abaixo é para uma barra de rolagem horizontal:

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

CSS correspondente é o seguinte:

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

Isso estará no corpo:

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

E este é o CSS:

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

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

Esta é uma solução de estilo divítico que, no entanto, deve funcionar para todos os navegadores ...

A marcação é a seguinte e precisa estar dentro de algo com posicionamento relativo (e sua largura deve ser definida, por exemplo, 400 pixels):

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

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

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

O perfect-scrollbarplugin parece ser o caminho a seguir, consulte: https://github.com/noraesae/perfect-scrollbar

É uma solução completa e bem documentada e baseada em JavaScript para o problema das barras de rolagem.

Página de demonstração: http://noraesae.github.io/perfect-scrollbar/

Você pode usar o código abaixo para ocultar a barra de rolagem, mas ainda sendo capaz de rolar:

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

Para ocultar barras de rolagem para elementos com conteúdo excedente, use.

.div{

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

}    

Outro tipo de abordagem hacky é fazer overflow-y: hiddene, em seguida, rolar manualmente o elemento com algo como isto:

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

Há um ótimo artigo sobre como detectar e lidar com onmousewheeleventos no blog do deepmikoto . Isso pode funcionar para você, mas definitivamente não é uma solução elegante.

Eu só queria compartilhar um snippet combinado para ocultar a barra de rolagem que eu uso no desenvolvimento. É uma coleção de vários trechos encontrados na Internet que funciona para mim:

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

Outro simples violino de trabalho :

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

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

Estouro oculto no contêiner pai e transbordamento automático no contêiner filho. Simples.

Esta solução complicada funciona mesmo no antigo navegador IE

É uma solução alternativa para a [ barra de rolagem vertical ]

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

Apenas tente: jsfiddle

Basta definir a largura da largura da criança para 100%, preenchimento para 15 pixels, overflow-xpara rolar e overflow:hiddenpara o pai e para a largura desejada.

Funciona perfeitamente em todos os principais navegadores, incluindo o Internet Explorer e Edge, com exceção do Internet Explorer 8 e inferior.