CSS 스크롤 막대 스타일 크로스 브라우저

CSS 스크롤 막대 스타일 크로스 브라우저

이 질문에는 이미 다음과 같은 답이 있습니다.

div의 CSS 사용자 정의 스크롤 막대 (20개 답변)

마감됨8년 전에.

커뮤니티는 1년 전에 이 질문을 다시 시작할지 여부를 검토한 후 이 질문을 닫았습니다.

원래 종료 이유가 해결되지 않았습니다.

CSS 스크롤바 스타일 크로스 브라우저를 어떻게 정의할 수 있습니까?저는 이 코드를 테스트했습니다. IE와 오페라에서만 작동하지만 크롬, 사파리, 파이어폭스에서는 실패했습니다.

<style type="text/css">
<!--    
body {
    scrollbar-face-color: #000000;
    scrollbar-shadow-color: #2D2C4D;
    scrollbar-highlight-color:#7D7E94;
    scrollbar-3dlight-color: #7D7E94;
    scrollbar-darkshadow-color: #2D2C4D;
    scrollbar-track-color: #7D7E94;
    scrollbar-arrow-color: #C1C1D1;
}
-->
</style>

웹킷의 스크롤바 지원은 상당히 정교합니다.이 CSS는 밝은 회색 트랙과 어두운 엄지손가락을 가진 매우 작은 스크롤바를 제공합니다.

::-webkit-scrollbar
{
  width: 12px;  /* for vertical scrollbars */
  height: 12px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track
{
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb
{
  background: rgba(0, 0, 0, 0.5);
}

이 답변은 추가 정보의 훌륭한 출처입니다.

스크롤바 CSS 스타일은 마이크로소프트 개발자들에 의해 발명된 특이한 것입니다.그것들은 CSS를 위한 W3C 표준의 일부가 아니기 때문에 대부분의 브라우저는 그것들을 무시합니다.

jScrollPane은 브라우저 스크롤바를 넘나들 수 있는 좋은 솔루션이며 성능이 저하됩니다.

나노스크롤JS는 단순히 사용하기 위한 것입니다.난 항상 그것들을 사용합니다...

브라우저 호환성:

• IE7+
• 파이어폭스 3+
• 크롬
• 사파리 4+
• 오페라 11.60+

모바일 브라우저 지원:

• iOS 5+ (iPhone, iPad 및 iPod Touch)
• iOS 4(폴리필 포함)
• 안드로이드 파이어폭스
• Android 2.2/2.3 기본 브라우저(폴리필 포함)
• Android Opera 11.6(폴리필 포함)

설명서의 코드 예제,

1. 마크업 - 플러그인을 작동시키려면 다음 유형의 마크업 구조가 필요합니다.

<div id="about" class="nano">
    <div class="nano-content"> ... content here ...  </div>
</div>

IE6 이후에는 이러한 속성을 사용하여 스크롤 막대를 사용자 지정할 수 없다고 생각합니다.위에 링크된 Chris Coyier 기사는 스크롤 바를 사용자 정의하기 위한 웹킷 독점 CSS 옵션에 대해 자세히 설명합니다.

완전히 사용자 지정할 수 있는 브라우저 간 솔루션을 원한다면 JS를 사용해야 합니다.다음은 FaceScroll이라는 멋진 플러그인에 대한 링크입니다. http://www.dynamicdrive.com/dynamicindex11/facescroll/index.htm

이것을 사용해 보세요. IE, Safari 및 FF에서 사용하기 쉽고 테스트되었으며 잘 작동했고 많은 사람들이 필요하지 않습니다.div그 주변에 그냥 덧붙입니다.id그리고 당신이 Js와 CSS 파일을 연결한 후에는 잘 작동할 것입니다.면 스크롤 사용자 정의 스크롤 막대

도움이 되길 바랍니다.

1단계 편집: 페이지 섹션에 다음 스크립트를 추가합니다.

<link href="general.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="facescroll.js"></script>
<script type="text/javascript">
    jQuery(function(){ // on page DOM load
        $('#demo1').alternateScroll();
        $('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });  
    })
</script>

2단계: 그런 다음 페이지의 본문에서 아래 샘플 HTML 블록을 페이지에 추가합니다.

<p><b>Scrollbar (default style) shows onMouseover</b></p>

<div id="demo1" style="width:300px; height:250px; padding:8px; background:lightyellow; border:1px solid gray; resize:both; overflow:scroll">

From Wikipedia- Gunpowder, also known since in the late 19th century as black powder, was the first chemical explosive and the only one known until the mid 1800s.[2] It is a mixture of sulfur, charcoal, and potassium nitrate (saltpeter) - with the sulfur and charcoal acting as fuels, while the saltpeter works as an oxidizer.[3] Because of its 
</div>

<br />

<p><b>Scrollbar (alternate style), always shown</b></p>

<div id="demo2" style="width:400px; height:130px; padding:10px; padding-right:8px; background:lightyellow; border:1px solid gray; overflow:scroll; resize:both;">

From Wikipedia- Gunpowder, also known since in the late 19th century as black powder, was the first chemical explosive and the only one known until the mid 1800s.[2] It is a mixture of sulfur, charcoal, and potassium nitrate (saltpeter) - with the sulfur and charcoal acting as fuels, while the saltpeter works as an oxidizer.[3] Because of its 
</div>

언급URL : https://stackoverflow.com/questions/7725652/css-scrollbar-style-cross-browser