html - rolagem - ocultar scroll iframe css




Ocultar a barra de rolagem, mas ainda pode rolar (17)

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.


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


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 as especificações CSS Scrollbar Styling .

Apenas use o seguinte CSS:

scrollbar-width: none;

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


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

Violino de trabalho

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.

Violino de Trabalho JavaScript

ou

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

Violino de trabalho

Violino de Trabalho JavaScript

Informação:

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


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


Em navegadores modernos, você pode usar o wheel event https://developer.mozilla.org/en-US/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;
});

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

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


Eu tive esse problema. Super simples de consertar. pegue 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. Boa sorte!


Isso funciona para mim:

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

Nota: Nas versões mais recentes do Firefox, a -moz-scrollbars-none foi descontinuada ( link ).


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.

As soluções de preenchimento ou margem de impacto de valor de dimensionamento de caixa , elas trabalham com dimensionamento de caixa: 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;
}

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


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 deepmikoto's blog deepmikoto's . Isso pode funcionar para você, mas definitivamente não é uma solução elegante.


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 esse é o css:

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

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


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 here (testado no IE e FF).


#subparant{
    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="subparant">
        <div id="parent">
            <div id="child">
                <!- code here for scroll ->
            </div>
        </div>
     </div>
 </body>

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

isto é apenas para navegadores webkit .. ou você pode usar CSS específico do navegador (se houver algum no futuro) cada navegador pode ter uma propriedade diferente e específica para suas respectivas barras

--EDITAR--

Para uso do Microsoft Edge: -ms-overflow-style: -ms-autohiding-scrollbar; ou -ms-overflow-style: none; como por MSDN .

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





firefox