DISABILITARE lo scorrimento orizzontale [chiuso]

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

Ho cercato i risultati ma hanno appena creato la barra di scorrimento NASCOSTA

Questo è quello che voglio, voglio DISATTIVARE fisicamente 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:hiddenin CSS sul mio htmltag, ma ha solo nascosto la barra di scorrimento e non ha disabilitato lo scorrimento.

Mi aiuti per favore!

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

Questo potrebbe darti un'idea migliore di cosa sto parlando:

Questo è quando vengono caricate le prime pagine:

E questo dopo che scorro verso destra:

Prova ad aggiungere questo al tuo CSS

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

questo è il figlio cattivo del tuo codice :)

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

sostituirlo con

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

Quindi, per risolvere questo problema, ho fatto quello che hanno fatto gli altri qui e ho usato CSS per nascondere la barra degli strumenti orizzontale:

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

Quindi in js, ho creato un listener di eventi per cercare lo scorrimento e ho contrastato il tentativo di scorrimento orizzontale degli utenti.

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 comunque funziona perfettamente per me.

So che è troppo tardi , ma c'è un approccio in javascript che può aiutarti a rilevare l'elemento html della strega sta causando l'overflow orizzontale -> barra di scorrimento per apparire

Ecco un link al post su Trucchi CSS

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

Potrebbe restituire qualcosa del genere:

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

quindi rimuovi semplicemente la larghezza aggiuntiva da divo impostalamax-width:100%

Spero che questo ti aiuti!

Mi ha risolto il problema:]

Prova questo per disabilitare lo scorrimento della larghezza solo per body, tutto il documento è body body{overflow-x: hidden;}

koala_dev ha risposto che funzionerà:

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

E MarkWPiper commenta che ": - / Causato tocco / momentum scrolling per smettere di funzionare su iPhone"

La soluzione per mantenere il tocco / slancio su iPhone è aggiungere questa linea all'interno del blocco css per html, body:

    height:auto!important;

La risposta di Koala_dev funzionerà, ma nel caso ti stia chiedendo questo è il motivo per cui funziona:

.
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 si desidera disabilitare lo scorrimento orizzontale su tutta la larghezza dello schermo, utilizzare questo codice.

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

Funziona meglio del "100%" perché ignora la larghezza principale e utilizza invece la finestra.

Puoi provare tutto questo metodo nella nostra pagina html.

1a via

body { overflow-x:hidden; }

Secondo modo È possibile utilizzare quanto segue nel tag body CSS:

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

Ciò rimuoverà la barra di scorrimento.

3a via

body { min-width: 1167px; }

5a via

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

6 ° modo

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

4 ° modo ..

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

Ora sto cercando di più .. !!!!

Ho dovuto occuparmene da solo. Dopo tutto ho trovato questo metodo molto semplice e utile. Basta aggiungere

overflow-x: hidden;

Al tuo genitore esterno. Nel mio caso si presenta così:

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

Devi usare overflow-xperché se usi semplicemente usi overflowdisabiliti anche lo scorrimento verticale, vale a direoverflow-y

Se lo scorrimento verticale è ancora disabilitato è possibile abilitarlo esplicitamente con:

overflow-y: scroll;

So che in qualche modo non è un modo corretto perché se tutto fosse impostato bene non si dovrebbe usare questo metodo rapido e sporco.

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

Si applica lo stile sopra o è possibile creare una funzione in javaScript per risolvere quel problema

È possibile ignorare l'evento di scorrimento del corpo con JavaScript e reimpostare lo scorrimento orizzontale su 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;
});

Non consiglio di farlo perché limita la funzionalità per gli utenti con schermi di piccole dimensioni.