SPSTRAP Document API

Scrollbar - Horizontal ( not support wheel )

Scrollbar - light theme

<div class="[sp--scrollbar] [sp--css-notready]" style="height:200px;color:#fff;background-color:#333;border:1px solid #eaeaea;"
                                theme="lg"
                                [data-class="os-theme-light"]
                                data-autohide="true"
                            >
                                <div style="padding:30px;">
                                    Where can I get some? There are many variations of passages of Lorem Ipsum available, 
                                    but the majority have suffered alteration in some form, by injected humour, or randomised 
                                    words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, 
                                    you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem 
                                    Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the 
                                    first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a 
                                    handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. 
                                    The generated Lorem Ipsum is therefore always free from repetition, injected humour, 
                                    or non-characteristic words etc.

<br /><br />
                                    
                                    Where can I get some? There are many variations of passages of Lorem Ipsum available, 
                                    but the majority have suffered alteration in some form, by injected humour, or randomised 
                                    words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, 
                                    you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem 
                                    Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the 
                                    first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a 
                                    handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. 
                                    The generated Lorem Ipsum is therefore always free from repetition, injected humour, 
                                    or non-characteristic words etc.

Where can I get some? There are many variations of passages of Lorem Ipsum available, 
                                    but the majority have suffered alteration in some form, by injected humour, or randomised 
                                    words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, 
                                    you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem 
                                    Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the 
                                    first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a 
                                    handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. 
                                    The generated Lorem Ipsum is therefore always free from repetition, injected humour, 
                                    or non-characteristic words etc.
                                </div>
                            </div>

Scrollbar - gray theme

<div class="sp--scrollbar sp--css-notready" style="height:200px;background-color:#fff;"
                                [data-class="os-theme-gray"]
                                data-autohide="true"
                            >
                                <div style="padding:30px;">
                                    Where can I get some? There are many variations of passages of Lorem Ipsum available, 
                                    but the majority have suffered alteration in some form, by injected humour, or randomised 
                                    words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, 
                                    you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem 
                                    Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the 
                                    first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a 
                                    handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. 
                                    The generated Lorem Ipsum is therefore always free from repetition, injected humour, 
                                    or non-characteristic words etc.

<br /><br />
                                    
                                    Where can I get some? There are many variations of passages of Lorem Ipsum available, 
                                    but the majority have suffered alteration in some form, by injected humour, or randomised 
                                    words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, 
                                    you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem 
                                    Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the 
                                    first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a 
                                    handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. 
                                    The generated Lorem Ipsum is therefore always free from repetition, injected humour, 
                                    or non-characteristic words etc.

Where can I get some? There are many variations of passages of Lorem Ipsum available, 
                                    but the majority have suffered alteration in some form, by injected humour, or randomised 
                                    words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, 
                                    you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem 
                                    Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the 
                                    first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a 
                                    handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. 
                                    The generated Lorem Ipsum is therefore always free from repetition, injected humour, 
                                    or non-characteristic words etc.
                                </div>
                            </div>

Scrollbar - dark theme

<div class="sp--scrollbar sp--css-notready" style="height:200px;background-color:#fff;"
                                [data-class="os-theme-dark"]
                                data-autohide="true"
                            >
                                <div style="padding:30px;">
                                    Where can I get some? There are many variations of passages of Lorem Ipsum available, 
                                    but the majority have suffered alteration in some form, by injected humour, or randomised 
                                    words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, 
                                    you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem 
                                    Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the 
                                    first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a 
                                    handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. 
                                    The generated Lorem Ipsum is therefore always free from repetition, injected humour, 
                                    or non-characteristic words etc.

<br /><br />
                                    
                                    Where can I get some? There are many variations of passages of Lorem Ipsum available, 
                                    but the majority have suffered alteration in some form, by injected humour, or randomised 
                                    words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, 
                                    you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem 
                                    Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the 
                                    first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a 
                                    handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. 
                                    The generated Lorem Ipsum is therefore always free from repetition, injected humour, 
                                    or non-characteristic words etc.

Where can I get some? There are many variations of passages of Lorem Ipsum available, 
                                    but the majority have suffered alteration in some form, by injected humour, or randomised 
                                    words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, 
                                    you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem 
                                    Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the 
                                    first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a 
                                    handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. 
                                    The generated Lorem Ipsum is therefore always free from repetition, injected humour, 
                                    or non-characteristic words etc.
                                </div>
                            </div>

Scrollbar - primary theme

<div class="sp--scrollbar sp--css-notready" style="height:200px;background-color:#fff;"
                                [data-class="os-theme-primary"]
                                data-autohide="true"
                            >
                                <div style="padding:30px;">
                                    Where can I get some? There are many variations of passages of Lorem Ipsum available, 
                                    but the majority have suffered alteration in some form, by injected humour, or randomised 
                                    words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, 
                                    you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem 
                                    Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the 
                                    first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a 
                                    handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. 
                                    The generated Lorem Ipsum is therefore always free from repetition, injected humour, 
                                    or non-characteristic words etc.

<br /><br />
                                    
                                    Where can I get some? There are many variations of passages of Lorem Ipsum available, 
                                    but the majority have suffered alteration in some form, by injected humour, or randomised 
                                    words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, 
                                    you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem 
                                    Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the 
                                    first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a 
                                    handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. 
                                    The generated Lorem Ipsum is therefore always free from repetition, injected humour, 
                                    or non-characteristic words etc.

Where can I get some? There are many variations of passages of Lorem Ipsum available, 
                                    but the majority have suffered alteration in some form, by injected humour, or randomised 
                                    words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, 
                                    you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem 
                                    Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the 
                                    first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a 
                                    handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. 
                                    The generated Lorem Ipsum is therefore always free from repetition, injected humour, 
                                    or non-characteristic words etc.
                                </div>
                            </div>

Scrollbar - scale

Auto hide

Class

name	description
.sp--scrollbar	스크롤바 컨테이너 컨테이너 내부는 한개의 엘리먼트로 묶여 있어야 스타일이 용이하다.

Attribute

name	description
data-class	default : 'os-theme-dark' ( string ) os-theme-dark, os-theme-light 스크롤바 컨테이너의 테마를 결정한다. 컨테이너가 아닌 스크롤바의 색상이니 주의하자.
data-autohide	default : '' ( boolean) 'true' 속성은 마우스가 떠나면 스크롤바가 숨겨진다.

Etc

https://github.com/KingSora/OverlayScrollbars