diff --git a/examples/always-visible.html b/examples/always-visible.html index ead84631a..622473aab 100644 --- a/examples/always-visible.html +++ b/examples/always-visible.html @@ -1,37 +1,690 @@ + - - - - + + + - - - -
-
+ + + + + + + +
+
+

Always Visible

+

You can preview the effect offline below or fork ready to use template of this + example.

+ + + DOCUMENTATION + GITHUB + TEMPLATE +
+ +
+
+ + +
+

Hello I'm a piece of example content!

+

You can just scroll trough me and marvel at the perfection of this scrollbar, + but + I'm also full of surprises!

+ +
+
+
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I'm a pretty card

+ +

I'm very pretty and I have a pretty blue button, but it contains nothing, only + animated waves. I'm a sad, + pretty card.

+ + Button + +
+ +
+ +
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I'm also pretty

+ +

I'm very pretty and I have a pretty purple button, it contains a link to a + Bootstrap tutorial. I'm a happy, + pretty card.

+ + Tutorial + +
+ +
+ +
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I'm also happy

+ +

I'm very pretty and I have a pretty mdb-color button. It' leads to Admin + Dashboard building tutorial. I'm a happy, + pretty card.

+ + Tutorial + +
+ +
+ +
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I made y'all

+ +

I'm very pretty and my button let's you download a free UI Kit + with + pretty, happy cards & over 500 of other material components!

+ + Download + +
+ +
+ +
+
+
+ +
+
+

We are beautiful and colorful

+

We are some material scrollbars that could help you make your apps and projects even more + perfect!

+ Learn + more about us! +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+

I'm a picture of a boar

+

That's enough for me.

+
+ 1 + +
+
+ +
+
+

I'm a basic Material Design sign-up form

+

Click on my button to learn more about me!

+
+ +
+ +

Sign up

+ +
+
+ + +
+
+ + +
+
+ + + + + + + + At least 8 characters and 1 digit + + + + + + Optional - for two step authentication + + + +
+ + +
+ + + LEARN MORE + ABOUT ME + + +

or follow us on:

+ + + + + + + + + + + + + + +
+ + +

By clicking + Sign up you agree to our + terms of service + +

+ + +
+
+ +
+
+

We are leading Web Development technologies

+

Click on us if you're interested about learning more or getting our beautiful components + for free.

+
+
+ +
+ + +
+
+ +

jQuery

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+
+ +
+ + +
+
+ +

Angular

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+
+ +
+ + +
+
+ +

React

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+
+ +
+ + +
+
+ +

Vue

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+ + +
+
+ +
+
+

I'm saying goodbye!

+

Beeing scrolled by you was a pleasure, I hope I'll see you soon at mdbootstrap.com

+
+ + + +
+ + +
- + + + +
+ + + + + + + + + + + - + +
+ + + + + + + diff --git a/examples/assets/azusa.jpg b/examples/assets/azusa.jpg deleted file mode 100644 index d79568361..000000000 Binary files a/examples/assets/azusa.jpg and /dev/null differ diff --git a/examples/basic.html b/examples/basic.html index e32cedcd7..d23730ef0 100644 --- a/examples/basic.html +++ b/examples/basic.html @@ -1,50 +1,679 @@ + - - - - - - -
-
+ + + + + + + +
+
+

Basic

+

You can preview the effect offline below or fork ready to use template of this + example.

+ + + DOCUMENTATION + GITHUB + TEMPLATE +
+ +
+
+ + +
+

Hello I'm a piece of example content!

+

You can just scroll trough me and marvel at the perfection of this scrollbar, + but + I'm also full of surprises!

+ +
+
+
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I'm a pretty card

+ +

I'm very pretty and I have a pretty blue button, but it contains nothing, only + animated waves. I'm a sad, + pretty card.

+ + Button + +
+ +
+ +
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I'm also pretty

+ +

I'm very pretty and I have a pretty purple button, it contains a link to a + Bootstrap tutorial. I'm a happy, + pretty card.

+ + Tutorial + +
+ +
+ +
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I'm also happy

+ +

I'm very pretty and I have a pretty mdb-color button. It' leads to Admin + Dashboard building tutorial. I'm a happy, + pretty card.

+ + Tutorial + +
+ +
+ +
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I made y'all

+ +

I'm very pretty and my button let's you download a free UI Kit + with + pretty, happy cards & over 500 of other material components!

+ + Download + +
+ +
+ +
+
+
+ +
+
+

