0

Para deixar bem estruturado uma pagina que terá o scrollbar desabilitado quando um determinado botão for clicado, penso em definir um padding adicional ao body com js, para compensar o scroll ocultado. Andei lendo por ai que muitos navegadores já possuem um width padrão de 17px, mas que outros tem especificações diferentes. O que preciso é de uma solução para detectar o width do scrollbar nativo documento, pegar esse valor e adicionar ao body.

$('body').css('padding-right', WidthDoScrollbar);

0

1 Resposta 1

1

Obter a largura do scroll

Através dessa resposta vi que é possível criar uma div escondida, outra div dentro dela com scroll e através da diferença das duas saber qual é a largura do scroll utilizado pelo navegador.

Esse é o código:

function getScrollbarWidth() {
    var outer = document.createElement("div");
    outer.style.visibility = "hidden";
    outer.style.width = "100px";
    outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps

    document.body.appendChild(outer);

    var widthNoScroll = outer.offsetWidth;
    // force scrollbars
    outer.style.overflow = "scroll";

    // add innerdiv
    var inner = document.createElement("div");
    inner.style.width = "100%";
    outer.appendChild(inner);        

    var widthWithScroll = inner.offsetWidth;

    // remove divs
    outer.parentNode.removeChild(outer);

    return widthNoScroll - widthWithScroll;
}

console.log(getScrollbarWidth());

3
  • estou utilizando a última versão do firefox. 60.0.1, no console está dando esse erro: TypeError: document.body is null Commented 28/05/2018 às 15:15
  • Sua tag <script> está no final da tag body?, esse erro pode estar sendo ocasionado porque o script está sendo executado antes de carregar o HTML completo. Commented 28/05/2018 às 16:06
  • Wow. Que detalhe! Agora funcionou. Thx. Commented 28/05/2018 às 17:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .