🥇 O hack de rolagem de elemento posicionado fixo. Ou seja, para modais Bootstrap e similares.

Hack de CSS para, por exemplo, Modais, Lightboxes ou menus deslizantes fixos que ultrapassam o tamanho da tela e não são roláveis devido à posição fixa e um elemento de corpo agressivo.

Adicione o ‘.noscroll’ ao corpo dinamicamente através de Javascript e você está pronto para ir. Este exemplo mostra a solução para o componente modal Bootstrap – convertendo-o em um elemento de tamanho completo

Isso pode ser usado com qualquer elemento fixo que você gostaria de tornar rolável (ou seja, menus grandes em dispositivos pequenos):

# Javascript
$('modal').on('show', function() { $('body').addClass('noscroll') })
$('modal').on('hide', function() { $('body').removeClass('noscroll') })


# CSS
body.noscroll { overflow: hidden; }

.modal {
  position: absolute;
  /* You can, of course, tweak this to position your element */
  top: 0; bottom: 0; left: 0; right: 0;
  overflow-y: scroll;
}

Solução 2

Você também pode chamar o seguinte script e evitar a rolagem em dispositivos de toque, exceto em elementos dom com a classe “.scrollable”.

# Javascript

$('body').on 'touchmove', (e) ->
  e.preventDefault() unless $('.scrollable').has($(e.target)).length

Solução 2

Related Posts