overflow-x:hidden encore pouvez faire défiler
Le problème est:
J'ai une pleine largeur de la barre de menu, qui est faite par la création d'une grande marge à droite et à gauche. Cette marge doit être recadrée par overflow-x: hidden
, et c'est... pas de barres de défilement, tout (visuellement) est ok...
Mais, si vous faites glisser la page (à l'aide de Mac Lion) ou faites défiler vers la droite, la page affiche un énorme bar, qui devrait avoir été recadrée par le overflow-x:hidden
.
CSS
html {
margin:0;
padding:0;
overflow-x:hidden;
}
body {
margin: 0 auto;
width: 950px;
}
.full, .f_right {
margin-right: -3000px !important;
padding-right: 3000px !important;
}
.full, .f_left {
margin-left: -3000px !important;
padding-left: 3000px !important;
}
Voici un lien: http://jsfiddle.net/NicosKaralis/PcLed/1/
Vous devez ouvrir dans le projet pour voir... le jsfiddle css il fait en quelque sorte le travail.
@Krazer
j'ai et de la structure comme ceci:
body
div#container
div#menu_bar
div#links
div#full_bar
div#content_body
...
la #container est un centré div et a une largeur fixe de 950px,
le #full_bar est une barre qui s'étend sur l'ensemble de la fenêtre, d'un côté à l'autre
si j'ai mis une largeur de 100% dans #full_bar il obtiendra uniquement l'intérieur de la largeur et non la largeur de la fenêtre
Vous devez vous connecter pour publier un commentaire.
Je ne pense pas qu'il existe un moyen d'empêcher le défilement d'un élément sans l'aide de JavaScript. Avec JS, cependant, il est assez facile à mettre en scrollLeft à 0 onscroll.
J'ai eu exactement ce même problème. Je l'ai résolu en mettant
overflow-x: hidden;
sur les deux labody
ethtml
.CSS:
HTML:
<div style="overflow-x:auto;"></div>
enroulé autour de la MathJax équation a fonctionné pour moi.Il y a une autre façon de résoudre ce problème avec une seule ligne de code:
Cela a résolu mes problèmes sur webkit (Mac)
Référence: http://www.tonylea.com/2010/safari-overflow-hidden-problem/
overflow:hidden
surhtml
etbody
avec la largeur/hauteur de 100% n'a pas de travail sans cette ligne supplémentaire. Merci!html, body {
overflow-x: hidden;
width: 100%;
}
Résolu le problème pour moi, sauf pour IE - vous pouvez toujours faire glisser le site à droite, si vous faites un effort pour le faire.
À l'aide de
overflow: hidden;
supprime la barre de défilement verticale, donc ce n'est pas une solution.Je ne parvenais pas à trouver une meilleure solution à l'aide de JavaScript.
J'ai trouvé la solution ici https://stackoverflow.com/a/9399429/622041
Vous aurez ont de mettre un
#wrapper
autour de votre contenu.overflow:hidden
sur lebody
ne fonctionne pas.Et voici le code HTML:
De Tisserand Offcanvas démo http://jasonweaver.name/lab/offcanvas/
Envelopper le contenu avec:
Cela limite seulement la largeur et a travaillé dans des occasions similaires a aussi empêché de défilement tout en faisant glisser.
Essayer la position fixe de l'élément html, mais cette désactiver le défilement deux sens.
Comment sur le réglage de la largeur sur le contenu du corps, et la déformation de la
#container
autour de la#menu_bar
et#content_body
?CSS exemple.
min-height
trop si tu voulais.Débordement sur le
<body>
et la<html>
balises a travaillé pour moi aussi.Envisager l'utilisation de max-width pour html.
tenez-moi au courant si ça ne marche pas.