[CSS] CSS3 Scrollbar, jQuery scrollbar (Webkit용)

크롬에 회전을 했을 때, 나타나지 않는 경우가 있습니다. 

CSS3를 이용해서 적용해 보면 다음과 같이 처리하면, 보이게 됩니다.

본문예제

<div style="overflow: scroll; width: 300px; padding: 10px; background-color: rgb(255, 215, 0); position: absolute; -webkit-transform: rotate(14deg); left: 175px; top: 64px; height: 88px;">

친구의 이야기를 다 들었을 때 나에게는, 친구의 의도와 상관 없이, 거대한 암흑의 이미지가 떠올라 있었다.<br />

<br /><br /><br />

다른 친구들은 그 친구의 이야기를 거의 듣지 않은 듯싶었다. 왜냐하면 토요일 오후였기 때문이다. 그러나 나에게는 친구의 이야기가 화창한 토요일 오후와 대비되어 더욱 강렬하게 다가왔었다. 무엇보다도 친구의 들뜨고 밝은 표정이 깊은 인상을 남겼다.<br /><br /><br />

</div>

CSS3 SCROLL

http://techstream.org/Web-Design/CSS3-Scroll-Bar

<style type="text/css">

::-webkit-scrollbar {

     width:10px;    // Vertical bar

     height:10px;   // Horizontal bar

     background:#000;

}

::-webkit-scrollbar-track-piece  {

    background-color: #3b3b3b;

}

::-webkit-scrollbar-thumb {

   width: 15px;

   background:rgba(255, 255, 255, 1);

}

</style>

Demo

http://demo.techstream.org/CSS3-Scroll-Bar/index3.html

jQuery plugins!! : jScrollbar

http://www.myjqueryplugins.com/jquery-plugin/jscrollbar

http://css-tricks.com/custom-scrollbars-in-webkit/