Comment faire de lightbox défiler la lightbox et non la page

J'utilise le plugin lightbox_me jquery pour ouvrir une lightbox lorsqu'un utilisateur clique sur un produit. Souvent, le contenu de la boîte lumineuse s'étend sous le pli et, au moment où la barre de défilement droite déplace la page entière lorsque vous faites défiler vers le bas.

J'aimerais que cela fonctionne comme la boîte à lumière la plus précise, la barre de défilement droite défilant seulement la boîte à lumière et le reste de la page reste fixe. J'ai vu quelques messages à ce sujet, mais rien ne semble fonctionner pour moi.

jQuery(function(){ $('.productBoxLink').click(function(e) { var box = $(this).siblings(".productLightboxContent").html(); $('.lightBox').lightbox_me({ centered: false, modalCSS: {top: '50px'}, onLoad: function() { $('.productLightbox').html(box); $('.productUpdateInner').show(); }, onClose: function() { $('.productUpdateInner').hide(); } }); return false; }); }); .lightBox { width: 450px; background-color: #fff; top: 400px; position: fixed; padding: 30px; text-align: center; display: none; clear: both; -moz-box-shadow: 0 0 5px #5C5C5C; -webkit-box-shadow: 0 0 5px #5C5C5C; box-shadow: 0 0 5px #5C5C5C; border-radius: 5px; }

J'ai lu que cela peut se faire avec quelques modifications à mon CSS. Est-ce que quelqu'un sait comment je peux le faire avec le code affiché? Merci!

Ajoutez ceci à .lightBox:

 height:600px; /* You need to set a specific height - px or %*/ overflow-x:scroll; /* Tell the container to scroll if the content goes beyond bounds*/

Mettre à jour

 width:100%; overflow-x:scroll;

Si vous souhaitez laisser la taille plus grande que la fenêtre, c'est très probablement en raison de votre position: fixed ligne position: fixed . Changez-le en position: absolute et vous devriez être bon.

Les deux, fixes et absolus, retirent l'élément du flux de documents, donc il ne devrait pas y avoir de changement net dans la façon dont il se présente, mais il l'ajuste à cette position spécifique et l'oblige à ne pas bouger jamais.

Je suppose qu'une réponse générale serait de faire en sorte que l'arrière-plan de la fonction lighbox (c'est-à-dire le contenu avant lightbox, le contenu principal du contenu) soit position: fixed; Et ajustez sa valeur supérieure avec javascript à une valeur négative correspondant à la position de défilement utilisateur dans le moment de l'ouverture de la boîte à lumière. En outre, la boîte à lumière devrait être position: absolute; Avec les mêmes valeurs supérieure / gauche comme s'il avait été corrigé.

Lorsque l'utilisateur ferme la boîte à lumière, les valeurs précédentes doivent être restaurées.

Ajouter à html une classe lorsque lightbox s'ouvre. Par exemple:

 .lightbox-active{overflow:hidden}

Aussi, votre lightbox devrait avoir le style suivant:

 .lightbox{overflow-x:hidden;overflow-y:scroll}

Lorsque vous fermez la boîte de lumière, vous avez retiré la classe active de lightbox de html.