Bizarre puzzle de fonctionnalités de barre de défilement HTML/JS/CSS

Question

Donc, j'ai un objectif particulièrement unique que je souhaite atteindre avec CSS, HTML et jQuery. Fondamentalement, j'ai un élément de page que lorsque je souris dessus, je veux que le défilement soit désactivé. J'accomplis actuellement ceci en plaçant la propriété de débordement du corps à "cachée". Cependant, les barres de défilement qui disparaissent signifient que le contenu se déplace vers la droite pour remplir le vide créé par la barre de défilement verticale qui disparaît. Est-ce qu'il y a loin de faire que la page se comporte comme un débordement: caché mais toujours afficher des espaces réservés de barre de défilement?

Answer 1

Vous pourriez le faire en ayant un div dans un div, de sorte que le div externe est scrollable (auto), puis redimensionner le div interne sur mouseover pour être exactement la bonne taille.

Ainsi par exemple ...

HTML:

<div id="outerTest" > 
    <div id="innerTest" > 
     ...content goes here... 
    </div> 
</div> 

CSS:

#outerTest { 
    width: 100px; 
    height: 100px; 
    overflow: scroll; 
} 
#innerTest { 
    overflow: hidden; 
} 

jQuery:

$("#outerTest").hover(function() { 
    $("#innerTest").css({width: "100%", height: "100%"}); 
}, function() { 
    $("#innerTest").css({width: "auto", height: "auto"}); 
}); 

Answer 2

Vous pouvez également implémenter une barre de défilement basée sur jQuery. jScrollPane