본문 바로가기
[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





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

								
							

						

						

							

								
									

										
									

								

								

									

										
											

												
													
													
												
												

													
													
												

											

										
										
										

											
										

								

								

							

							

						


					
				
			


			

			

			
				
			

		

		
	

	

	





	            
            
            
                        
                        

                                
티스토리툴바