È possibile impedire lo scorrimento orizzontale quando overflow-x è nascosto?

Ho una pagina Web con contenuti che si estende oltre il bordo destro della finestra del browser. Ho impostato overflow-x: hidden su <body> per disattivare la barra di scorrimento in basso, ma posso ancora scorrere in orizzontale con il trackpad, che non è quello che voglio.È possibile impedire lo scorrimento orizzontale quando overflow-x è nascosto?

C'è un modo per impedire al browser di scorrere orizzontalmente?

Come nota a margine: Safari 4.0.4 scorre solo orizzontalmente a volte, e lo scorrimento sembra "appiccicoso" e "nervoso", mentre Firefox scorre sempre in modo scorrevole orizzontalmente.

fonte

2010-04-15 Andrew LeClair

si potrebbe provare a impostare in CSS:

html{ 
    overflow-x: hidden; 
}

invece di utilizzo body selettore. L'ho provato e funziona in firefox.

fonte

2010-04-15 20:12:17

Ho anche provato questo in FF, e sembra avere lo stesso identico problema. La soluzione migliore sarebbe, come ha notato @Chaulky, semplicemente impostare il display su "none". Se vuoi che questo appaia, fai qualche js/jquery per spostarlo di nuovo. – Automatico

Se tutto il resto fallisce, è possibile utilizzare Javascript per forzare costantemente il browser a scorrere verso sinistra utilizzando window.scrollTo (xpos, ypos). Per xpos si vorrà usare 0 e ypos per ottenere la posizione corrente dello scroll dell'utente, assumendo che si desideri consentire lo scrolling verticale.

È possibile inserire la propria chiamata di funzione nel gestore di eventi window.onscroll o in un intervallo di javascript che viene eseguito ogni 100 ms circa. Sta a te. Se hai bisogno di esempi di codice, basta chiedere.

fonte

2010-04-16 17:13:50 InvisibleBacon

Per evitare lo scorrimento, si potrebbe usare una combinazione di 'overflow: hidden',' window.onscroll' e 'window.scrollTo' per nascondere le scrollbars e indirizzare l'utente a 0,0 (in alto a sinistra di sullo schermo) sullo scroll, mantenendo efficacemente la pagina Web nella sua posizione corrente (o ypos come posizione corrente dello scroll dell'utente per mantenere lo scorrimento verticale come suggerito da @InvisibleBacon) – Seagrass

Questo sarebbe meglio capire se si ha un esempio.

è un lungo URL o qualcosa senza spazi bianchi? Hai impostato white-space:nowrap; sull'elemento?

Se si dispone di un contenitore con una dimensione definita (uno che si adatta nella finestra), il testo dovrebbe aderire correttamente, (a meno che non si tratta di una linea lunga senza spazi)

fonte

2010-04-17 05:17:49

Credo che la vera domanda è: perché hai il tuo contenuto che trabocca dalle dimensioni della pagina? Questo contenuto non vuoi che gli utenti vedano effettivamente? In tal caso, mettilo in un div da qualche parte e imposta la visualizzazione su none. Ciò eviterebbe completamente il problema dell'overflow.

Se esiste un motivo legittimo, si desidera che il contenitore venga sovraccaricato, quindi impostare la dimensione del contenitore in modo esplicito, quindi overflow-x su nascosto. Non l'ho testato, ma ciò dovrebbe impedire il comportamento corrente. In caso contrario, provare a utilizzare un div anziché il tag del corpo. I browser potrebbero comportarsi in modo strano perché sta lavorando sull'etichetta del corpo stesso.

fonte

2010-04-17 16:09:44 Chaulky

Vorrei entrare in Chrome e aprire gli strumenti di sviluppo su un desktop. Rimuovi la proprietà overflow-x. Quindi procedi con l'eliminazione di ogni elemento genitore sulla tua pagina. Quando vedi che la barra di scorrimento orizzontale scompare, sai di aver trovato il tuo problema. Quindi tuffati in quell'elemento. La mia scommessa è che hai una larghezza del 100% e di un margine messo su di essa. Rimuovere il margine se questo è il caso.

fonte

2013-05-10 16:16:56

Vecchia discussione, ma potrebbe essere utile per le persone che cercano la risposta giusta!

Impostare "overflow: hidden" sul div genitore dell'elemento che è più largo della finestra del browser (non html o body come fareste normalmente), che interromperà lo scroll con de pad o il pad delle frecce ..

fonte

2013-06-01 23:26:04 Clauce

È possibile impedire lo scorrimento orizzontale quando overflow-x è nascosto?

risposta

Problemi correlati