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


1129

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.

Respostas:


788

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 .


16
No seu último "violino de trabalho", vi muitos, !importantentão removi
Roko C. Buljan

2
Esta solução não funciona quando a largura do conteúdo está definida como automática. ao rolar para a direita, parte do conteúdo ainda não está visível. Por que é que? Alguma solução? Faça o checkout do problema aqui: jsfiddle.net/50fam5g9/7 Nota: a largura do conteúdo não pode ser conhecida antecipadamente no meu caso, é por isso que deve ser definida como automática.
Sprout Coder

35
Essa abordagem não abrange todos os navegadores e será muito específica para a versão do navegador com a qual você está trabalhando durante o desenvolvimento.
Itsik Avidan

2
E as barras de rolagem horizontal? Como você pode esconder isso?
www139 9/11/2015

11
Por que complicar e calcular a largura da barra de rolagem? Basta definir box-sizing: border-box; width: calc(100% + 50px);e o mesmo valor para preenchimento. Nenhum navegador tem 50px barra de rolagem largura / altura, por isso deve simplesmente cobri-los todos ...
Robert Koritnik

362

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

1
tentei isso no cordovaaplicativo, funcionou bem. teve que aplicar overflow:scrollao elemento.
Kishor Pawar #

41
Não funciona no Firefox, bastante óbvio, pois este webkit afirma puramente. Obrigado :)
Zohair

3
funciona excelente em aplicativos Electron conforme o esperado, uma vez que são cromo. 1 graças: D
rococo

Desde o iOS8, isso não funciona quando usado com-webkit-overflow-scrolling: touch
aleclarson

4
trabalha com cromo. mas não funciona com o mozilla firefox.
romal tandel

299

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;


13
Para mim, overflow: -moz-scrollbars-noneoculta as barras de rolagem no Firebox, mas também desativa a rolagem. Você pode fornecer uma demonstração em que isso está funcionando para você?
chipit24

1
Infelizmente, a -moz-scrollbars-nonepropriedade é excluída para as versões mais recentes do Firefox: developer.mozilla.org/en-US/docs/Web/CSS/overflow
Hristo Eftimov

2
Desde o iOS8, isso não funciona quando usado com-webkit-overflow-scrolling: touch
aleclarson

3
Para o Firefox obsoleto, -moz-scrollbars-nonevocê pode usar @-moz-document url-prefix() { .container { overflow: hidden; } }. Consulte stackoverflow.com/questions/952861/… .
Martin Ždila 22/06

1
Eu atualizei a minha resposta com o mais recente suporte para Firefox :)
Hristo Eftimov

292

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:

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

39
Sei que essa é uma nova resposta para uma pergunta antiga, mas essa deve ser a resposta aceita agora. Coisas boas, cara.
Vector

3
Esta é absolutamente a melhor resposta, mãos para baixo. Agora, como alguém o modifica para ocultar barras de rolagem horizontais?
CeeMoney

1
@CeeMoney Adicionei uma demonstração horizontal. Para elementos de conteúdo de largura fixa, como imagens, ele deve funcionar, mas para o texto, você precisa desativar o agrupamento.
Richrd 18/06/19

1
@ Richrd - muito obrigado pela demo - funciona perfeitamente. Não sei por que todos nós tornamos isso tão difícil, mas isso é tão simples que me sinto boba por não fazer isso antes.
CeeMoney

4
Obrigado @Richrd! Estou tão feliz que rolei para a sua resposta. Se o SO tivesse alguma "resposta aceita por força", eu definitivamente a usaria agora.
Martin D

78

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


ictacademie.info/oussamaelbachiri este site @Oussama Dobby usa media = 'screen' e depois ':: - webkit-scrollbar' property for css
Arpit Singh

E quais são as propriedades específicas do CSS?
Oussama el Bachiri

quer um layout hacky ou jQuery é uma alternativa
Arpit Singh

Sua primeira solução dá-me este problema s24.postimg.org/idul8zx9w/Naamloos.jpg E o que você quer dizer com hacky disposição @ArpitSingh
Oussama el Bachiri

4
O seguinte permitiu-me para permitir a rolagem nativa em Cordova com jQuery Mobile 1.4 em iOS7 & iOS8 // CSS ::-webkit-scrollbar { display: none; } .ui-content { -webkit-overflow-scrolling: touch; } // jQuery Mobile onMobileInit () $.mobile.touchOverflowEnabled = true;
Ryan Williams

33

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>


Isso não funcionará para todos os navegadores ... Somente para navegadores da Web. Você está usando um seletor específico para webkit::-webkit-scrollbar {}
Prefixo

Testei-o em todos os novos navegadores antes de responder à pergunta. Também FF. Aconteceu algumas mudanças no FF?
Timo Kähkönen

Eu atualizei a resposta. Parece que a adição padding-right: 150px;corrige isso. Testado em FF, Chrome, Safari e Edge. Funciona também em baixos níveis de zoom devido ao grande preenchimento à direita.
Timo Kähkönen

