Como impedir que a barra de rolagem sobreponha o conteúdo no IE10?

183

No IE10, a barra de rolagem nem sempre está lá ... e quando aparece, aparece como uma sobreposição ... É um recurso interessante, mas eu gostaria de desativá-lo para meu site específico, pois é um aplicativo de tela cheia e meu logotipos e menus estão perdidos por trás disso.

IE10:

insira a descrição da imagem aqui

CROMADA:

insira a descrição da imagem aqui

Alguém sabe uma maneira de sempre ter a barra de rolagem fixa na posição no IE10?

overflow-y: scroll parece não funcionar! apenas o coloca permanentemente no meu site.

Pode ser que o bootstrap esteja causando o problema, mas que parte não faço ideia! veja o exemplo aqui: http://twitter.github.io/bootstrap/

html css scrollbar internet-explorer-11 internet-explorer-10 Jimmyt1988
fonte
Meu IE10 não tem esse comportamento, você o está executando como um aplicativo "Metro"?
xec
Não, não estou. Estou no Windows 8, se isso faz alguma diferença. É o mesmo no meu laptop também ... Você pode não perceber esse comportamento da barra de rolagem porque outros sites como o stackoverflow, por exemplo, encontraram uma maneira de contornar isso ... Espero que a nova imagem ajude a distinguir a diferença entre o que faço e o que não faço quer
Jimmyt1988
Tem algo a ver com uma largura definida da página?
Albzi
Definir a largura da página funcionaria .. infelizmente, eu queria saber se existe uma maneira entre navegadores. considerando o firefox, o safari e o chrome não têm esse comportamento. Eu poderia usar um doo-raggy específico do IE10, suponho ... simplesmente não parece ser a resposta mais elegante.
Jimmyt1988
@JamesT estou em W8 também, mas não consegue encontrar qualquer página que faz IE10 tornar a barra de rolagem como uma sobreposição (nem mesmo o meu go-to página de teste, www.arngren.net)
XEC

Respostas:

163

Depois de pesquisar um pouco no Google, deparei-me com uma discussão em que um comentário deixado por "Blue Ink" afirma:

Inspecionando as páginas, consegui reproduzi-lo usando:

@ -ms-viewport {width: largura do dispositivo; }

o que faz com que as barras de rolagem se tornem transparentes. Faz sentido, já que o conteúdo agora ocupa a tela inteira.

Nesse cenário, adicionando:

estouro-y: automático;

faz com que as barras de rolagem ocultem automaticamente

E no arquivo bootstraps responsive-utilities.less, linha 21, você pode encontrar o seguinte código CSS

// IE10 in Windows (Phone) 8
//
// Support for responsive views via media queries is kind of borked in IE10, for
// Surface/desktop in split view and for Windows Phone 8. This particular fix
// must be accompanied by a snippet of JavaScript to sniff the user agent and
// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
// our Getting Started page for more information on this bug.
//
// For more information, see the following:
//
// Issue: https://github.com/twbs/bootstrap/issues/10497
// Docs: http://getbootstrap.com/getting-started/#support-ie10-width
// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/

@-ms-viewport {
  width: device-width;
}

Esse trecho é o que está causando o comportamento. Eu recomendo a leitura dos links listados no código comentado acima. (Eles foram adicionados depois que eu postei essa resposta inicialmente.)

xec
fonte
74
O senhor é um cavalheiro e um estudioso! Coloquei @ -ms-viewport {width: auto! Important; } No meu arquivo css e longe o problema foi: D
Jimmyt1988
4
ótima resposta, recomendo a outras pessoas que você leia o artigo mencionado no comentário do bootstrap: timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design - remover esse código do bootstrap pode interromper a capacidade de resposta do IE10 em Windows 8 metro
tmsimont
@tmsimont Bom ponto. Além disso, eles parecem ter alterado o comentário no arquivo de origem mais recente do Boostrap (atualizou minha resposta com os novos comentários), que agora menciona o uso de um script de detecção de UA para aplicá-lo a " apenas o Windows 8 do Surface / desktop" - verifique o link do problema: github.com/twbs/bootstrap/issues/10497
xec 14/10/13
1
Eu realmente gosto do bootstrap, mas gostaria que eles separassem as opções de mídia e viewport em um arquivo diferente. Eu estava criando um site responsivo pela primeira vez e literalmente precisei remover uma tonelada de coisas do bootstrap para fazer meu site funcionar da maneira que eu queria.
David
9
-ms-overflow-style: barra de rolagem; parece ser a solução mais limpa (consulte a segunda resposta).
Manuel Arwed Schmidt 23/03
179

Como o xec mencionado em sua resposta, esse comportamento é causado pela configuração @ -ms-viewport.

A boa notícia é que você não precisa remover essa configuração para recuperar as barras de rolagem (no nosso caso, contamos com a configuração @ -ms-viewport para um design web responsivo).

