Je viens d'offrir un peu de paramétrage de la solution en tfe. En particulier, j'ai ajouté un peu de contrôle supplémentaires pour s'assurer qu'il n'y a pas de changement du contenu de la page (aka page maj) lorsque la barre de défilement est réglé sur hidden.
Deux fonctions Javascript lockScroll() et unlockScroll() peuvent être définis, respectivement, de verrouiller et de déverrouiller le défilement des pages.
function lockScroll(){
$html = $('html');
$body = $('body');
var initWidth = $body.outerWidth();
var initHeight = $body.outerHeight();
var scrollPosition = [
self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
];
$html.data('scroll-position', scrollPosition);
$html.data('previous-overflow', $html.css('overflow'));
$html.css('overflow', 'hidden');
window.scrollTo(scrollPosition[0], scrollPosition[1]);
var marginR = $body.outerWidth()-initWidth;
var marginB = $body.outerHeight()-initHeight;
$body.css({'margin-right': marginR,'margin-bottom': marginB});
}
function unlockScroll(){
$html = $('html');
$body = $('body');
$html.css('overflow', $html.data('previous-overflow'));
var scrollPosition = $html.data('scroll-position');
window.scrollTo(scrollPosition[0], scrollPosition[1]);
$body.css({'margin-right': 0, 'margin-bottom', 0});
}
d'où, je suppose que l' <body> n'a pas de marge initiale.
Notez que, bien que la solution ci-dessus fonctionne dans la plupart des cas pratiques, il n'est pas définitif car il a besoin d'une personnalisation supplémentaires pour les pages qui incluent, par exemple, un en-tête avec position:fixed. Let's go dans ce cas spécial, avec un exemple. Supposer
<body>
<div id="header">My fixedheader</div>
<!--- OTHER CONTENT -->
</body>
avec
#header{position:fixed; padding:0; margin:0; width:100%}
Ensuite, il faut ajouter les éléments suivants dans les fonctions lockScroll() et unlockScroll():
function lockScroll(){
//Omissis
$('#header').css('margin-right', marginR);
}
function unlockScroll(){
//Omissis
$('#header').css('margin-right', 0);
}
Enfin, prendre soin de quelques-uns des possibles valeur initiale pour les marges ou les rembourrages.
