2010-05-25 4 views
4

// modifier Major, désolé au lit avec des maux de dos, vissé aprèsDéterminer si overflow: auto aurait été déclenchée sur un div

L'une des agences de publicité, je code pour me avait mis en place un défilement alternatif solution parce que vous savez comment les designers détestent les choses qui fonctionnent mais qui ne sont pas belles.

La solution de défilement est appliquée à divs avec overflow:hidden et utilise scrollTo() de jQuery. C'est un ensemble de boutons haut et bas qui permettent de déplacer le contenu. Donc, ceci est marié par endroits à leur CMS. Ce que je n'ai pas encore pu trier, c'est comment cacher l'interface de défilement quand overflow:auto n'aurait pas été déclenchée par le contenu du CMS et les boutons ne sont pas nécessaires.

Les divs ont des hauteurs et des largeurs définies. Puis-je détecter du contenu caché? Ou mesurer la hauteur du contenu div?

Des idées?

Répondre

3

Vous voulez donc obtenir la hauteur d'un élément caché? J'ai trouvé ce post peut-être c'est ce que vous cherchez. Il utilise jQuery, mais le concept est le même. J'espère que cela t'aides!

Metropolis

+0

Merci Metropolis! Je suis tombé sur la même idée et posté avant de voir le vôtre. Infiniment reconnaissant! – jerrygarciuh

+0

Np heureux que c'était ce que vous vouliez :) – Metropolis

1

Pouvez-vous expliquer cela mieux? Vous voulez masquer la barre de défilement d'un ensemble div pour déborder: auto quand il n'y a pas assez de texte pour déborder? Le navigateur le fait pour vous.

Vous souhaitez masquer la barre de défilement d'un ensemble div pour déborder automatiquement lorsque vous le faites défiler jusqu'à un certain point, mais que vous ne le regardez pas ou que vous ne le survolez pas? Ce sera un peu compliqué.

Si vous voulez savoir si un div a trop-plein à quelque chose, vous faites juste:

object.style.overflow 

et il vous donnera une chaîne.

valeurs possibles:

visible 
hidden 
scroll 
auto 
inherit 

vous pouvez définir déborder de la même manière

http://www.w3schools.com/css/pr_pos_overflow.asp

de ce que je comprends est que vous avez maintenant ces divs avec rouleau caché, mais un designer graphique de défilement personnalisé barre et vous utilisez scrollTo pour faire le défilement réel. Mais vous avez un problème quand vous n'avez pas assez de données pour avoir besoin d'une barre de défilement, mais votre contenu graphique apparaît de toute façon, donc vous voulez le cacher. Donc, la vraie question ici est comment obtenez-vous la hauteur du contenu?

Vous voulez la propriété offsetHeight, mais je suis assez sûr que c'est toujours IE.

+0

Désolé pour le poste confus. Le mal de dos me rend mal à l'aise. Edité le post. – jerrygarciuh

1

J'espère que je me trompe, mais vous auriez besoin d'émuler le débordement en définissant des propriétés en utilisant js, alors vous pouvez obtenir ces valeurs en utilisant getAttribute ou votre propre méthode. Sinon, lorsque vous définissez overflow sur auto, alors le navigateur fera sa propre chose et la seule valeur renvoyée comme une propriété de dépassement serait une chaîne comme 'auto'.

+0

Désolé, le débordement n'est jamais réglé sur auto ici. C'est une barre de défilement faux qui déplace le contenu en utilisant le scrollTo de jQuery() – jerrygarciuh

1

Que voulez-vous dire par CMS?

Oui, vous pouvez accéder à la hauteur du contenu de la div, puisque vous pouvez accéder à tous les enfants de la div en JavaScript. (Désolé de ne pas inclure d'exemple, je n'ai pas travaillé avec JS pur depuis un moment maintenant, donc je ne veux pas vous pointer dans la mauvaise direction.) En faisant cela, vous serez en mesure de "détecter le contenu caché" "et ensuite être capable de faire ce que vous voulez réellement faire.À propos de votre première question, je doute que vous puissiez contrôler les barres de défilement une fois que vous avez réglé le dépassement sur automatique.

+0

Système de gestion de contenu (CMS) – Metropolis

0

Utilisation hauteur jQuery() sur une div contenant le contenu que je suis en mesure de montrer/cacher l'interface utilisateur selon les besoins en fonction de si la hauteur est supérieure à la hauteur CSS du div avec overflow: hidden.

Questions connexes