CSS スクロール バー スタイルは IE8 および Chrome ブラウザとどのように互換性がありますか?

CSS チュートリアル

最近、Web サイトを改善していたときに、ナビゲーションの別の列をクリックすると、Web ページ上のテキストが左右に点滅 (ドリフト) することに偶然気づきました。慎重に調べて考えた結果、問題はブラウザの右側のスクロール バーにあることがわかりました。つまり、Web ページのコンテンツの高さが 1 画面未満の場合、右側にスクロール バーが存在しません。このときの画面幅はモニター全体の幅(1440とする)とし、Webページコンテンツの高さが1画面の場合はスクロールバー幅の1440を超える場合の画面幅を計算します。このため、margin: 0 auto に設定して短画面と長画面を切り替えると、Web ページにわずかなカクつき感が発生します。

上記の問題に基づいて、私はそれを解決する方法を考えていましたが、絶え間ない試みの結果、最終的に、この問題はさまざまなブラウザのパフォーマンスにも依存するため、基本的に完全に解決することはできないという結論に達しました。 IE8、Sogou、Chrome の 3 つのブラウザをテストに使用します。ご存知のとおり、Sogou ブラウザの最新バージョンには互換性 (IE コア) と高速 (WebKit コア) の 2 つのモードがあります。高速モードでは、Sogou のパフォーマンスが向上します。すでに Chrome に匹敵します (またはまだ違いがわかりません) が、奇妙なことに、互換モードでは、IE カーネルが呼び出されますが、たとえば、短い Web の場合は動作が異なります。 (1 つの画面には十分ではありません))、Sogou ではスクロール バーは表示されませんが、画面が短いかどうかに関係なく、スクロール バー用に画面の右側に空白の幅が確保されます。長い画面では、計算された幅は常に 1440 スクロール バーの幅になりますが、IE8 ではこの限りではなく、画面が短い場合にはスクロール バーの代替幅が表示されず、幅が自動的に追加されます。これは Chrome のパフォーマンスと同じで、驚くべきことです。現在、ブラウザの種類が多すぎてすべてに対応させるのは不可能なので、このあたりの調整は諦める予定です。

問題は解決しませんでしたが、最終的にスクロールバーが少し美化され、基本的にページの色と一致しました。スクロール バーの CSS スタイルは IE では常に優れていましたが、Chrome では目をつぶって、インターネットで多くの情報を調べたり、主要なフォーラムを歩き回ったりしましたが、基本的に Chrome のスクロール バーは実装できないと言われていました。 CSS を使ってシミュレートするなど、最終的には JS や画像を使用するのが簡単ですが、驚くべきことに、Chrome のスクロール バーの幅はコードで設定できます。試してみたら良い感じだったので、記録してください (コメントを含め、必要に応じてカラーコードを変更できます):
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）颜色*/ }

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;  
}

以上がCSS スクロール バー スタイルは IE8 および Chrome ブラウザとどのように互換性がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。