다중 스크롤바] ..를 적용해보고 싶었습니다.

1)
다중 스크롤바를 적용했을 때, 브라우져별로 어떻게 구현되는가
..라는 내용으로 시험을 해봤습니다.

스크롤 기능을 좀 더 사용자에게 친숙(?)하게 다가가려면
.. 스크립트를 쓰게 될 것 같네요.

브라우져별로 스크롤바가 적용되는 특성이 틀리기도 하구요,
제 입장에서 적용하고 싶었던 모양과는 스크롤되는 특성이 다르더라구요.

이번 테스트에서는 onscroll ..등의 event 는 배제했습니다. 
표현하고 싶은 스크롤 모양을 표현하는데 더 적합해질 수 있겠지만, .. 스크롤의 특성을 먼저 알아야 하니까요.

...

2)

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<div style="width:120px; height:100px; overflow-x:hidden; overflow-y:scroll; position:relative; background-color:#ffdddd;">
<div style="width:90px; height:100px; overflow-x:hidden; overflow-y:scroll; left:20px; position:absolute; background-color:#ddffdd;">
<div style="width:60px; height:100px; overflow-x:hidden; overflow-y:scroll; left:20px; position:absolute; background-color:#ddddff;">
0<br/>
1<br/>
2<br/>
3<br/>
4<br/>
5<br/>
6<br/>
7<br/>
8<br/>
9<br/>
10<br/>
</div>
11<br/>
12<br/>
13<br/>
14<br/>
15<br/>
16<br/>
17<br/>
18<br/>
19<br/>
</div>
21<br/>
22<br/>
23<br/>
24<br/>
25<br/>
26<br/>
27<br/>
28<br/>
29<br/>
</div>

...

3)

0
1
2
3
4
5
6
7
8
9
10

11
12
13
14
15
16
17
18
19

21
22
23
24
25
26
27
28
29

-- 새 창에 샘플 보여주기.. -

...

4)
*참고*

메타값은 모바일 테스트를 위해 넣었습니다.

글자 9개의 세로범위가 100px 이내인 경우, 스크롤 기능이 표현 안될 수 있습니다.

모바일과 PC브라우져의 폰트크기 적용되는 차이가 여기에서 많이 나더라구요.

(meta 태그로 화면크기 고정시킨 문제도 있다고 하더라두요..)

스크롤바 두께는 20px 정도라 가정하고 넣은 값입니다.

...

5)
테스트를 해보니 이런 결과가 나오더구요.
(블로그에 올리기 전에 확인했습니다.)

IE8
: 스크롤이 느린 편. 스크롤의 끝까지 먼저 굴림. 

chrome, safari. opera
: 스크롤이 빠른 편. 스크롤의 끝까지 먼저 굴림. 

FireFox
: 스크롤 edge 기준으로, 다음 스크롤러로의 이벤트 넘김이 느린 편.
(빨리 굴려보고, 느리게 굴려보면 그 느낌을 아실겁니다..) 

.. 그리고,

android
: 스크롤 표시 없음, 스크롤 기능 구현 실패 

android firefox
: 스크롤 표시는 없는데, 스크롤 기능이 PC용 IE8 에서처럼 부드럽게 구현됨.

android opera
: 스크롤 표시는 되지만 스크롤 기능 구현 실패 

...

easyBow killofki@.