Comment désactiver les barres de défilement avec JavaScript?

Question

Je dois verrouiller les barres de défilement du navigateur lorsque je montre un div représentant une fenêtre modale dans Internet Explorer 7 uniquement. J'ai trouvé que je pouvais utiliser document.body.style.overflow = 'hidden' sur Google, mais cela ne fonctionne pas pour IE7. J'ai également essayé avec document.body.scroll = "non" , qui fonctionne mais uniquement après avoir passé la souris sur la barre de défilement: -S

Quelqu'un connaît-il une meilleure approche?

Merci

Answer 1

Pour répondre à vos diverses questions (y compris celle de votre autre commentaire), je pense que vous utilisez la mauvaise méthode de positionnement.

Essayez la position: corrigé . C'est fondamentalement la même chose que position: absolute , sauf que c'est relatif à la fenêtre de visualisation absolue. Par exemple, si l'utilisateur fait défiler l'écran, l'élément reste au même endroit sur l'écran.

En gardant cela à l’esprit, vous pouvez disposer une superposition position: fixe . Dans ce cadre, vous pouvez avoir votre position: absolute (ou fixé à nouveau, si vous préférez, il ne devrait pas faire faire la différence) .

Answer 2

Configurez votre div de superposition modale pour remplir le corps. Même s'ils défilent, ils ne peuvent rien faire car tout est caché dessous.

Answer 3

vous pouvez également masquer les barres de défilement en utilisant overflow: hidden afin que l'utilisateur ne voie pas les barres de défilement et ne soit pas tenté de le parcourir:)

Answer 4

Cela peut vous aider:

documentOBJ = {
    /*Width and Height of the avaible viewport, what you'r seeing*/
    window : {
        x : function(){return (document.documentElement && document.documentElement.clientWidth) || window.innerWidth || self.innerWidth || document.body.clientWidth; },
        y : function(){return (document.documentElement && document.documentElement.clientHeight) || window.innerHeight || self.innerHeight || document.body.clientHeight;}
    },

    /*Scroll offset*/ 
    scroll : {
        x : function(){return ( document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset || self.pageXOffset || document.body.scrollLeft; },
        y : function(){return ( document.documentElement && document.documentElement.scrollTop) || window.pageYOffset || self.pageYOffset || document.body.scrollTop; }
    },

    /*Height and width of the total of the xhtml in a page*/
    page : {
        x : function(){return (document.documentElement && document.documentElement.scrollWidth) ? document.documentElement.scrollWidth : (document.body.scrollWidth > document.body.offsetWidth) ? document.body.scrollWidth : document.body.offsetWidth; },
        y : function(){return (document.documentElement && document.documentElement.scrollHeight) ? document.documentElement.scrollHeight : (document.body.scrollHeight > document.body.offsetHeight) ? document.body.scrollHeight : document.body.offsetHeight; }
    },
    pointer : {}
}