DESATIVAR o Scroll Horizontal [fechado]

Ok, por algum motivo, minha página rola da esquerda para a direita e mostra muito espaço feio.

Eu procurei por resultados, mas eles apenas fizeram a barra de rolagem ESCONDIDA

Agora é isso que eu quero, quero DESATIVAR fisicamente o recurso de rolagem horizontal. Eu não quero que o usuário possa rolar da esquerda para a direita na minha página apenas para cima e para baixo!

Eu tentei: overflow-x:hiddenem css na minha htmltag, mas apenas ocultou a barra de rolagem e não desativou a rolagem.

Por favor me ajude!

Aqui está um link para a página: http://www.green-panda.com/usd309bands/ (link quebrado)

Isso pode lhe dar uma idéia melhor do que estou falando:

É quando a primeira página é carregada:

E isso é depois que eu rolo para a direita:

Tente adicionar isso ao seu CSS

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

este é o filho desagradável do seu código :)

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 1170px;
}

substitua-o por

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 100%;
}

Então, para corrigir isso corretamente, fiz o que os outros aqui fizeram e usei o css para ocultar a barra de ferramentas horizontal:

.name {
  max-width: 100%;
  overflow-x: hidden;
}

Em js, criei um ouvinte de eventos para procurar rolagem e contrariei a tentativa de rolagem horizontal dos usuários.

var scrollEventHandler = function()
{
  window.scroll(0, window.pageYOffset)
}

window.addEventListener("scroll", scrollEventHandler, false);

Vi alguém fazer algo parecido, mas aparentemente isso não funcionou. No entanto, isso está funcionando perfeitamente bem para mim.

Eu sei que é tarde demais , mas existe uma abordagem em javascript que pode ajudá-lo a detectar que o elemento html está causando o estouro horizontal -> barra de rolagem para aparecer

Aqui está um link para o post sobre CSS Tricks

var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

Pode retornar algo como isto:

<div class="div-with-extra-width">...</div>

então você apenas remove a largura extra do divou definemax-width:100%

Espero que isto ajude!

Corrigiu o problema para mim:]

Tente este para desativar a rolagem de largura apenas para o corpo, todo o documento é apenas corpo body{overflow-x: hidden;}

koala_dev respondeu que isso vai funcionar:

html, body {
   max-width: 100%;
   overflow-x: hidden;
}

E o MarkWPiper comenta que ": - / fez com que a rolagem por toque / momento parasse de funcionar no iPhone"

A solução para manter o toque / momento no iPhone é adicionar esta linha dentro do bloco css para html, body:

    height:auto!important;

A resposta de Koala_dev funcionará, mas caso você esteja se perguntando, esse é o motivo pelo qual ele funciona:

.
q.html, body {              <--applying this css block to everything in the
                             html code.

q.max-width: 100%;          <--all items created must not exceed 100% of the 
                             users screen size. (no items can be off the page 
                             requiring scroll)

q.overflow-x: hidden;       <--anything that occurs off the X axis of the 
                             page is hidden, so that you wont see it going 
                             off the page.     

.

Se você deseja desativar a rolagem horizontal em toda a largura da tela, use este código.

element {
  max-width: 100vw;
  overflow-x: hidden;
}

Isso funciona melhor que "100%" porque ignora a largura do pai e usa a janela de exibição.

Você pode tentar esse método todo em nossa página html.

1ª via

body { overflow-x:hidden; }

2ª maneira Você pode usar o seguinte na sua tag body CSS:

overflow-y: scroll; overflow-x: hidden;

Isso removerá sua barra de rolagem.

3ª via

body { min-width: 1167px; }

5ª via

html, body { max-width: 100%; overflow-x: hidden; }

6ª via

element { max-width: 100vw; overflow-x: hidden; }

4ª via ..

var docWidth = document.documentElement.offsetWidth; [].forEach.call( document.querySelectorAll('*'), function(el) { if (el.offsetWidth > docWidth) { console.log(el); } } );

Agora estou pesquisando mais .. !!!!

Eu só tive que lidar com isso sozinho. Afinal, achei esse método mais fácil e útil. Basta adicionar

overflow-x: hidden;

Para o seu pai externo. No meu caso, fica assim:

<body style="overflow-x: hidden;">

Você precisa usar, overflow-xporque, se usar, overflowdesativa também a rolagem vertical, a saberoverflow-y

Se a rolagem vertical ainda estiver desativada, você poderá ativá-la explicitamente com:

overflow-y: scroll;

Eu sei que não é uma maneira adequada, porque se tudo estivesse bem configurado, não seria necessário usar esse método rápido e sujo.

.name 
  { 
      max-width: 100%; 
       overflow-x: hidden; 
   }

Você aplica o estilo acima ou pode criar uma função em javaScript para resolver esse problema

Você pode substituir o evento de rolagem do corpo pelo JavaScript e redefinir a rolagem horizontal para 0.

function bindEvent(e, eventName, callback) {
    if(e.addEventListener) // new browsers
        e.addEventListener(eventName, callback, false);
    else if(e.attachEvent) // IE
        e.attachEvent('on'+ eventName, callback);
};

bindEvent(document.body, 'scroll', function(e) {
    document.body.scrollLeft = 0;
});

Não aconselho fazer isso porque limita a funcionalidade para usuários com telas pequenas.