web-dev-qa-db-pt.com

Ocultar uma barra de rolagem, mas ainda pode rolar

Eu quero ser capaz de percorrer toda a página, mas sem a barra de rolagem sendo mostrada.

No Google Chrome, é:

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

Mas o Mozilla Firefox e o Internet Explorer não funcionam assim.

Eu também tentei isso em CSS:

overflow: hidden;

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

Existe alguma maneira de remover a barra de rolagem enquanto ainda posso rolar a página inteira? Com apenas CSS ou HTML, por favor.

868
Oussama Dooby

Apenas um teste que está funcionando bem.

#parent{
    height: 100%;
    width: 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 */
}

Trabalhando Fiddle

JavaScript:

Como a largura da barra de rolagem é diferente em diferentes navegadores, é melhor manipulá-la com JavaScript. Se você fizer Element.offsetWidth - Element.clientWidth, a largura exata da barra de rolagem será exibida.

JavaScript trabalhando Fiddle

ou

Usando Position: absolute,

#parent{
    height: 100%;
    width: 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;
}

Trabalhando Fiddle

JavaScript trabalhando Fiddle

Informação:

Com base nessa resposta, criei um plugin de rolagem simples . Espero que isso ajude alguém.

654
Mr_Green

É 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;
}
284
Anirban Bhui

Isso funciona para mim com propriedades CSS simples:

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

ATUALIZADO: adicionada a nova propriedade scrollbar-width para o Firefox.

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

151
Hristo Eftimov

ATUALIZAÇÃO: O Firefox agora suporta esconder as barras de rolagem com CSS, então todos os principais navegadores são agora abordados (Chrome, Firefox, IE, Safari, etc).

Simplesmente aplique 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;  /* IE 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

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


RESPOSTA ORIGINAL:

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

Esse método usa 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.

Demos:

Exemplo de código 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;
}
124
Richrd

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 com uma div sobreposta que não possui barras de rolagem:

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

Isso é somente para WebKit browsers ... Ou você pode usar conteúdo CSS específico do navegador (se houver algum no futuro). Cada 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; como por MSDN .

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

70
Arpit Singh

Esta resposta não inclui o código, então aqui está a solução de page :

De acordo com a página, essa abordagem não precisa conhecer a largura da barra de rolagem antes do tempo para funcionar ea 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.

Isso também é zoom seguro. As soluções de preenchimento/largura mostram a barra de rolagem quando aumentadas para o 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>
33
Timo Kähkönen

Basta usar três linhas e seu problema será resolvido:

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

Onde liaddshapes é o nome da div onde o pergaminho está chegando.

17
Innodel

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 o CSS de acordo.

Confira aqui (testado no Internet Explorer e Firefox).

9
Mischa

A partir de 11 de dezembro de 2018 (Firefox 64 e acima), a resposta a esta pergunta é muito simples, pois o Firefox 64+ agora implementa o CSS Scrollbar Styling spec .

Apenas use o seguinte CSS:

scrollbar-width: none;

Link de nota de lançamento do Firefox 64 aqui .

7
Chris

Usar:

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

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

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 ou descarregar ou recarregar as barras de rolagem. Ainda é rolável no Chrome, como eu testei no Chrome, mas não tenho certeza dos outros navegadores.

6
user43353

Meu problema: eu não quero nenhum estilo no meu html, eu quero diretamente meu corpo rolável sem qualquer barra de rolagem, e apenas um pergaminho vertical, trabalhando com css-grids para qualquer tamanho de tela.

O box-size value impacto padding ou margin solutions, eles trabalham com box-size: content-box .

Eu ainda preciso da diretiva "-moz-scrollbars-none", e como gdoron e Mr_Green, eu tive que esconder a barra de rolagem. Eu tentei -moz-transform e -moz-padding-start, para impactar apenas o firefox, mas havia efeitos colaterais responsivos que precisavam de muito trabalho.

Essa solução funciona para o conteúdo do corpo do 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;  /* IE 10+ */
  overflow: -moz-scrollbars-none; /* should hide scroll bar */
}
/* no scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  display: none; /*  might be enought */
  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;
}
5
Lucile Fievet

Nos navegadores modernos, você pode usar wheel eventhttps://developer.mozilla.org/pt-BR/docs/Web/Events/wheel

// content is the element you want to apply the wheel scroll effect
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;
});
5
Doua Beri

Adicionar padding a um div interno, como na resposta aceita no momento, não funcionará se, por algum motivo, você quiser usar box-model: border-box.

O que funciona em ambos os casos é aumentar a largura do interior div para 100% mais a largura da barra de rolagem (assumindo overflow: hidden no div externo).

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

É assim que faço para rolagem horizontal, somente CSS e funciona bem com frameworks como bootstrap/col- *. Só precisa de 2 div extra e o pai com um conjunto de largura ou largura máxima:

Você pode selecionar o texto para rolá-lo ou rolar com os dedos se você 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>
4
Jean

Isso funciona para mim:

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

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

perfect-scrollbar plugin parece ser o caminho a percorrer, veja: https://github.com/noraesae/perfect-scrollbar

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

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

3
jmarceli

Esta é uma solução divitis-esque 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, 400px):

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

Isso será 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;
}
3
Hilla

Por acaso, experimento as soluções acima em meu projeto e, por algum motivo, não consegui ocultar a barra de rolagem devido ao posicionamento div. Por isso, decidi esconder a barra de rolagem, introduzindo uma div que 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>

O 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*/
}
3
Sriram Ranganathan

O seguinte estava trabalhando para mim na 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;
}
2
Meloman

Outro tipo de abordagem hacky é fazer overflow-y: hidden e depois rolar manualmente o elemento com algo parecido com 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 eventos onmousewheel em deepmikoto's blog. Isso pode funcionar para você, mas definitivamente não é uma solução elegante.

2
Gark Garcia

Eu só queria compartilhar um snippet combinado para esconder a barra de rolagem que uso no desenvolvimento. É uma coleção de vários trechos encontrados pela internet que funcionam 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 */
    }

Espero que você ache isso útil: *

1
stamat

Outro violino de trabalho simples :

#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 estouro automático no contêiner filho. Simples.

1
geoyws

Basta definir a largura da largura da criança para 100%, preenchimento para 15px, overflow-x para rolagem e estouro: oculto para o pai e qualquer largura que você quer, ele funciona perfeitamente em todos os principais navegadores incluindo IE Edge com uma exceção do IE8 e menor.

0
Sibongiseni Bentley Msomi

2019: respostas acima dos trabalhos.

você não precisa definir o plano de fundo na maioria das vezes, mas há um bug que às vezes a altura da barra de rolagem se comporta mal. isso você pode corrigir conforme especificado abaixo

height:0px; /* fixes issue with extra space underneath scrollbar */
width: 0px;  

0
zinoadidi

Eu tive esse problema, e é super simples de corrigir.

Obtenha dois contêineres. O interior será o seu contêiner rolável e a parte externa obviamente abrigará o interior:

#inner_container { width: 102%; overflow: auto; }
#outer_container { overflow: hidden }

É super simples e deve funcionar com qualquer navegador.

0
Jordan Michael Rushing