We are beautiful and colorful

+

We are some material scrollbars that could help you make your apps and projects even more + perfect!

+ Learn + more about us! +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+

I'm a picture of a boar

+

That's enough for me.

+
+ 1 + +
+
+ +
+
+

I'm a basic Material Design sign-up form

+

Click on my button to learn more about me!

+
+ +
+ +

Sign up

+ +
+
+ + +
+
+ + +
+
+ + + + + + + + At least 8 characters and 1 digit + + + + + + Optional - for two step authentication + + + +
+ + +
+ + + LEARN MORE + ABOUT ME + + +

or follow us on:

+ + + + + + + + + + + + + + +
+ + +

By clicking + Sign up you agree to our + terms of service + +

+ + +
+
+ +
+
+

We are leading Web Development technologies

+

Click on us if you're interested about learning more or getting our beautiful components + for free.

+
+
+ +
+ + +
+
+ +

jQuery

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+
+ +
+ + +
+
+ +

Angular

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+
+ +
+ + +
+
+ +

React

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+
+ +
+ + +
+
+ +

Vue

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+ + +
+
+ +
+
+

I'm saying goodbye!

+

Beeing scrolled by you was a pleasure, I hope I'll see you soon at mdbootstrap.com

+
+ + + +
+ + +
-

- Width - Height - -

+
    +
  • +
    + + +
    +
    • +
  • +
    + + +
    +
    • +
  • + +
    • +
  • + Back to + docs +
    • +
+
+ + + + + + + +
+ + + + + + + + + - + +
+ + + + + diff --git a/examples/events.html b/examples/events.html index a3c969e8a..a86edce8a 100644 --- a/examples/events.html +++ b/examples/events.html @@ -1,60 +1,620 @@ + - - - - - - -
-
+ + + + + + + +
+
+

Events

+

You can preview the effect offline below or fork ready to use template of this + example.

+ + + DOCUMENTATION + GITHUB + TEMPLATE +
+ +
+
+ + +
+

Hello I'm a piece of example content!

+

You can just scroll trough me and marvel at the perfection of this + scrollbar, + but + I'm also full of surprises!

+ +
+
+
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I'm a pretty card

+ +

I'm very pretty and I have a pretty blue button, but it + contains nothing, only + animated waves. I'm a sad, + pretty card.

+ + Button + +
+ +
+ +
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I'm also pretty

+ +

I'm very pretty and I have a pretty purple button, it contains + a link to a + Bootstrap tutorial. I'm a happy, + pretty card.

+ + Tutorial + +
+ +
+ +
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I'm also happy

+ +

I'm very pretty and I have a pretty mdb-color button. It' leads + to Admin + Dashboard building tutorial. I'm a happy, + pretty card.

+ + Tutorial + +
+ +
+ +
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I made y'all

+ +

I'm very pretty and my button let's you download a free + UI Kit + with + pretty, happy cards & over 500 of other material components!

+ + Download + +
+ +
+ +
+
+
+ +
+
+

We are beautiful and colorful

+

We are some material scrollbars that could help you make your apps and projects + even more + perfect!

+ Learn + more about us! +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+

I'm a picture of a boar

+

That's enough for me.

+
+ 1 + +
+
+ +
+
+

I'm a basic Material Design sign-up form

+

Click on my button to learn more about me!

+
+ +
+ +

Sign up

+ +
+
+ + +
+
+ + +
+
+ + + + + + + + At least 8 characters and 1 digit + + + + + + Optional - for two step authentication + + + +
+ + +
+ + + LEARN MORE + ABOUT ME + + +

or follow us on:

+ + + + + + + + + + + + + + +
+ + +

By clicking + Sign up you agree to our + terms of service + +

+ + +
+
+ +
+
+

We are leading Web Development technologies

+

Click on us if you're interested about learning more or getting our beautiful + components + for free.

+
+
+ +
+ + +
+
+ +

jQuery

+

Get beautiful components and useful features by clicking the button below. +

+ Learn more +
+
+ +
+ +
+
+ +
+ + +
+
+ +

Angular

+

Get beautiful components and useful features by clicking the button below. +

+ Learn more +
+
+ +
+ +
+
+ +
+ + +
+
+ +

React

+

Get beautiful components and useful features by clicking the button below. +

+ Learn more +
+
+ +
+ +
+
+ +
+ + +
+
+ +

Vue

+

Get beautiful components and useful features by clicking the button below. +

+ Learn more +
+
+ +
+ +
+ + +
+
+ +
+
+

