Comment le style de barre de défilement CSS est-il compatible avec les navigateurs IE8 et Chrome ?

Tutoriel CSS

Lorsque j'améliorais mon site Web récemment, j'ai accidentellement découvert qu'en cliquant sur différentes colonnes dans la navigation, le texte de la page Web clignotait (dérive) à gauche et à droite. Après une inspection et une réflexion minutieuses, nous avons constaté que le problème réside dans la barre de défilement sur le côté droit du navigateur, c'est-à-dire : lorsque la hauteur du contenu de la page Web est inférieure à un écran, il n'y a pas de barre de défilement sur le côté droit ; , et la largeur d'écran calculée à ce moment doit être la largeur de l'ensemble du moniteur (supposée être de 1 440 ), et lorsque la hauteur du contenu de la page Web dépasse un écran, la largeur d'écran calculée doit être de 1 440 largeur de barre de défilement. C'est pour cette raison que lorsque vous définissez margin: 0 auto et que vous basculez entre l'écran court et l'écran long, cela provoquera une légère sensation de tremblement sur la page Web.

Sur la base du problème ci-dessus, je réfléchissais à la façon de le résoudre, mais après des tentatives constantes, je suis finalement arrivé à la conclusion que ce problème ne peut fondamentalement pas être complètement résolu, car il dépend également des performances de différents navigateurs. Prenez les trois navigateurs IE8, Sogou et Chrome pour tester. Comme nous le savons tous, la dernière version du navigateur Sogou dispose de deux modes : compatible (cœur IE) et haute vitesse (cœur WebKit). En mode haute vitesse, les performances de Sogou. est déjà comparable à Chrome. C'est proche (ou je n'ai pas encore vu la différence), mais ce qui est étrange, c'est qu'en mode compatibilité, bien que le noyau IE soit appelé, il se comporte différemment d'IE8 pur, par exemple, pour le web court. pages (pas assez pour un écran) ), bien que Sogou n'apparaisse pas de barres de défilement, il réservera une largeur vide sur le côté droit de l'écran pour les barres de défilement, c'est-à-dire pour le mode de compatibilité Sogou, quel que soit l'écran court ou. écran long, la largeur calculée sera toujours de 1440-largeur de la barre de défilement, mais ce n'est pas le cas avec IE8. La largeur alternative réservée de la barre de défilement n'apparaîtra pas lorsque l'écran est court, et la largeur sera automatiquement ajoutée lorsque. l'écran est long. C'est la même chose que les performances de Chrome, ce qui est incroyable ! Actuellement, il existe tellement de types de navigateurs sur le marché qu'il est impossible de les rendre compatibles avec tous, j'ai donc l'intention de renoncer à faire des ajustements dans ce domaine.

Bien que le problème n'ait pas été résolu, la barre de défilement a finalement été un peu embellie, et elle était fondamentalement cohérente avec la couleur de la page. Le style CSS de la barre de défilement a toujours été très bon dans IE, mais Chrome a fermé les yeux. J'ai consulté beaucoup d'informations sur Internet et me suis promené dans les principaux forums. En gros, ils ont dit que la barre de défilement de Chrome ne pouvait pas être implémentée. avec CSS. Au final, il est facile d'utiliser du JS ou des images pour simuler, etc., mais au final, il existe des articles qui fournissent des codes compatibles. Étonnamment, la largeur de la barre de défilement de Chrome peut être définie via le code. Je l'ai essayé et ça m'a fait du bien, alors je l'ai enregistré (avec commentaires, le code couleur peut être modifié selon vos besoins) :
Pour IE8 :

html,body {
scrollbar-face-color:#FB4446; /*滚动条3D表面（ThreedFace）的颜色*/ 
scrollbar-highlight-color:#fff; /*滚动条3D界面的亮边（ThreedHighlight）颜色*/ 
scrollbar-shadow-color:#eeeeee; /*滚动条3D界面的暗边（ThreedShadow）颜色*/ 
scrollbar-3dlight-color:#eeeeee; /*滚动条亮边框颜色*/ 
scrollbar-arrow-color:#000; /*滚动条方向箭头的颜色 */ 
scrollbar-track-color:#fff; /*滚动条的拖动区域(TrackBar)颜色*/
scrollbar-darkshadow-color:#fff; /*滚动条暗边框（ThreedDarkShadow）颜色*/ }

Pour Chrome :

/*---滚动条默认显示样式--*/  
::-webkit-scrollbar-thumb{  
   background-color:#FB4446;  
   height:50px;  
   outline-offset:-2px;  
   outline:2px solid #fff;  
   -webkit-border-radius:4px;  
   border: 2px solid #fff;  
}  
/*---鼠标点击滚动条显示样式--*/  
::-webkit-scrollbar-thumb:hover{  
   background-color:#F01360;  
   height:50px;  
   -webkit-border-radius:4px;  
}  
/*---滚动条大小--*/  
::-webkit-scrollbar{  
   width:8px;  
   height:8px;  
}  
/*---滚动框背景样式--*/  
::-webkit-scrollbar-track-piece{  
   background-color:#fff;  
   -webkit-border-radius:0;  
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!