Você pode usar o estilo -ms-overflow para definir o comportamento do estouro, conforme mencionado neste artigo:

http://msdn.microsoft.com/en-us/library/ie/hh771902(v=vs.85).aspx

Defina o estilo para a barra de rolagem para recuperar as barras de rolagem:

body {
    -ms-overflow-style: scrollbar;
}

Barra de rolagem

Indica que o elemento exibe um controle clássico do tipo barra de rolagem quando o conteúdo excede. Diferentemente de -ms-autohiding-scrollbar, as barras de rolagem nos elementos com a propriedade -ms-overflow-style configurada como barra de rolagem sempre aparecem na tela e não desaparecem quando o elemento está inativo. As barras de rolagem não sobrepõem o conteúdo e, portanto, ocupam espaço extra no layout ao longo das bordas do elemento em que aparecem.

stefan.s
fonte
9
Eu adicionei isso no elemento html, ou seja, html{-ms-overflow-style: scrollbar;}e funcionou para mim. Haveria casos de uso em que isso era necessário em outro lugar?
NHaskins
7
body{-ms-overflow-style: scrollbar;}funcionando bem para mim .. Obrigado
Manjit Singh
15
Essa deve ser a resposta. O aceito remove a adaptação do dispositivo de porta de visualização.
Mnsth
adiciona estouro no x
Monicka
1
@ stefan.s esta é a resposta correta! Deve ser aceito
eirenaios
12

SOLUÇÃO: duas etapas - detecte se o IE10 e use CSS:

faça isso no init:

if (/msie\s10\.0/gi.test(navigator.appVersion)) {
    $('body').addClass('IE10');
} else if (/rv:11.0/gi.test(navigator.appVersion)) {
    $('body').addClass('IE11');
}

// --OR--

$('body').addClass(
  /msie\s10\.0/gi.test(navigator.appVersion) ? 'IE10' :
  /rv:11.0/gi.test(navigator.appVersion)     ? 'IE11' :
  ''  // Neither
);

// --OR (vanilla JS [best])--

document.body.className +=
  /msie\s10\.0/gi.test(navigator.appVersion) ? ' IE10' :
  /rv:11.0/gi.test(navigator.appVersion)     ? ' IE11' :
  '';  // Neither

Adicione este CSS:

body.IE10, body.IE11 {
    overflow-y: scroll;
    -ms-overflow-style: scrollbar;
}

Por que funciona:

  • O overflow-y:scrolltransforma permanentemente na <body>barra de rolagem vertical tag.
  • Os -ms-overflow-style:scrollbardesliga o comportamento de esconder auto, empurrando assim o conteúdo mais e dando-nos o comportamento de layout barra de rolagem todos nós estamos acostumados.

Atualizado para usuários que perguntam sobre o IE11. - Referência https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)

gdibble
fonte
14
por que você não faria apenas body {-ms-overflow-style: scrollbar; }?
Scott Romack
7
-1 Seu código não funciona no IE11 e não no IE12 quando é lançado. Existem maneiras melhores de criar estilos específicos do IE.
Joseph Lennox
1
@ JosephphLennox Se você pudesse adicionar uma resposta para indicar uma maneira melhor de executar estilos específicos do IE, tenho certeza de que tanto o gdibble quanto os outros que vierem com esta pergunta agradeceriam.
Compilador conspícuo
2
@ConspicuousCompiler O prefixo "-ms-" já o torna adequadamente apenas no IE.
Joseph Lennox
5
É como a resposta de @ stefan.s, mas com inchaço desnecessário.
Ry-
4

Tente isto

body{-ms-overflow-style: scrollbar !important;}
user2606817
fonte
0

Esse problema também está acontecendo com o Datatables no Bootstrap 4. A solução Mi foi:

  1. Verificado se o navegador ie está abrindo.
  2. Classe responsiva à tabela substituída pela classe responsiva à tabela, ou seja.

CSS:

.table-responsive-ie {
display: block;
width: 100%;
overflow-x: auto;}

JS:

var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) //If IE
        {
            $('#tableResponsibleID').removeClass('table-responsive');
            $('#tableResponsibleID').addClass('table-responsive-ie');
        }
Primoshenko
fonte
-4

Tentei o @ -ms-viewport e outras sugestões, mas nenhuma funcionou no meu caso com o IE11 no Windows 7. Eu não tinha barras de rolagem e as outras postagens aqui me dariam uma barra de rolagem que não rolava em nenhum lugar, mesmo que houvesse muito conteúdo. Encontrei este artigo http://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie/ que foi reduzido para. . .

body { overflow-x: visible; }

. . . e fez o truque para mim.

Toadmyster
fonte
2
A questão não é sobre barras de rolagem ausentes, mas sobre a sobreposição de barras de rolagem semitransparentes, introduzida como efeito colateral ao usar a inicialização. Você também pode tentarbody { overflow: auto; }
xec 4/15