본문 바로가기
[IT/Programming]/HTML related

Customized styling of scroll bars in HTML

냥냥 kipid 2019. 3. 6. 10:44

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. 
		
  2. codemug.com - Custom scrollbars for IE, Chrome and Firefox using CSS, 2013-03-04, by Jeff
    3. 
		
  3. manos.malihu.gr - jQuery custom content scroller, last updated on 2014-05-30, by malihu
    4. 

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

		
    IE
    
		
  6. Internet Explorer Dev Center - API reference - scrollbar-track-color property; 뭔가 정리가 대충만 되어 있는듯.
    7. 
	














    

        
    
    

    
        

    


                

    


    

    
    

    
        
            저작자표시비영리변경금지        
    


    



'[IT/Programming] > HTML related' 카테고리의 다른 글






Javascript namespace or encapsulation  (0)


2019.03.07





반응형 웹 만들기 (Responsible/Scalable web design with css media query)  (0)


2019.03.06





티스토리 단축키 설정 (+단축키 추가/수정하기)  (0)


2019.03.06





Customized styling of scroll bars in HTML  (1)


2019.03.06





Improving web performance  (0)


2019.03.04





인터넷에서 예쁘게 코드 입력하기 (google code prettify)  (0)


2019.03.04





Citing the references automatically in HTML (like LaTeX)  (2)


2019.03.04





LaTeX(라텍스, 레이텍) 소개 및 설명서(Guide)들  (0)


2019.03.04




						

						

						
							

								
'[IT/Programming]/HTML related' Related Articles

								
							

						

						

							

								
									

										
									

								

								

									

										
											

												
													
													
												
												

													
													
												

											

										
										
										

											
										

								

								

							

							

						


					
				
			


			

			

			
				
			

		

		
	

	

	





	

            
            
            
                        
                        

                                
티스토리툴바