Reco Everything you wanna value. 자세히보기

[IT|Programming]/HTML related

Customized styling of scroll bars in HTML

kipid 2019. 3. 6. 10:44
반응형
m.logPrint() is working!

<eq> and <eqq> tags are rendered to MathJax format, being enclosed by \ ( \ ) and \ [ \ ].

docuK1 scripts started!
If this log is not closed automatically, there must be an error somewhere in your document or scripts.

Table of Contents is filled out.

Auto numberings of sections (div.sec>h2, div.subsec>h3, div.subsubsec>h4), <eqq> tags, and <figure> tags are done.

<cite> and <refer> tags are rendered to show bubble reference.

<codeprint> tags are printed to corresponding <pre> tags, only when the tags exist in the document.


Current styles (dark/bright mode, font-family, font-size, line-height) are shown.

kakao.js with id="kakao-js-sdk" is loaded.

New ShortKeys (T: Table of Contents, F: Forward Section, D: Previous Section, L: To 전체목록/[Lists]) are set.

m.delayPad=0;
m.wait=1024;
wait 1178ms.
Doing delayed-load. : 2
▼ Hide
Toggle a mess
Go (FS)
TofC
DocuK Log
Backward
Forward
RRA
Lists
CmtZ
CmtX
Handle CmtZ
Log in
out focus
이 글이 도움이 되셨다면, 광고 클릭 한번씩만 부탁드립니다 =ㅂ=ㅋ.
(If this article was helpful, please click the ad once. Thank you. ;)
Mode: Bright; Font: Noto Sans KR; font-size: 18.0px (10.0); line-height: 1.6;
width: 1280, height: 720, version: 3.3.3
dg:plink (Document Global Permanent Link): https://kipid.tistory.com/75
document.referrer: Empty
This document is rendered by docuK (See also SEE (Super Easy Edit) of docuK and pure SEE).

Customized styling of scroll bars in HTML

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

T1.in Webkit browser (Chrome, Safari, Opera)

▼ Show/Hide
설정들은
[04]
Ref. [04] css-tricks.com - Custom Scrollbars in WebKit, 2011-05-02, by Chris Coyier
[05]
Ref. [05] webkit.org - Styling scrollbars; 공식 홈페이지 같은데, 그다지 잘 정리되어 있지는 않은듯.
참조해서...
On the left side of codes is there a hiden button to toggle/switch scrollability ({max-height:some} or {max-height:none}).
▲ 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 {}
Fig. (1-1): Scroll bar map for webkit. 위 code에서 각 { /* 1~7 */ }이 무엇을 나타내는지 그림파일로 쉽게 보여줌. (Thanks to 출처:
[04]
Ref. [04] css-tricks.com - Custom Scrollbars in WebKit, 2011-05-02, by Chris Coyier
)
On the left side of codes is there a hiden button to toggle/switch scrollability ({max-height:some} or {max-height:none}).
▲ strange scrollbar to show the effect drastically. (only in webkit (Chrome, Safari, Opera))
div css style 형태로 많은걸 바꿀 수 있는듯.
▲ Hide

T2.in IE (Internet Explorer)

▼ Show/Hide
여긴 독특하게 해놓은듯
[06]
Ref. [06] Internet Explorer Dev Center - API reference - scrollbar-track-color property; 뭔가 정리가 대충만 되어 있는듯.
. color 정도만 바꿀 수 있는듯.
Fig. (2-1): Scroll bar map for IE.
On the left side of codes is there a hiden button to toggle/switch scrollability ({max-height:some} or {max-height:none}).
<style>
#pre-code-scrollIE {
	scrollbar-face-color: #000000;
	scrollbar-shadow-color: #2D2C4D;
	scrollbar-highlight-color:#7D7E94;
	scrollbar-3dlight-color: #7D7E94;
	scrollbar-darkshadow-color: #2D2C4D;
	scrollbar-track-color: #7D7E94;
	scrollbar-arrow-color: #C1C1D1;
}
</style>

a
b
c
d
e
f
g
h
i
j
k
l
m
n
▲ 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는 정말 구리다.)
▲ Hide

T3.in Firefox

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

T4.using jQuery plug-in (Cross-Browser)

▼ Show/Hide
누군가 cross-browser 문제를 해결하기 위해 jQuery로 짜놓은듯 함
[03]
Ref. [03] manos.malihu.gr - jQuery custom content scroller, last updated on 2014-05-30, by malihu
. 공부를 조금 해야 써먹을 수 있을듯. 그리 어렵진 않은거 같긴한데, 확실히 CSS보단 귀찮은 작업.
▲ Hide

TRefs.References and Related Articles

▼ Show/Hide

    TRefs.1.General

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

  5. Ref. [04] css-tricks.com - Custom Scrollbars in WebKit, 2011-05-02, by Chris Coyier
  6. Ref. [05] webkit.org - Styling scrollbars; 공식 홈페이지 같은데, 그다지 잘 정리되어 있지는 않은듯.
  7. Ref. [06] Internet Explorer Dev Center - API reference - scrollbar-track-color property; 뭔가 정리가 대충만 되어 있는듯.
▲ Hide
Toggle a mess
* 홍보/Promoting Recoeve.net (3S | Slow/Sexy/Sincere SNS)
유튜브 음악, K-Pop MV 들을 광고없이 목록재생 해서 보세요.
접속하셔서 가입 후 별점만 드레그 하시면 자신의 페이지에 저장 됩니다.
그리고 자신의 페이지로 이동한 뒤 추천 받기 (단축키 R) 를 누르시면 자신이 점수 메긴것들로 이웃 (이웃보기 단축키 B) 을 자동으로 찾아주고 그 이웃들로부터 추천을 받을 수 있습니다.
Toggle a mess
이 글이 도움이 되셨다면, 광고 클릭 한번씩만 부탁드립니다 =ㅂ=ㅋ.
(If this article was helpful, please click the ad once. Thank you. ;)
반응형