DISABILITA lo scorrimento orizzontale

Question

Ok per qualche motivo la mia pagina web scorre da sinistra a destra e mostra molto spazio brutto.

Ho cercato per i risultati, ma hanno appena fatto la barra di scorrimento HIDDEN

Questo è ora quello che voglio, voglio fisicamente DISABILITA la funzione di scorrimento orizzontale. Non voglio che l'utente sia in grado di scorrere da sinistra a destra sulla mia pagina solo su e giù!

Ho provato: overflow-x:hidden in css sul mio tag html ma ha solo reso la barra di scorrimento nascosta e non ha disabilitato lo scorrimento.

Per favore aiutatemi!

Ecco un link alla pagina: http://www.green-panda.com/usd309bands/ (link non funzionante)

Questo potrebbe dare una migliore idea di che cosa sto parlando:

Questo è quando i carichi prime pagine:

E questo è, dopo ho scorrere verso destra:

Answer 1

Prova ad aggiungere questo alla tua CSS

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

Answer 2

È possibile ignorare l'evento corpo scorrimento con JavaScript, e ripristinare la scorrimento orizzontale per 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; 
}); 

io non consiglio di fare questo perché limita la funzionalità per gli utenti con schermi di piccole dimensioni.

Answer 3

questo è il brutto bambino del codice :)

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

sostituirla con

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

Answer 4

Provate questo per disabilitare la larghezza -scrolling solo per il corpo il documento tutto è solo il corpo body{overflow-x: hidden;}

Answer 5

Quindi, per risolvere questo problema correttamente, ho fatto quello che altri qui fatto e utilizzato i CSS per ottenere nascondere la barra orizzontale:

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

Poi nel js, ho creato un listener di eventi per cercare per lo scorrimento, e contrastato gli utenti hanno provato lo scorrimento orizzontale.

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

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

Ho visto qualcuno fare qualcosa di simile, ma a quanto pare non ha funzionato. Questo però funziona perfettamente bene per me.

Answer 6

Lo so che è troppo tardi, ma c'è un approccio in javascript che può aiutare a rilevare elemento strega html è la causa del troppo pieno orizzontale -> barra di scorrimento a comparire

Ecco un link al post su CSS Tricks

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

potrebbe restituire qualcosa di simile:

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

allora y Basta rimuovere la larghezza extra dal div o impostarlo max-width:100%

Spero che questo aiuti!

E 'risolto il problema per me:]

Answer 7

koala_dev ha risposto che questo funzionerà:

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

E MarkWPiper commenta che ": -/Causato tocco/momento lo scorrimento di smettere di lavorare su iPhone"

La soluzione per mantenere touch/slancio su iPhone è quello di aggiungere questa riga:

height:auto!important;