I'm saying goodbye!

+

Beeing scrolled by you was a pleasure, I hope I'll see you soon at mdbootstrap.com

+
+ + + +
+
- - - - - - - - - - - - - - - - - -
Axis:
Direction:
Reach event:
Reach state (ps.reach):
- - + + + + + + +
+ + + + + + + + - +
+ + + + + diff --git a/examples/infinite-scroll.html b/examples/infinite-scroll.html index 92663f04b..711a90694 100644 --- a/examples/infinite-scroll.html +++ b/examples/infinite-scroll.html @@ -1,44 +1,156 @@ + - - - - - - -
+ + + + + + + +
+
+

Infinite scroll

+

You can preview the effect offline below or fork ready to use template of this + example.

+ + + DOCUMENTATION + GITHUB + TEMPLATE +
+ +
+
+
+ + + +
+ + + + + + + + + + - - +
+ + + + + + diff --git a/examples/init-and-remove.html b/examples/init-and-remove.html index a1d5a8308..f050d46be 100644 --- a/examples/init-and-remove.html +++ b/examples/init-and-remove.html @@ -1,36 +1,586 @@ + - - - - - - -
-
+ + + + + + + +
+
+

Init & remove

+

You can preview the effect offline below or fork ready to use template of this + example.

+ + + DOCUMENTATION + GITHUB + TEMPLATE +
+ +
+
+ + +
+

Hello I'm a piece of example content!

+

You can just scroll trough me and marvel at the perfection of this + scrollbar, + but + I'm also full of surprises!

+ +
+
+
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I'm a pretty card

+ +

I'm very pretty and I have a pretty blue button, but it + contains nothing, only + animated waves. I'm a sad, + pretty card.

+ + Button + +
+ +
+ +
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I'm also pretty

+ +

I'm very pretty and I have a pretty purple button, it contains + a link to a + Bootstrap tutorial. I'm a happy, + pretty card.

+ + Tutorial + +
+ +
+ +
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I'm also happy

+ +

I'm very pretty and I have a pretty mdb-color button. It' leads + to Admin + Dashboard building tutorial. I'm a happy, + pretty card.

+ + Tutorial + +
+ +
+ +
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I made y'all

+ +

I'm very pretty and my button let's you download a free + UI Kit + with + pretty, happy cards & over 500 of other material components!

+ + Download + +
+ +
+ +
+
+
+ +
+
+

We are beautiful and colorful

+

We are some material scrollbars that could help you make your apps and projects + even more + perfect!

+ Learn + more about us! +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+

I'm a picture of a boar

+

That's enough for me.

+
+ 1 + +
+
+ +
+
+

I'm a basic Material Design sign-up form

+

Click on my button to learn more about me!

+
+ +
+ +

Sign up

+ +
+
+ + +
+
+ + +
+
+ + + + + + + + At least 8 characters and 1 digit + + + + + + Optional - for two step authentication + + + +
+ + +
+ + + LEARN MORE + ABOUT ME + + +

or follow us on:

+ + + + + + + + + + + + + + +
+ + +

By clicking + Sign up you agree to our + terms of service + +

+ + +
+
+ +
+
+

We are leading Web Development technologies

+

Click on us if you're interested about learning more or getting our beautiful + components + for free.

+
+
+ +
+ + +
+
+ +

jQuery

+

Get beautiful components and useful features by clicking the button below. +

+ Learn more +
+
+ +
+ +
+
+ +
+ + +
+
+ +

Angular

+

Get beautiful components and useful features by clicking the button below. +

+ Learn more +
+
+ +
+ +
+
+ +
+ + +
+
+ +

React

+

Get beautiful components and useful features by clicking the button below. +

+ Learn more +
+
+ +
+ +
+
+ +
+ + +
+
+ +

Vue

+

Get beautiful components and useful features by clicking the button below. +

+ Learn more +
+
+ +
+ +
+ + +
+
+ +
+
+

I'm saying goodbye!

+

Beeing scrolled by you was a pleasure, I hope I'll see you soon at mdbootstrap.com

+
+ + + +
-
+ + -
- -
+
+ - + + + +
+ + + + + + + + + + + - + +
+ + + + + diff --git a/examples/nested-native-scroll.html b/examples/nested-native-scroll.html index 8136ed54f..89ee18f8b 100644 --- a/examples/nested-native-scroll.html +++ b/examples/nested-native-scroll.html @@ -1,35 +1,64 @@ + - - - - + + + - - -
-
+ + + + + + + +
+
+

