Impedindo que barras de rolagem sejam ocultas para usuários do trackpad do MacOS no WebKit / Blink

162

O comportamento padrão do WebKit / Blink (Safari / Chrome) no MacOS desde a versão 10.7 (Mac OS X Lion) é ocultar barras de rolagem dos usuários do trackpad quando eles não estão em uso. Isso pode ser confuso ; a barra de rolagem geralmente é a única dica visual de que um elemento pode ser rolado.

Exemplo ( jsfiddle )

HTML

<div class="frame">
    Foo<br />
    Bar<br />
    Baz<br />
    Help I'm trapped in an HTML factory! 
</div>

CSS

.frame {
    overflow-y: auto;
    border: 1px solid black;
    height: 3em;
    width: 10em;
    line-height: 1em;
}

Captura de tela do WebKit (Chrome)

captura de tela de uma div sem barra de rolagem visível

Captura de tela do Presto (Opera)

captura de tela de uma div com uma barra de rolagem visível

Como forçar uma barra de rolagem a ser sempre exibida em um elemento rolável no WebKit?

— Jeremy Banks
fonte

Você já tentou overflow: scroll? Isso costumava funcionar no Chrome. Isso deve forçar as barras de rolagem a sempre serem exibidas.

— Xaddict

2

Note-se que é também um problema no Firefox no Mac OS X.

— Blaise

Cara, eu odeio quando sites mexem com a interface do usuário no meu sistema e agente de usuário.

— amn

249

A aparência das barras de rolagem pode ser controlada com os -webkit-scrollbarpseudoelementos do WebKit ^{[ blog ]} . Você pode desativar a aparência e o comportamento padrão configurando -webkit-appearance ^{[ docs ]} para none.

Como você está removendo o estilo padrão, também precisará especificar o estilo ou a barra de rolagem nunca será exibida. O CSS a seguir recria a aparência das barras de rolagem ocultas:

Exemplo ( jsfiddle )

CSS

.frame::-webkit-scrollbar {
    -webkit-appearance: none;
}

.frame::-webkit-scrollbar:vertical {
    width: 11px;
}

.frame::-webkit-scrollbar:horizontal {
    height: 11px;
}

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

.frame::-webkit-scrollbar-track { 
    background-color: #fff; 
    border-radius: 8px; 
}

Captura de tela do WebKit (Chrome)

captura de tela mostrando a barra de rolagem do webkit, sem precisar passar o mouse

— Jeremy Banks
fonte

1

Para barras de rolagem forçadas do macosx lion, o truque descrito aqui não funciona com esta técnica: stackoverflow.com/a/3417992/62255 . Não se preocupe, já que estamos definindo explicitamente as dimensões aqui, podemos acessá-las diretamente.

— precisa saber é o seguinte

5

Observe que você também pode personalizar a faixa / plano de fundo da barra de rolagem com:.frame::-webkit-scrollbar-track { background-color: #FFF; border-radius: 8px; }

— XML

Observe que os estilos da barra de rolagem do webkit não funcionam no iOS 7 (e possivelmente 6).

— RobW 24/03

4

Uma coisa a mencionar é que, nos meus testes e em um comentário muito antigo de outra pessoa , parece que você não pode ter uma barra de rolagem sempre ativa E a rolagem de momento que as pessoas estão acostumadas com o iOS. Fazer o CSS de rolagem de momento fez com que minhas barras de rolagem personalizadas desaparecessem.

— JMQ

2

Não verifiquei isso recentemente, mas encontrei esta observação em nosso CSS que referenciou esta solução: "Observe que isso mostrará barras de rolagem no estilo OS X, por exemplo, no Chrome no Windows".

— 28416 Henrik N

19

Para um aplicativo Web de uma página em que adiciono seções roláveis dinamicamente, aciono as barras de rolagem do OSX rolando programaticamente um pixel para baixo e para trás:

// Plain JS:
var el = document.getElementById('scrollable-section');
el.scrollTop = 1;
el.scrollTop = 0;

// jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);

Isso aciona a sugestão visual entrando e saindo.

— Blaise
fonte

19

Aqui está um código mais curto que reativa as barras de rolagem em todo o site. Não tenho certeza se é muito diferente da resposta atual mais popular, mas aqui está:

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}

Encontrado neste link: http://simurai.com/blog/2011/07/26/webkit-scrollbar

— Alex Banman
fonte

3

As barras de rolagem do navegador não funcionam no iPhone / iPad. No trabalho, estamos usando barras de rolagem JavaScript personalizadas, como jScrollPane, para fornecer uma interface consistente entre navegadores: http://jscrollpane.kelvinluck.com/

Funciona muito bem para mim - você pode criar barras de rolagem personalizadas realmente bonitas que se ajustam ao design do seu site.

— Chris M. Welsh
fonte

2

Outra boa maneira de lidar com as barras de rolagem ocultas do Lion é exibir um prompt para rolar para baixo. Ele não funciona com pequenas áreas de rolagem, como campos de texto, mas também com grandes áreas de rolagem, mantendo o estilo geral do site. Um site que faz isso é http://versusio.com , verifique esta página de exemplo e aguarde 1,5 segundos para ver o prompt:

http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb

A implementação não é difícil, mas você deve tomar cuidado para não exibir o prompt quando o usuário já tiver rolado.

Você precisa do jQuery + Underscore e

$(window).scroll para verificar se o usuário já rolou sozinho,

_.delay() para acionar um atraso antes de exibir o prompt - o prompt não deve ser invasivo

$('#prompt_div').fadeIn('slow') desaparecer no seu prompt e, claro,

$('#prompt_div').fadeOut('slow') desaparecer quando o usuário rolou depois que viu o prompt

Além disso, você pode vincular os eventos do Google Analytics para acompanhar o comportamento de rolagem do usuário.

— user976647
fonte