2
Suporte para Edge, IE 11, IE10 (talvez inferior também) html { -ms-overflow-style: none;}. Nesses navegadores, não há necessidade de usar padding-hack.
Timo Kähkönen 30/08/16

Tinha que usar a resposta do @ Timo e overflow-y: scrollobter o comportamento de rolagem, mas oculto (como o Chrome) para fazê-lo funcionar no Edge23.
jojo

21

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.


Mostre-me que você problema no violino
Innodel

1
Fácil e útil, obrigado! Eu usei {display: none} em vez de {width: 0;} e também trabalho #
Santi Nunez

2
Não funciona no MS Edge ou Firefox.
Dpedrinha

18

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 que {}significam blocos aninhados ( )? Como é que deve ser interpretado? E o &? Talvez elaborado em sua resposta?
Peter Mortensen

É uma coisa SASS (aparentemente, menos também): css-tricks.com/the-sass-ampersand
vipatron

@PeterMortensen Eu só vi o seu comentário agora, &::-webkit-scrollbartorna-se .hide-native-scrollbar::-webkit-scrollbar { }em CSS
Murhaf Sousli

basta fazer { width: 0; height: 0;}para :: - webkit-scrollbar em vez de display: nonepara iOS.
adriendenat

No FF71, isso bloqueia toda a rolagem.
gene b.

11

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

Note-se que scrollbar-width(FF apenas) é sinalizado como "experimental"
cimak

Sim, @cimak, mas no FF você pode ocultá-lo sem problemas, por isso é realmente usado apenas no 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;
}

Aplique CSS de acordo.

Verifique aqui (testado no Internet Explorer e Firefox).


8

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 .


3
É muito bom saber disso! Parece que os navegadores estão realmente progredindo, haha!
Oussama el Bachiri

7

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>

Não sei por que isso foi rebaixado, mas eu apenas votei na direção certa; as outras soluções não funcionaram muito bem no meu caso. estouro-x: oculto; + estouro-y: rolagem; foi o que fez o truque, junto com a largura> 100% (110% no meu caso funcionou bem).
DAngelov

1
é a mesma coisa que a solução mais votada: tentar ocultar a barra de rolagem. isso não é ideal porque varia de acordo com o navegador
mwm 29/01

6

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.


6

Isso funciona para mim:

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

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

5

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

Esta é a resposta que eu estava procurando. Obrigado. Eu usei overflow: hiddene esse código para que mat-card-content(no angular 5, é claro) seja rolável e isso resolveu meu problema. Nota: Eu usei e.deltaYcomo meu stepe funcionou como rolagem normal, então acho que para rolagem normal, mas com a barra de rolagem oculta, essa é a melhor correspondência.
precisa saber é o seguinte

1
a página vinculada aqui avisa que essa abordagem não é apropriada?
Jnnnnn 07/05/19

5

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

4

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

4

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


Obrigado, tentei, funciona muito bem. Uma coisa é que é melhor mudar margin-bottompara ser, padding-bottommas com o mesmo valor. Isso não será consumido abaixo do espaço do elemento na parte inferior. Evita a sobreposição.
precisa saber é

@haxpor A margin-bottomé negativo, eu acho que não pode ser alterado para um padding-bottom, que não pode lidar com valores negativos
Jean

4

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

3

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

3

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

3

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

3

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/


2
Não vejo como isso se relaciona com a pergunta?
Chris Nevill

3
Fiquei olhando a barra de rolagem perfeita por 2 minutos sem uma revelação imediata de como usá-la para ocultar a barra de rolagem . Se você expandir sua resposta sobre esse tópico, tenho certeza de que receberá mais votos.
Christiaan Westerbeek

3

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 
}

3

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

.div{

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

}    

O suporte é praticamente inexistente, exceto o FF, como você mencionou, é muito pouco para o que o OP solicitou. Verifique caniuse.com/#feat=mdn-css_properties_scrollbar-width
Adrien

@ Adrien Bem, a pergunta original afirmou que eles têm uma solução para outros navegadores. (Mas o Mozilla Firefox e o Internet Explorer parecem não funcionar assim), diz ele, essa foi a razão pela qual forneci a solução Firefox.
Alvin Moyo

Achei que isso funcionou bem quando combinado com o equivalente: div :: - webkit-scrollbar {display: none; } para Webkit / Chrome.
Sean Halls

2

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.


2

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

1

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.


Isso não oculta a barra de rolagem, apenas a afasta da vista com o valor "esquerdo".
robertmiles3

@ robertmiles3 não é a mesma coisa? escondendo e não podendo ver?
Bryan Willis

1
@ robertmiles3 a resposta selecionada acima faz a mesma coisa à direita. Parece que todas as soluções são hacky até que o FIrefox decida permitir que o CSS oculte as barras de rolagem novamente. blogs.msdn.com/b/kurlak/archive/2013/11/03/…
geoyws

Eu tenho que concordar. Essa é uma solução semelhante proposta pela resposta aceita. Se funcionar, funciona. votado
JSON

1

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


0

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.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.