Nested native scroll

+

You can preview the effect offline below or fork ready to use template of this + example.

+ + + DOCUMENTATION + GITHUB + TEMPLATE +
+ +
+
+ + +
+ + -
+ +
overflow: scroll -
  • One
  • Two
  • Three
  • Four
  • Five
  • Six
  • Seven
  • Eight
+
    +
  • One
    • +
  • Two
    • +
  • Three
    • +
  • Four
    • +
  • Five
    • +
  • Six
    • +
  • Seven
    • +
  • Eight
    • +
-
+ +
overflow: auto -
  • One
  • Two
  • Three
  • Four
  • Five
  • Six
  • Seven
  • Eight
+
    +
  • One
    • +
  • Two
    • +
  • Three
    • +
  • Four
    • +
  • Five
    • +
  • Six
    • +
  • Seven
    • +
  • Eight
    • +
+ + + + +

Hello I'm a piece of example content!

+

You can just scroll trough me and marvel at the perfection of this scrollbar, + but + I'm also full of surprises!

+ +
+
+
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I'm a pretty card

+ +

I'm very pretty and I have a pretty blue button, but it contains nothing, only + animated waves. I'm a sad, + pretty card.

+ + Button + +
+ +
+ +
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I'm also pretty

+ +

I'm very pretty and I have a pretty purple button, it contains a link to a + Bootstrap tutorial. I'm a happy, + pretty card.

+ + Tutorial + +
+ +
+ +
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I'm also happy

+ +

I'm very pretty and I have a pretty mdb-color button. It' leads to Admin + Dashboard building tutorial. I'm a happy, + pretty card.

+ + Tutorial + +
+ +
+ +
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I made y'all

+ +

I'm very pretty and my button let's you download a free UI Kit + with + pretty, happy cards & over 500 of other material components!

+ + Download + +
+ +
+ +
+
+
+ +
+
+

We are beautiful and colorful

+

We are some material scrollbars that could help you make your apps and projects even more + perfect!

+ Learn + more about us! +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+

I'm a picture of a boar

+

That's enough for me.

+
+ 1 + +
+
+ +
+
+

I'm a basic Material Design sign-up form

+

Click on my button to learn more about me!

+
+ +
+ +

Sign up

+ +
+
+ + +
+
+ + +
+
+ + + + + + + + At least 8 characters and 1 digit + + + + + + Optional - for two step authentication + + + +
+ + +
+ + + LEARN MORE + ABOUT ME + + +

or follow us on:

+ + + + + + + + + + + + + + +
+ + +

By clicking + Sign up you agree to our + terms of service + +

+ + +
+
+ +
+
+

We are leading Web Development technologies

+

Click on us if you're interested about learning more or getting our beautiful components + for free.

+
+
+ +
+ + +
+
+ +

jQuery

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+
+ +
+ + +
+
+ +

Angular

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+
+ +
+ + +
+
+ +

React

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+
+ +
+ + +
+
+ +

Vue

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+ + +
+
+ +
+
+

I'm saying goodbye!

+

Beeing scrolled by you was a pleasure, I hope I'll see you soon at mdbootstrap.com

+
+ + + +
+ + +
+
+ - + + + +
+ + + + + + + + + + + - + +
+ + + + + diff --git a/examples/option-handlers.html b/examples/option-handlers.html new file mode 100644 index 000000000..9785674a4 --- /dev/null +++ b/examples/option-handlers.html @@ -0,0 +1,641 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

Option handlers

+

You can preview the effect offline below or fork ready to use template of this + example.

+ + + DOCUMENTATION + GITHUB + TEMPLATE +
+ +
+
+ + +
+ + + + +

Hello I'm a piece of example content!

+

You can just scroll trough me and marvel at the perfection of this scrollbar, + but + I'm also full of surprises!

+ +
+
+
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I'm a pretty card

+ +

I'm very pretty and I have a pretty blue button, but it contains nothing, only + animated waves. I'm a sad, + pretty card.

+ + Button + +
+ +
+ +
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I'm also pretty

+ +

I'm very pretty and I have a pretty purple button, it contains a link to a + Bootstrap tutorial. I'm a happy, + pretty card.

+ + Tutorial + +
+ +
+ +
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I'm also happy

+ +

I'm very pretty and I have a pretty mdb-color button. It' leads to Admin + Dashboard building tutorial. I'm a happy, + pretty card.

