2009-09-07 8 views
1

Salut, J'ai fait ce site il y a un certain temps dans mes jours de table, mais je viens de réaliser que la plongée à défilement horizontal ne fonctionne pas dans Safari.horizontal scrolling div ne fonctionne pas dans Safari

#galleryscroller { 
    overflow-x:scroll ; 
    overflow-y:hidden; 
    overflow:-moz-scrollbars-horizontal !important; 
    height:138px; 
    width:360px; 
} 

<div id="galleryscroller"> 
<table width="100%" border="0" cellspacing="0" cellpadding="6"> 
<tr align="left" valign="middle"> 
<td><a onclick="return showPic(this)" href="blahblah.jpg"><img src="blahblah.jpg" alt="Events" width="76" height="100" border="0" /></a></td> 
<td><a onclick="return showPic(this)" href="blahblah.jpg"><img src="blahblah.jpg" alt="Events" width="100" height="67" border="0" /></a></td> 
</tr> 
</table> 
</div> 

Le site est ici - www.tobymurphy.com

Quelqu'un peut-il aider ?, jusqu'à présent pas de réponses sur Google ont travaillé ...

Répondre

4

Il y a une bizarrerie avec le moteur WebKit avec défilement lorsque vous devez cachez l'une des barres de défilement. Essayez ce qui suit:

#galleryscroller { 
    overflow: none; 
    overflow-x: auto; 
    display: block; 
    height: 138px; 
    width: 360px; 
} 

Notez la première réinitialisation pour désactiver le débordement.

+0

Merci, je viens de donner votre suggestion d'essayer, mais malheureusement, il ne veut toujours pas jouer au ballon. Ça semble être un truc difficile! – morktron

+1

Avez-vous essayé de changer le Doctype pour voir s'il y a des différences? Mon exemple fonctionne sur un site utilisant XHTML 1.1 Doctype. Il peut également y avoir des problèmes avec le DIV de défilement étant entièrement contenu dans une autre cellule TD de table - cette cellule pourrait affecter les calculs de largeur du contenu. – ferdley

+0

Merci, vous avez raison de dire que le DIV est contenu dans une cellule de table qui cause le problème. Je suppose que le moment est venu de le rendre inactif. Merci beaucoup vous êtes une légende! :) – morktron

2

Ajoutez un white-space: nowrap; au style #galleryscroller. Cela devrait le réparer, si cela ne fonctionne pas, essayez de rendre la position absolue.

+0

A travaillé parfaitement merci! – AndrewLeonardi

2

J'ai moi-même découvert ce problème "ne fera pas défiler DIV" récemment. Le problème existe dans Safari 6 (WebKit), mais il n'y a pas de problème dans Chrome (également WebKit). On ne peut donc pas prétendre qu'il s'agit d'un "problème de WebKit".

Dans mon cas, la barre de défilement verticale s'affiche dans Safari 6, mais elle est figée. Cependant, si vous prenez le texte à l'intérieur de la table (qui est à l'intérieur de la DIV), puis faites glisser ce texte de haut en bas, il défilera.

Je peux aussi confirmer que l'ajout du style suivant à la DIV ne résout pas le problème:

white-space: nowrap; 

Vous pouvez voir le problème sur mon site ici (à partir du 1er Mars, 2013 de toute façon): http://visionsecurity.jp/jp/buy.html

C'est en japonais, mais vous pouvez toujours voir le problème. Il suffit de cliquer sur le carré jaune le plus à droite sur la carte du Japon qui est l'un en dessous du premier carré jaune à l'extrême droite.

Mais la «réponse fondamentale» à la question originale est la suivante: il n'y a pas de réponse/solution que nous pouvons effectuer car ce problème de défilement DIV semble être un BUG IN SAFARI. J'ai parlé à des programmeurs web qui me l'ont dit. Donc, dans ce cas, la «solution» finale au problème semblerait provenir exclusivement d'Apple. La seule chose que nous concepteurs web et les programmeurs peuvent faire prod simplement Apple pour accélérer le rythme de réparer le bogue dans leur navigateur:

http://www.apple.com/feedback/safari.html