Masque de calque contextuel JS, masquer les détails de la barre de défilement de la page d'arrière-plan, optimisation des compétences d'analyse_javascript

1. Comment supprimer la barre de défilement

Ajoutez simplement l'attribut overflow:hidden au corps. Cela ne prendra pas effet dans IE6 et 7. Vous devez ajouter l'attribut overflow:hidden au html

Le style doit être identifié à l'aide de hacks pour IE6, 7 et autres navigateurs. En effet, si le code HTML ou le corps est overflow:hidden lorsque la page est déroulée, la page sous la couche contextuelle transparente sera partiellement visible. masqué normalement. Par transparence L'échelle de gris que vous voyez est liée à la couleur d'arrière-plan définie par la plateforme et l'utilisateur.

Après avoir supprimé la barre de défilement du corps ou du HTML, la page aura une barre de défilement largeur/2 sauts ! Ce saut est très mauvais pour l'expérience utilisateur, ajoutez donc un rembourrage droit au corps, dont la taille correspond à la largeur de la barre de défilement. La largeur de la barre de défilement sous la plate-forme Windows est de 17 pixels. La largeur de la barre de défilement est différente pour différents scrollers sous la plate-forme Linux. Vous pouvez utiliser le code approprié pour calculer la largeur de la barre de défilement. Ce qui suit prend la plate-forme Windows. à titre d'exemple.

Codes associés :

document.documentElement.style.cssText = ‘overflow:none;+overflow:hidden;_overflow:hidden;';
document.body.style.cssText = ‘overflow:hidden;+overflow:none;_overflow:none;padding:0 17px 0 0;';

Le code ci-dessus ne prend pas en compte si le HTML ou le corps a des styles en ligne. Si le HTML ou le corps a des styles en ligne, ils doivent être accumulés, sinon les styles d'origine seront effacés.

2. Autres moyens de supprimer les dangers cachés en faisant défiler la page (pour éviter toute utilisation abusive)

Après avoir masqué la barre de défilement, la page ne bougera pas lors du défilement avec la molette de la souris. Je pensais que c'était ok, mais non...

Les raccourcis clavier peuvent également exécuter certaines opérations du navigateur liées au défilement des pages, telles que les touches haut et bas, les touches de changement de page, etc. Pour les raccourcis clavier, leurs actions par défaut doivent être annulées.

3. Ajouter un style de calque contextuel

Ajouter un style global au corps (compatible avec IE6)

hauteur : 100 % ;

Ajouter un style de défilement à la couche élastique

overflow-y: auto;
width: 100%;
height: 100%;
left:0;
_padding:0 17px 0 0;   //IE6bug，子元素绝对定位后对于父元素的padding依然有效

Le masque de calque contextuel JS ci-dessus, l'analyse de l'optimisation des détails de la barre de défilement de la page d'arrière-plan cachée est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère également que vous prendrez en charge Script Home.