+ + Tutorial + +
+ +
+ +
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I made y'all

+ +

I'm very pretty and my button let's you download a free UI Kit + with + pretty, happy cards & over 500 of other material components!

+ + Download + +
+ +
+ +
+
+
+ +
+
+

We are beautiful and colorful

+

We are some material scrollbars that could help you make your apps and projects even more + perfect!

+ Learn + more about us! +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+

I'm a picture of a boar

+

That's enough for me.

+
+ 1 + +
+
+ +
+
+

I'm a basic Material Design sign-up form

+

Click on my button to learn more about me!

+
+ +
+ +

Sign up

+ +
+
+ + +
+
+ + +
+
+ + + + + + + + At least 8 characters and 1 digit + + + + + + Optional - for two step authentication + + + +
+ + +
+ + + LEARN MORE + ABOUT ME + + +

or follow us on:

+ + + + + + + + + + + + + + +
+ + +

By clicking + Sign up you agree to our + terms of service + +

+ + +
+
+ +
+
+

We are leading Web Development technologies

+

Click on us if you're interested about learning more or getting our beautiful components + for free.

+
+
+ +
+ + +
+
+ +

jQuery

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+
+ +
+ + +
+
+ +

Angular

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+
+ +
+ + +
+
+ +

React

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+
+ +
+ + +
+
+ +

Vue

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+ + +
+
+ +
+
+

I'm saying goodbye!

+

Beeing scrolled by you was a pleasure, I hope I'll see you soon at mdbootstrap.com

+
+ + + + +
+ + + +
+
+ + + + + + + +
+ + + + + + + + +
+ + + + + + diff --git a/examples/options-handlers.html b/examples/options-handlers.html deleted file mode 100644 index de056c553..000000000 --- a/examples/options-handlers.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - - - -
-
- No rail/thumb interaction! -
-
- - - - diff --git a/examples/options-minScrollbarLenght.html b/examples/options-minScrollbarLenght.html new file mode 100644 index 000000000..52ea18f45 --- /dev/null +++ b/examples/options-minScrollbarLenght.html @@ -0,0 +1,161 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

Minimal Scrollbar Lenght

+

You can preview the effect offline below or fork ready to use template of this + example.

+ + + DOCUMENTATION + GITHUB + TEMPLATE +
+ +
+
+
+ +
+
+
+
+ + +
+
+ +
+ + + + + + + +
+ + + + + + + + +
+ + + + + + diff --git a/examples/options-minScrollbarLength.html b/examples/options-minScrollbarLength.html deleted file mode 100644 index d2c6648ed..000000000 --- a/examples/options-minScrollbarLength.html +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - - - -
-
- default -
-
-
-
- minScrollbarLength: 200px -
-
- - - - diff --git a/examples/options-suppressScrollAxis.html b/examples/options-suppressScrollAxis.html index 3ce126b73..4d4b861bf 100644 --- a/examples/options-suppressScrollAxis.html +++ b/examples/options-suppressScrollAxis.html @@ -1,10 +1,30 @@ + - - - - - - + + + + + + + +
+
+

Suppress Scroll Axis

+

You can preview the effect offline below or fork ready to use template of this + example.

+ + + DOCUMENTATION + GITHUB + TEMPLATE +
+ +
- default +
- suppressScrollX + +
- suppressScrollY + +
- + + + +
+ + + + + + + + - +
+ + + + + diff --git a/examples/options-useBothWheelAxes.html b/examples/options-useBothWheelAxes.html index 1fd0530b3..fc34c48ee 100644 --- a/examples/options-useBothWheelAxes.html +++ b/examples/options-useBothWheelAxes.html @@ -1,9 +1,28 @@ + - - - - - - + + + + + + + + + + +
+
+

Minimal Scrollbar Lenght

+

You can preview the effect offline below or fork ready to use template of this + example.

+ + + DOCUMENTATION + GITHUB + TEMPLATE +
+ +
+

useBothWheelAxes: x

- useBothWheelAxes: x
+
+

useBothWheelAxes: y

- useBothWheelAxes: y
- + + + +
+ + + + + + + + - +
+ + + diff --git a/examples/options-wheelPropagation.html b/examples/options-wheelPropagation.html index 2924a4750..fe4c97a9f 100644 --- a/examples/options-wheelPropagation.html +++ b/examples/options-wheelPropagation.html @@ -1,10 +1,30 @@ + - - - - - - -
FOR SPACE
+ + + + + + + +
+
+

Wheel Propagation

