[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/