본문 바로가기

[IT/Programming]/HTML related

Customized styling of scroll bars in HTML

반응형

Customized styling of scroll bars in HTML

First posting at 2014-05-26
Cross browsing 문제가 심하긴 한듯.

Table of Contents

in Webkit browser (Chrome, Safari, Opera)

설정들은 참조해서...

		▲ default scrollbars.
		
		::-webkit-scrollbar			{ /* 1 */ }
		::-webkit-scrollbar-button		{ /* 2 */ }
		::-webkit-scrollbar-track		{ /* 3 */ }
		::-webkit-scrollbar-track-piece	{ /* 4 */ }
		::-webkit-scrollbar-thumb		{ /* 5 */ }
		::-webkit-scrollbar-corner		{ /* 6 */ }
		::-webkit-resizer			{ /* 7 */ }

		
		:horizontal
		:vertical
		:decrement
		:increment
		:start
		:end
		:double-button
		:single-button
		:no-button
		:corner-present
		:window-inactive

		
		::-webkit-scrollbar:horizontal {}
		::-webkit-scrollbar:vertical {}
		
	
Scroll bar map for webkit. 위 code에서 각 { /* 1~7 */ }이 무엇을 나타내는지 그림파일로 쉽게 보여줌. (Thanks to 출처: )

		▲ strange scrollbar to show the effect drastically. (only in webkit (Chrome, Safari, Opera))
		
		
		
	
div css style 형태로 많은걸 바꿀 수 있는듯.

in IE (Internet Explorer)

여긴 독특하게 해놓은듯 . color 정도만 바꿀 수 있는듯.
Scroll bar map for IE.

		▲ strange scrollbar to show the effect drastically. (only in IE)
		
		

		a
		b
		c
		d
		e
		f
		g
		h
		i
		j
		k
		l
		m
		n
		
	
size (width/height) 조정은 안되는듯? 어떤게 표준이 될래나? 이것도 inherit 되는거겠지? webkit 쪽이 div css style이랑 비슷해서 더 직관적이기는 한데... (오랜만에 IE 11로 열어봤는데, 왜이리 느리지? =ㅇ=;;;; IE는 정말 구리다.)

in Firefox

파폭은 CSS만으로 바꿀 수 없다는듯. (원래 있었는데, deprecated 된듯도.)

using jQuery plug-in (Cross-Browser)

누군가 cross-browser 문제를 해결하기 위해 jQuery로 짜놓은듯 함 . 공부를 조금 해야 써먹을 수 있을듯. 그리 어렵진 않은거 같긴한데, 확실히 CSS보단 귀찮은 작업.

References and Related Articles

    General

  1. circlash.tistory.com - CSS로 블로그 스크롤 바 스타일 지정하기(IE, Safari, Chrome), 2011-05-09
  2. codemug.com - Custom scrollbars for IE, Chrome and Firefox using CSS, 2013-03-04, by Jeff
  3. manos.malihu.gr - jQuery custom content scroller, last updated on 2014-05-30, by malihu
  4. Webkit

  5. css-tricks.com - Custom Scrollbars in WebKit, 2011-05-02, by Chris Coyier
  6. webkit.org - Styling scrollbars; 공식 홈페이지 같은데, 그다지 잘 정리되어 있지는 않은듯.
  7. IE

  8. Internet Explorer Dev Center - API reference - scrollbar-track-color property; 뭔가 정리가 대충만 되어 있는듯.
반응형