+

You can preview the effect offline below or fork ready to use template of this + example.

+ + + DOCUMENTATION + GITHUB + TEMPLATE +
+ +
+
FOR SPACE
- default +
-
FOR SPACE
+
FOR SPACE
- wheelPropagation: true +
-
FOR SPACE
+
FOR SPACE
+ +
+ - + + + +
+ + + + + + + + - +
+ + + + + diff --git a/examples/options-wheelSpeed.html b/examples/options-wheelSpeed.html index 09836305f..fc6d982d1 100644 --- a/examples/options-wheelSpeed.html +++ b/examples/options-wheelSpeed.html @@ -1,10 +1,30 @@ + - - - - - - + + + + + + + +
+
+

Wheel Speed

+

You can preview the effect offline below or fork ready to use template of this + example.

+ + + DOCUMENTATION + GITHUB + TEMPLATE +
+ +
- wheelSpeed: 0.1 +
- wheelSpeed: 10 + +
- + + + +
+ + + + + + + + - +
+ + + + + diff --git a/examples/removable-list-element.html b/examples/removable-list-element.html index 1e9002fb2..594c48531 100644 --- a/examples/removable-list-element.html +++ b/examples/removable-list-element.html @@ -1,41 +1,85 @@ + - - - - - - + + + + + + + +
+
+

Removable list element

+

You can preview the effect offline below or fork ready to use template of this + example.

+ + + DOCUMENTATION + GITHUB + TEMPLATE +
+ +
-
Hello! Click here to remove this!
-
Hello! Click here to remove this!
-
Hello! Click here to remove this!
-
Hello! Click here to remove this!
-
Hello! Click here to remove this!
-
Hello! Click here to remove this!
-
Hello! Click here to remove this!
-
Hello! Click here to remove this!
-
Hello! Click here to remove this!
-
Hello! Click here to remove this!
-
Hello! Click here to remove this!
-
Hello! Click here to remove this!
+
Hello! Click here to remove this!
+
Hello! Click here to remove this!
+
Hello! Click here to remove this!
+
Hello! Click here to remove this!
+
Hello! Click here to remove this!
+
Hello! Click here to remove this!
+
Hello! Click here to remove this!
+
Hello! Click here to remove this!
+
Hello! Click here to remove this!
+
Hello! Click here to remove this!
+
Hello! Click here to remove this!
+
Hello! Click here to remove this!
+
+ - + + +
+ + + + + + + + - + + + + +
+ + + + + diff --git a/examples/rtl.html b/examples/rtl.html deleted file mode 100644 index b10327099..000000000 --- a/examples/rtl.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - - - - - -
CURRENTLY NOT WORKING
-
-
-
-
- - - - diff --git a/examples/scrollbars-with-margin.html b/examples/scrollbars-with-margin.html index bacbcacce..801f6e940 100644 --- a/examples/scrollbars-with-margin.html +++ b/examples/scrollbars-with-margin.html @@ -1,39 +1,684 @@ + - - - - + + + - - -
-
+ + + + + + + +
+
+

Scrollbars with margin

+

You can preview the effect offline below or fork ready to use template of this + example.

+ + + DOCUMENTATION + GITHUB + TEMPLATE +
+ +
+
+ + +
+

Hello I'm a piece of example content!

+

You can just scroll trough me and marvel at the perfection of this scrollbar, + but + I'm also full of surprises!

+ +
+
+
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I'm a pretty card

+ +

I'm very pretty and I have a pretty blue button, but it contains nothing, only + animated waves. I'm a sad, + pretty card.

+ + Button + +
+ +
+ +
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I'm also pretty

+ +

I'm very pretty and I have a pretty purple button, it contains a link to a + Bootstrap tutorial. I'm a happy, + pretty card.

+ + Tutorial + +
+ +
+ +
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I'm also happy

+ +

I'm very pretty and I have a pretty mdb-color button. It' leads to Admin + Dashboard building tutorial. I'm a happy, + pretty card.

+ + Tutorial + +
+ +
+ +
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I made y'all

+ +

I'm very pretty and my button let's you download a free UI Kit + with + pretty, happy cards & over 500 of other material components!

+ + Download + +
+ +
+ +
+
+
+ +
+
+

We are beautiful and colorful

+

We are some material scrollbars that could help you make your apps and projects even more + perfect!

+ Learn + more about us! +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+

I'm a picture of a boar

+

That's enough for me.

+
+ 1 + +
+
+ +
+
+

