Colorbox arrête le défilement de l'arrière-plan et revient au même endroit sur la page parentale

Question

J'ai une liste non ordonnée que j'ai créée dans Drupal 7 en utilisant des vues. Chaque élément de la liste a un lien qui ouvre une boîte de couleurs. Si vous placez la souris sur le fond délavé de la boîte de couleur (qui est la page parent), vous pouvez faire défiler la page parent. Ce que je souhaite, c'est que la page parent arrête de défiler et revienne à la même position/ancrage sur la page parent lorsqu'elle est fermée.

En cherchant parmi les questions posées ici, j'ai trouvé le code :

$(document).bind('cbox_open', function () {
    $('html').css({ overflow: 'hidden' });
}).bind('cbox_closed', function () {
    $('html').css({ overflow: 'auto' });
}); 

Le code ci-dessus fonctionne mais ramène le défilement de la page parent en haut de la page.

Cela fonctionnerait si je pouvais le faire de manière dynamique ;

$("html,body").scrollTop(400); // 300 is just a example

Des idées ?

Answer 1

Kannix a compris. Je cacherais simplement le débordement sur le corps, le débordement du html est probablement correct.

$(document).bind('cbox_open', function() {
    $('body').css({ overflow: 'hidden' });
}).bind('cbox_closed', function() {
    $('body').css({ overflow: '' });
});​

Cependant, il ne devrait pas revenir en haut de la page. Le fait de définir le top de défilement ne fait que masquer un autre problème (comme le fait de ne pas annuler l'action par défaut d'un élément d'ancrage cliqué).

Answer 2

Je pense que vous pouvez faire quelque chose comme ça :

var position;
$(document).bind('cbox_open', function() {
    position = $("html,body").scrollTop();
    $('html').css({
        overflow: 'hidden'
    });
}).bind('cbox_closed', function() {
    $('html').css({
        overflow: 'auto'
    });
    $("html,body").scrollTop(position);
});​

Answer 3

Pour l'iphone/ipad, j'ai cette solution qui fonctionne très bien !

$(document).bind('cbox_open', function() {
    var position = $('body').scrollTop();
        $('body').attr("data-position", position);
        $('body').css({position : 'fixed', top: '-' + position + 'px'});
    }).bind('cbox_closed', function() {
        $('body').css({position : 'relative', top: '0'}); 
        var position = $('body').attr("data-position");
        $('body').scrollTop(position);
    });

Answer 4

J'ai deux optimisations à proposer :

1. La meilleure approche serait d'ajouter et de supprimer une classe css. Si vous faites cela, vous pouvez être sûr que tout a été "réinitialisé" après votre départ.
2. si vous utilisez cbox_cleanup en faveur de cbox_closed, l'utilisateur remarquera à peine le "saut" du contenu.

Ma solution serait donc la suivante :

$(document).bind('cbox_open', function() {
  $('html').addClass("noScrollSimple");
}).bind('cbox_cleanup', function() {
  $('html').removeClass("noScrollSimple");
});

.noScrollSimple {
  overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>