CSS 스크롤 막대 스타일은 IE8 및 Chrome 브라우저와 어떻게 호환됩니까?

CSS Tutorial

최근에 웹사이트를 개선하던 중 네비게이션에서 다른 열을 클릭하면 웹페이지의 텍스트가 좌우로 깜박이는 것을 우연히 발견했습니다. 문제는 브라우저의 오른쪽에 있다는 것을 발견했습니다. 즉, 웹 페이지 콘텐츠의 높이가 한 화면보다 작을 때 오른쪽에 스크롤 막대가 없습니다. 이때 화면 너비는 모니터 전체의 너비(1440으로 가정)이어야 하며, 웹 페이지 콘텐츠의 높이가 1개 화면을 초과하는 경우 계산된 화면 너비는 1440(스크롤 막대 너비)이 되어야 합니다. 이러한 이유로 margin: 0 auto를 설정하고 짧은 화면과 긴 화면 사이를 전환하면 웹 페이지에 약간의 떨림 현상이 발생합니다.

위 문제를 바탕으로 어떻게 해결해야 할지 고민하다가, 계속해서 시도한 끝에 이 문제는 브라우저 성능에 따라 달라지기 때문에 기본적으로 완전히 해결할 수는 없다는 결론에 도달했습니다. 테스트를 위해 IE8, Sogou 및 Chrome 세 가지 브라우저를 사용하세요. 우리 모두 알고 있듯이 최신 버전의 Sogou 브라우저에는 호환성(IE 코어)과 고속(WebKit 코어)의 두 가지 모드가 있습니다. 고속 모드에서는 Sogou의 성능이 향상됩니다. 이미 Chrome과 유사하지만(또는 아직 차이점을 본 적이 없습니다) 이상한 점은 호환 모드에서는 IE 커널이 호출되지만 예를 들어 짧은 웹의 경우 순수 IE8과 다르게 동작한다는 것입니다. 페이지(한 화면에는 충분하지 않음)), Sogou는 스크롤 막대를 표시하지 않지만 화면 오른쪽에 스크롤 막대를 위한 빈 너비를 남겨둡니다. 즉, 짧은 화면이나 화면에 관계없이 Sogou 호환 모드를 위한 것입니다. 긴 화면의 경우 계산된 너비는 항상 1440 스크롤 막대 너비입니다. 그러나 IE8에서는 그렇지 않습니다. 화면이 짧을 때는 스크롤 막대의 예약된 대체 너비가 나타나지 않으며 너비는 자동으로 추가됩니다. 화면이 길어요. Chrome의 성능과 똑같아서 정말 놀랍습니다! 현재 시중에 나와 있는 브라우저의 종류가 너무 많아서 모든 브라우저와 호환되게 만드는 것은 불가능하므로 이 부분에 대한 조정은 포기할 계획입니다.

문제는 해결되지 않았지만 드디어 스크롤바가 조금 미려해졌고, 기본적으로 페이지 색상과 일치하게 되었습니다. 스크롤바의 CSS 스타일은 늘 IE에서 아주 좋았는데, 크롬이 눈감아버렸습니다. 인터넷에서 많은 정보를 참고하고 주요 포럼을 돌아다녔더니 기본적으로 크롬의 스크롤바는 구현할 수 없다고 했습니다. 결국 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!