I'm a basic Material Design sign-up form

+

Click on my button to learn more about me!

+
+ +
+ +

Sign up

+ +
+
+ + +
+
+ + +
+
+ + + + + + + + At least 8 characters and 1 digit + + + + + + Optional - for two step authentication + + + +
+ + +
+ + + LEARN MORE + ABOUT ME + + +

or follow us on:

+ + + + + + + + + + + + + + +
+ + +

By clicking + Sign up you agree to our + terms of service + +

+ + +
+
+ +
+
+

We are leading Web Development technologies

+

Click on us if you're interested about learning more or getting our beautiful components + for free.

+
+
+ +
+ + +
+
+ +

jQuery

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+
+ +
+ + +
+
+ +

Angular

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+
+ +
+ + +
+
+ +

React

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+
+ +
+ + +
+
+ +

Vue

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+ + +
+
+ +
+
+

I'm saying goodbye!

+

Beeing scrolled by you was a pleasure, I hope I'll see you soon at mdbootstrap.com

+
+ + + +
+ + +
- + + + +
+ + + + + + + + - +
+ + + + + diff --git a/examples/show-on-initial-load.html b/examples/show-on-initial-load.html index 6bd817e18..75e1ac4d6 100644 --- a/examples/show-on-initial-load.html +++ b/examples/show-on-initial-load.html @@ -1,36 +1,637 @@ + - - - - - - -
-
+ + + + + + + +
+
+

Show on initial load

+

You can preview the effect offline below or fork ready to use template of this + example.

+ + + DOCUMENTATION + GITHUB + TEMPLATE +
+ +
+
+ + +
+

Hello I'm a piece of example content!

+

You can just scroll trough me and marvel at the perfection of this scrollbar, + but + I'm also full of surprises!

+ +
+
+
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I'm a pretty card

+ +

I'm very pretty and I have a pretty blue button, but it contains nothing, only + animated waves. I'm a sad, + pretty card.

+ + Button + +
+ +
+ +
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I'm also pretty

+ +

I'm very pretty and I have a pretty purple button, it contains a link to a + Bootstrap tutorial. I'm a happy, + pretty card.

+ + Tutorial + +
+ +
+ +
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I'm also happy

+ +

I'm very pretty and I have a pretty mdb-color button. It' leads to Admin + Dashboard building tutorial. I'm a happy, + pretty card.

+ + Tutorial + +
+ +
+ +
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I made y'all

+ +

I'm very pretty and my button let's you download a free UI Kit + with + pretty, happy cards & over 500 of other material components!

+ + Download + +
+ +
+ +
+
+
+ +
+
+

We are beautiful and colorful

+

We are some material scrollbars that could help you make your apps and projects even more + perfect!

+ Learn + more about us! +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+

I'm a picture of a boar

+

That's enough for me.

+
+ 1 + +
+
+ +
+
+

I'm a basic Material Design sign-up form

+

Click on my button to learn more about me!

+
+ +
+ +

Sign up

+ +
+
+ + +
+
+ + +
+
+ + + + + + + + At least 8 characters and 1 digit + + + + + + Optional - for two step authentication + + + +
+ + +
+ + + LEARN MORE + ABOUT ME + + +

or follow us on:

+ + + + + + + + + + + + + + +
+ + +

By clicking + Sign up you agree to our + terms of service + +

+ + +
+
+ +
+
+

We are leading Web Development technologies

+

Click on us if you're interested about learning more or getting our beautiful components + for free.

+
+
+ +
+ + +
+
+ +

jQuery

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+
+ +
+ + +
+
+ +

Angular

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+
+ +
+ + +
+
+ +

React

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+
+ +
+ + +
+
+ +

Vue

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+ + +
+
+ +
+
+

I'm saying goodbye!

+

Beeing scrolled by you was a pleasure, I hope I'll see you soon at mdbootstrap.com

+
+ + + +
+ + +
+
+ + + + + + +
+ + + + + + + + + - +
+ + + + + diff --git a/examples/table-content.html b/examples/table-content.html index 8704f9b6b..9cd89e77d 100644 --- a/examples/table-content.html +++ b/examples/table-content.html @@ -1,67 +1,203 @@ + - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
NameAgeOccupation
Alex20Student
Paul23Engineer
Chris19Human being
Satoshi30Pokemon trainer
Jun27Hero
Yong27Money maker
+ + + + + + + + + + + + + + + + + + + + + + + +
+
+

Table content

+

You can preview the effect offline below or fork ready to use template of this + example.

+ + + DOCUMENTATION + GITHUB + TEMPLATE +
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameAgeOccupation
Alex20Student
Paul23Engineer
Chris19Human being
Satoshi30Pokemon trainer
Jun27Hero
Yong27Money maker
Satoshi30Pokemon trainer
Jun27Hero
Yong27Money maker
+
+
+ - + + + +
+ + + + + + + + - +
+ + + + + diff --git a/examples/text-content.html b/examples/text-content.html index a0d3a67ce..e26000ce1 100644 --- a/examples/text-content.html +++ b/examples/text-content.html @@ -1,21 +1,71 @@ + - - - - - - -
+ + + + + + + + + + + + + + + + + + + + + + + +
+
+

Text content

+

You can preview the effect offline below or fork ready to use template of this + example.

+ + + DOCUMENTATION + GITHUB + TEMPLATE +
+ +
+
+

The command takes options applicable

+

The command takes options applicable

+

The command takes options applicable

+

The command takes options applicable

The command takes options applicable

The command takes options applicable

The command takes options applicable

@@ -41,10 +91,17 @@

The command takes options applicable

The command takes options applicable

The command takes options applicable

+

The command takes options applicable

+

Beeing scrolled by you was a pleasure.

+

See you at mdbootstrap.com

+
- + +
+ - + + + +
+ + + + + + + + - +
+ + + + + diff --git a/examples/top-and-left-scrollbars.html b/examples/top-and-left-scrollbars.html index f5eeb90c2..4a14cb502 100644 --- a/examples/top-and-left-scrollbars.html +++ b/examples/top-and-left-scrollbars.html @@ -1,51 +1,686 @@ + - - - - + + + - - -
-
+ + + + + + + +
+
+

Top and left scrollbars

+

You can preview the effect offline below or fork ready to use template of this + example.

+ + + DOCUMENTATION + GITHUB + TEMPLATE +
+ +
+
+ + +
+

Hello I'm a piece of example content!

+

You can just scroll trough me and marvel at the perfection of this scrollbar, + but + I'm also full of surprises!

+ +
+
+
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I'm a pretty card

+ +

I'm very pretty and I have a pretty blue button, but it contains nothing, only + animated waves. I'm a sad, + pretty card.

+ + Button + +
+ +
+ +
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I'm also pretty

+ +

I'm very pretty and I have a pretty purple button, it contains a link to a + Bootstrap tutorial. I'm a happy, + pretty card.

+ + Tutorial + +
+ +
+ +
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I'm also happy

+ +

I'm very pretty and I have a pretty mdb-color button. It' leads to Admin + Dashboard building tutorial. I'm a happy, + pretty card.

+ + Tutorial + +
+ +
+ +
+
+ +
+ + +
+ Card image cap + +
+ +
+ + +
+ + +

I made y'all

+ +

I'm very pretty and my button let's you download a free UI Kit + with + pretty, happy cards & over 500 of other material components!

+ + Download + +
+ +
+ +
+
+
+ +
+
+

We are beautiful and colorful

+

We are some material scrollbars that could help you make your apps and projects even more + perfect!

+ Learn + more about us! +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+

I'm a picture of a boar

+

That's enough for me.

+
+ 1 + +
+
+ +
+
+

I'm a basic Material Design sign-up form

+

Click on my button to learn more about me!

+
+ +
+ +

Sign up

+ +
+
+ + +
+
+ + +
+
+ + + + + + + + At least 8 characters and 1 digit + + + + + + Optional - for two step authentication + + + +
+ + +
+ + + LEARN MORE + ABOUT ME + + +

or follow us on:

+ + + + + + + + + + + + + + +
+ + +

By clicking + Sign up you agree to our + terms of service + +

+ + +
+
+ +
+
+

We are leading Web Development technologies

+

Click on us if you're interested about learning more or getting our beautiful components + for free.

+
+
+ +
+ + +
+
+ +

jQuery

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+
+ +
+ + +
+
+ +

Angular

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+
+ +
+ + +
+
+ +

React

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+
+ +
+ + +
+
+ +

Vue

+

Get beautiful components and useful features by clicking the button below.

+ Learn more +
+
+ +
+ +
+ + +
+
+ +
+
+

I'm saying goodbye!

+

Beeing scrolled by you was a pleasure, I hope I'll see you soon at mdbootstrap.com

+
+ + + +
+ + +
- + + + +
+ + + + + + + + - + +
+ + + + +