mirror of
https://github.com/tenrok/OverlayScrollbars.git
synced 2026-06-01 21:44:08 +03:00
add documentation website to repo
This commit is contained in:
Rene Haas
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,33 @@
|
||||
<div class="content-section skew">
|
||||
<div class="container">
|
||||
<div class="content-message-full content-message">
|
||||
<h3 class="content-message-title">Extensions</h3>
|
||||
<div class="content-message-content">
|
||||
This is the official extensions page for OverlayScrollbars.<br>
|
||||
Here you can find Extensions written by myself or by the community.<br><br>
|
||||
|
||||
If you wanna know how to write your own Extension, please read the <a class="inline-btn" data-navigation="documentation/extensions-basics">documentation</a> and check the <a class="inline-btn" data-navigation="documentation/extensions-createextensions">examples</a>.<br>
|
||||
In case you've written your own Extension and you to want make it available for everyone, please open a issue on <a href="https://github.com/KingSora/OverlayScrollbars/issues" target="_blank" rel="noopener" class="inline-btn">github</a>.
|
||||
After I've reviewed your extension it will be listed on this page.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-section">
|
||||
<div class="container">
|
||||
<div class="content-message-full content-message">
|
||||
<div class="content-message-content">
|
||||
<div id="extensions-refreshed">
|
||||
</div>
|
||||
<div id="extensions-count">
|
||||
Searching Extensions...
|
||||
</div>
|
||||
|
||||
|
||||
<div id="extensions-list">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,860 @@
|
||||
<div class="content-section skew">
|
||||
<div class="container">
|
||||
<div class="content-message-full content-message">
|
||||
<h3 class="content-message-title">Frequently Asked Questions</h3>
|
||||
<div class="content-message-content">
|
||||
Here you will hopefully gain answers for questions you'll most likely asking yourself.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-section skew">
|
||||
<div class="container">
|
||||
<div class="expander-header" data-expander-key="faq-scrollbar-handle-length">
|
||||
<i class="mdi mdi-chevron-down"></i>
|
||||
<span>Is it possible to limit / adjust the scrollbar-handle length?</span>
|
||||
</div>
|
||||
<div class="expander-content" data-expander-value="faq-scrollbar-handle-length">
|
||||
<b>Yes.</b> You can adjust the min- or max-length of the scrollbar-handle via CSS.<br>
|
||||
Please read <a data-navigation="documentation/styling" class="inline-btn">this article</a> for further information.
|
||||
</div>
|
||||
|
||||
<div class="expander-header" data-expander-key="faq-scrollbar-sides">
|
||||
<i class="mdi mdi-chevron-down"></i>
|
||||
<span>Is it possible to change the position and length of my scrollbars?</span>
|
||||
</div>
|
||||
<div class="expander-content" data-expander-value="faq-scrollbar-sides">
|
||||
<b>Yes.</b> You can adjust the position of the scrollbars via CSS.<br>
|
||||
Please read <a data-navigation="documentation/styling" class="inline-btn">this article</a> for further information.
|
||||
</div>
|
||||
|
||||
<div class="expander-header" data-expander-key="faq-click-scrolling">
|
||||
<i class="mdi mdi-chevron-down"></i>
|
||||
<span>Can I click on the scrollbar-track to scroll to a certain offset?</span>
|
||||
</div>
|
||||
<div class="expander-content" data-expander-value="faq-click-scrolling">
|
||||
<b>Yes.</b> This feature is called <code class="code-inline">clickScrolling</code> and can be activated with the option:
|
||||
<pre><code class="js">scrollbars : {
|
||||
clickScrolling : true
|
||||
}</code></pre>
|
||||
The default value for this option is <code class="code-inline">false</code>.<br>
|
||||
If you <b>press the left mouse button</b> on the red scrollbar-track, the scroll-offset will be animated until the destination has been reached or you release the button.<br>
|
||||
You can modify the scroll-animation with the following keys:
|
||||
<ul>
|
||||
<li>Press <code class="code-inline">shift</code> while clicking and no animation will occur and the offset changes instantly.</li>
|
||||
<li>Press <code class="code-inline">ctrl</code> and <code class="code-inline">shift</code> while clicking and a animation with fixed (very low) duration will occur and the offset changes nearly instantly.</li>
|
||||
</ul>
|
||||
<div id="faq-click-scrolling-target">
|
||||
<code class="code-inline js">clickScrolling : true</code><br>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.<br>
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.<br>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?<br>
|
||||
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
|
||||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.<br>
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.<br>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?<br>
|
||||
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
|
||||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.<br>
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.<br>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?<br>
|
||||
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.<br>
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.<br>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?<br>
|
||||
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
|
||||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.<br>
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.<br>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?<br>
|
||||
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
|
||||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.<br>
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.<br>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?<br>
|
||||
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.<br>
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.<br>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?<br>
|
||||
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
|
||||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.<br>
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.<br>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?<br>
|
||||
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
|
||||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.<br>
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.<br>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?<br>
|
||||
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="expander-header" data-expander-key="faq-scrollbar-outside">
|
||||
<i class="mdi mdi-chevron-down"></i>
|
||||
<span>How can I achieve space between the scrollbars and my content?</span>
|
||||
</div>
|
||||
<div class="expander-content" data-expander-value="faq-scrollbar-outside">
|
||||
This is something I get asked very often. For this problem to solve I've created the <code class="code-inline">paddingAbsolute</code> option.<br>
|
||||
Set the option <code class="code-inline js">paddingAbsolute : true</code> and adjust the padding of your target element as you like.<br>
|
||||
Below you have two example elements with <code class="code-inline scss">padding : 20px</code> each. The left element has absolute and the right element has normal padding.<br>
|
||||
<div id="faq-scrollbar-outside-absolute-target">
|
||||
<code class="code-inline js">paddingAbsolute : true</code><br>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.<br>
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.<br>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?<br>
|
||||
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
|
||||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.<br>
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.<br>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?<br>
|
||||
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
|
||||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.<br>
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.<br>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?<br>
|
||||
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br>
|
||||
</div>
|
||||
<div id="faq-scrollbar-outside-relative-target">
|
||||
<code class="code-inline js">paddingAbsolute : false</code><br>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.<br>
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.<br>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?<br>
|
||||
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
|
||||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.<br>
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.<br>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?<br>
|
||||
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br>
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
|
||||
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.<br>
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.<br>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?<br>
|
||||
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="expander-header" data-expander-key="faq-scrollTo">
|
||||
<i class="mdi mdi-chevron-down"></i>
|
||||
<span>Does the plugin provide a "scrollTo" method?</span>
|
||||
</div>
|
||||
<div class="expander-content" data-expander-value="faq-scrollTo">
|
||||
<b>Yes.</b> The <a data-navigation="documentation/method-scroll" class="inline-btn">scroll method</a> offers such a functionality. The API is a bit different to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo" target="_blank" rel="noopener" class="inline-btn">scrollTo</a> method, but the functionality is the same.<br>
|
||||
Actually, the method is capable of much more than its native counterpart. For example you can use relative coordinates, custom animation-duration, custom animation-easing and more.<br>
|
||||
<pre><code class="js code-noscroll">var element = document.getElementById("box");
|
||||
|
||||
//scrolls 50px on the y axis
|
||||
instance.scroll({ y : 50 });
|
||||
|
||||
//scrolls 50px on both axis and performs a smooth scroll animation
|
||||
instance.scroll({ y : 50, x : 50 }, 1000);
|
||||
|
||||
//adds 50 pixel to the vertical- and subtracts 50 pixel from the horizontal-scroll-offest
|
||||
instance.scroll({ y : "+=50", x : "-=50" });
|
||||
|
||||
//scrolls to 50% on both axis and performs a smooth scroll animation with custom easing
|
||||
instance.scroll({ y : "50%", x : "50%" }, 1000, "easeOutElastic");</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="expander-header" data-expander-key="faq-scrollintoview">
|
||||
<i class="mdi mdi-chevron-down"></i>
|
||||
<span>Does the plugin provide a "scrollIntoView" method?</span>
|
||||
</div>
|
||||
<div class="expander-content" data-expander-value="faq-scrollintoview">
|
||||
<b>Yes.</b> The <a data-navigation="documentation/method-scroll" class="inline-btn">scroll method</a> offers such a functionality. The API is a bit different to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView" target="_blank" rel="noopener" class="inline-btn">scrollIntoView</a> method, but the functionality is the same.<br>
|
||||
Actually, the method is capable of much more than its native counterpart, please read the <a data-navigation="documentation/method-scroll" class="inline-btn">documentation</a> to get further information.<br>
|
||||
Below you can see some examples:
|
||||
<pre><code class="js code-noscroll">var element = document.getElementById("box");
|
||||
|
||||
//equivalent to element.scrollIntoView():
|
||||
instance.scroll({ el : element, block : { y : "begin", x : "nearest" } });
|
||||
|
||||
//equivalent to element.scrollIntoView() but with a smooth animation:
|
||||
instance.scroll({ el : element, block : { y : "begin", x : "nearest" } }, 1000);
|
||||
|
||||
//equivalent to element.scrollIntoView(false):
|
||||
instance.scroll({ el : element, block : { y : "end", x : "nearest" } });
|
||||
|
||||
//equivalent to element.scrollIntoView({ block: "center", inline: "nearest"}):
|
||||
instance.scroll({ el : element, block : { y : "center", x : "nearest" } });
|
||||
|
||||
//equivalent to element.scrollIntoView({ block: "start", inline: "start"}):
|
||||
instance.scroll(element); </code></pre>
|
||||
</div>
|
||||
|
||||
<div class="expander-header" data-expander-key="faq-scrollintoviewifneeded">
|
||||
<i class="mdi mdi-chevron-down"></i>
|
||||
<span>Does the plugin provide a "scrollIntoViewIfNeeded" method?</span>
|
||||
</div>
|
||||
<div class="expander-content" data-expander-value="faq-scrollintoviewifneeded">
|
||||
<b>Yes.</b> The <a data-navigation="documentation/method-scroll" class="inline-btn">scroll method</a> offers such a functionality. The API is a bit different to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded" target="_blank" rel="noopener" class="inline-btn">scrollIntoViewIfNeeded</a> method, but the functionality is the same.<br>
|
||||
Actually, the method is capable of much more than its native counterpart, please read the <a data-navigation="documentation/method-scroll" class="inline-btn">documentation</a> to get further information.<br>
|
||||
Below you can see some examples:
|
||||
<pre><code class="js code-noscroll">var element = document.getElementById("box");
|
||||
|
||||
//equivalent to element.scrollIntoViewIfNeeded():
|
||||
instance.scroll({ el : element, scroll : "ifneeded", block : "nearest" });
|
||||
|
||||
//equivalent to element.scrollIntoViewIfNeeded() but with a smooth animation:
|
||||
instance.scroll({ el : element, scroll : "ifneeded", block : "nearest" }, 500);
|
||||
|
||||
//equivalent to element.scrollIntoViewIfNeeded(true):
|
||||
instance.scroll({ el : element, scroll : "ifneeded", block : { y : "nearest", x : "center" } });</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="expander-header" data-expander-key="faq-scroll-offset">
|
||||
<i class="mdi mdi-chevron-down"></i>
|
||||
<span>How can I get the current scroll position?</span>
|
||||
</div>
|
||||
<div class="expander-content" data-expander-value="faq-scroll-offset">
|
||||
Next to many other values the scroll offset gets returned by the <a data-navigation="documentation/method-scroll" class="inline-btn">scroll method</a>.<br>
|
||||
<pre><code class="js code-noscroll">var scrollInfo = instance.scroll();
|
||||
|
||||
//equivalent to the scrollLeft value
|
||||
var scrollLeft = scrollInfo.position.x;
|
||||
|
||||
//equivalent to the scrollTop value
|
||||
var scrollTop = scrollInfo.position.y;</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="expander-header" data-expander-key="faq-ifnativescrollbarsareoverlaid">
|
||||
<i class="mdi mdi-chevron-down"></i>
|
||||
<span>If the native scrollbars are already overlaid I don't want the plugin to be initialized.</span>
|
||||
</div>
|
||||
<div class="expander-content" data-expander-value="faq-ifnativescrollbarsareoverlaid">
|
||||
If you don't want to initialize the plugin if the native scrollbars are already overlaid (for example like in mobile browsers, or UNIX operating systems), I've created the option <code class="code-inline js">nativeScrollbarsOverlaid.initialize</code>.
|
||||
The default value is <code class="code-inline js">true</code>, but if you set it to <code class="code-inline js">false</code> the plugin won't initialize in such a environment.<br><br>
|
||||
A very important thing to note here is, that if an initialization gets cancelled because of this option, the callback <code class="code-inline">onInitializationWithdrawn</code> will be triggered, in order to make it easier for you to handle this case in your code.
|
||||
</div>
|
||||
|
||||
<div class="expander-header" data-expander-key="faq-animations">
|
||||
<i class="mdi mdi-chevron-down"></i>
|
||||
<span>How do I handle animations correctly?</span>
|
||||
</div>
|
||||
<div class="expander-content" data-expander-value="faq-animations">
|
||||
The plugin updates the everytime it detects a breaking change in the DOM. Javascript-animations are doing very heavy and frequent DOM changes.<br>
|
||||
In order to gain the maximum performance, call the <a data-navigation="documentation/method-sleep" class="inline-btn">sleep method</a> before your animation begins, so the plugin won't update automatically during the animation.<br>
|
||||
After your animation has ended call the <a data-navigation="documentation/method-update" class="inline-btn">update method</a> to re-activate the plugin.
|
||||
</div>
|
||||
|
||||
<div class="expander-header" data-expander-key="faq-flexbox">
|
||||
<i class="mdi mdi-chevron-down"></i>
|
||||
<span>How do I use the plugin inside a flexbox layout?</span>
|
||||
</div>
|
||||
<div class="expander-content" data-expander-value="faq-flexbox">
|
||||
It's a bit tricky to make the plugin work in every flexbox layout since the flexbox implementation differs in every browser. I believe the current functionality covers about 90% of all flexbox cases.<br>
|
||||
Please read <a data-navigation="documentation/flexbox" class="inline-btn">this article</a> to get further information about how to use the plugin inside a flexbox-layout correctly.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-section skew">
|
||||
<div class="container">
|
||||
<div class="content-message-full content-message">
|
||||
<h3 class="content-message-title">Plugin Comparison</h3>
|
||||
<div class="content-message-content">
|
||||
On the internet you'll find many scrollbar plugins. Below I've compared the features of a few of them.<br>
|
||||
Hover or click on certain entries to see additional information or a description.<br>
|
||||
If I've made a mistake or if you want to enhance this table, please feel free to open a issue on <a href="https://github.com/KingSora/KingSora.github.io/issues" target="_blank" rel="noopener" class="inline-btn">github</a>.<br><br>
|
||||
The Github information were refreshed on: <b id="github-infos-timestamp">?</b><br>
|
||||
The table was last edited on: <b id="table-infos-timestamp">July 25, 2018 - 16:02</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-section">
|
||||
<div class="container">
|
||||
<div id="faq-comparison-table" class="split-table">
|
||||
<table class="table-tiles">
|
||||
<thead>
|
||||
<tr>
|
||||
<td><div class="split-table-expand"><i class="mdi mdi-arrow-expand"></i></div></td>
|
||||
<td><a href="https://github.com/KingSora/OverlayScrollbars" target="_blank" rel="noopener" class="inline-btn">OverlayScrollbars</a></td>
|
||||
<td><a href="https://github.com/Grsmto/simplebar" target="_blank" rel="noopener" class="inline-btn">Simplebar</a></td>
|
||||
<td><a href="https://github.com/utatti/perfect-scrollbar" target="_blank" rel="noopener" class="inline-btn">perfect-scrollbar</a></td>
|
||||
<td><a href="https://github.com/noeldelgado/gemini-scrollbar" target="_blank" rel="noopener" class="inline-btn">gemini-scrollbar</a></td>
|
||||
<td><a href="https://github.com/jamesflorentino/nanoScrollerJS" target="_blank" rel="noopener" class="inline-btn">nanoScrollerJS</a></td>
|
||||
<td><a href="https://github.com/idiotWu/smooth-scrollbar" target="_blank" rel="noopener" class="inline-btn">Smooth Scrollbar</a></td>
|
||||
<td><a href="https://github.com/albertogasparin/Optiscroll" target="_blank" rel="noopener" class="inline-btn">Optiscroll</a></td>
|
||||
<td><a href="https://github.com/inuyaksa/jquery.nicescroll" target="_blank" rel="noopener" class="inline-btn">jQuery.NiceScroll</a></td>
|
||||
<td><a href="https://github.com/malihu/malihu-custom-scrollbar-plugin" target="_blank" rel="noopener" class="inline-btn">malihu custom scrollbar plugin</a></td>
|
||||
<td><a href="https://github.com/vitch/jScrollPane" target="_blank" rel="noopener" class="inline-btn">jScrollPane</a></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="row-caption">
|
||||
<td class="cell-white"><b class="txtc-light">Github:</b></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white"><b>Github - stars</b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="overlayscrollbars-stars"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="simplebar-stars"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="perfectscrollbar-stars"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="geminiscrollbar-stars"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="nanoscrollerjs-stars"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="smoothscrollbar-stars"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="optiscroll-stars"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="nicescroll-stars"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="malihu-stars"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="jscrollpane-stars"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white"><b>Github - open issues</b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="overlayscrollbars-open-issues"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="simplebar-open-issues"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="perfectscrollbar-open-issues"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="geminiscrollbar-open-issues"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="nanoscrollerjs-open-issues"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="smoothscrollbar-open-issues"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="optiscroll-open-issues"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="nicescroll-open-issues"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="malihu-open-issues"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="jscrollpane-open-issues"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white"><b>Github - created</b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="overlayscrollbars-created"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="simplebar-created"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="perfectscrollbar-created"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="geminiscrollbar-created"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="nanoscrollerjs-created"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="smoothscrollbar-created"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="optiscroll-created"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="nicescroll-created"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="malihu-created"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="jscrollpane-created"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white"><b>Github - is archived</b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="overlayscrollbars-archived"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="simplebar-archived"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="perfectscrollbar-archived"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="geminiscrollbar-archived"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="nanoscrollerjs-archived"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="smoothscrollbar-archived"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="optiscroll-archived"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="nicescroll-archived"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="malihu-archived"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="jscrollpane-archived"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white"><b>Github - license</b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="overlayscrollbars-license"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="simplebar-license"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="perfectscrollbar-license"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="geminiscrollbar-license"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="nanoscrollerjs-license"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="smoothscrollbar-license"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="optiscroll-license"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="nicescroll-license"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="malihu-license"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
<td class="cell-white font-weight-semibold nowrap"><b class="jscrollpane-license"><i class="mdi mdi-loading mdi-spin"></i></b></td>
|
||||
</tr>
|
||||
<tr class="row-caption">
|
||||
<td class="cell-white"><b class="txtc-light">Tech:</b></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white"><b>Browser Support</b></td>
|
||||
<td class="cell-white font-weight-semibold" data-tooltip><span class="tooltip">IE 8+ | Firefox | Chrome | Opera | Edge | Safari 6+</span><b>IE 8+</b></td>
|
||||
<td class="cell-white font-weight-semibold" data-tooltip><span class="tooltip">IE 11 | Firefox | Chrome | Opera | Edge | Safari<br><a href="https://github.com/Grsmto/simplebar#2-browsers-support" target="_blank" rel="noopener" class="inline-btn">More info for IE10 and below</a></span><b>IE 11+</b></td>
|
||||
<td class="cell-white font-weight-semibold" data-tooltip><span class="tooltip">IE 11 | Firefox | Chrome | Opera | Edge | Safari<br><a href="https://github.com/utatti/perfect-scrollbar#ie-support" target="_blank" rel="noopener" class="inline-btn">but may have some issues in IE11"</a></span><b>IE 11+</b></td>
|
||||
<td class="cell-white font-weight-semibold" data-tooltip><span class="tooltip">IE 9+ | Firefox | Chrome | Opera | Edge | Safari</span><b>IE 9+</b></td>
|
||||
<td class="cell-white font-weight-semibold" data-tooltip><span class="tooltip">IE 7+ | Firefox 3+ | Chrome | Safari 4+ | Opera 11.60+<br><a href="https://github.com/jamesflorentino/nanoScrollerJS#browser-compatibility" target="_blank" rel="noopener" class="inline-btn">check it out here</a></span><b>IE 7+</b></td>
|
||||
<td class="cell-white font-weight-semibold" data-tooltip><span class="tooltip">IE 10+ | Firefox 16+ | Chrome 22+ | Safari 8+<br><a href="https://github.com/idiotWu/smooth-scrollbar#browser-compatibility" target="_blank" rel="noopener" class="inline-btn">check it out here</a></span><b>IE 10+</b></td>
|
||||
<td class="cell-white font-weight-semibold" data-tooltip><span class="tooltip">IE 11+ | Firefox | Chrome | Opera | Edge | Safari</span><b>IE 11+</b></td>
|
||||
<td class="cell-white font-weight-semibold" data-tooltip><span class="tooltip">IE 8+ | Firefox | Chrome | Opera | Edge | Safari</span><b>IE 8+</b></td>
|
||||
<td class="cell-white font-weight-semibold" data-tooltip><span class="tooltip">IE 8+ | Firefox | Chrome | Opera | Safari <br><a href="https://github.com/malihu/malihu-custom-scrollbar-plugin#browser-compatibility" target="_blank" rel="noopener" class="inline-btn">check it out here</a></span><b>IE 8+</b></td>
|
||||
<td class="cell-white font-weight-semibold" data-tooltip><span class="tooltip">IE 8+ | Firefox | Chrome | Opera | Edge | Safari</span><b>IE 8+</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white"><b>Dependencyless</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color" data-tooltip><span class="tooltip">Also has an optional jQuery version.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light" data-tooltip><span class="tooltip">jQuery is required</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color" data-tooltip><span class="tooltip">Can be used with jQuery. (optional)</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light" data-tooltip><span class="tooltip">jQuery is required</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light" data-tooltip><span class="tooltip">jQuery is required</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white"><b>Uses native Scrolling</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white"><b>Uses animated Scrolling</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white" data-tooltip><span class="tooltip">The plugin doesn't wrap your content and no special DOM setup is needed.</span><b>Works without content wrapping</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white" data-tooltip><span class="tooltip">The plugin doesn't automatically run an infinity loop to check for DOM changes.</span><b>Doesn't require timer or loop for updating</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white"><b>Options changeable during runtime</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white"><b>Uses CSS3 Transform to move handle if supported</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white"><b>Possibility to write Extensions / Plugins</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white" data-tooltip><span class="tooltip">Possible to scroll to a element with a certain ID.<br>If you search text, the browser scrolls / jumps directly to the destination.</span><b>Anchor scrolling</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
</tr>
|
||||
<tr class="row-caption">
|
||||
<td class="cell-white"><b class="txtc-light">Support:</b></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white"><b>Supports Textarea-Element</b></td>
|
||||
<td class="cell-white"><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/supportedelements" target="_blank" rel="noopener"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></a></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><a href="https://github.com/utatti/perfect-scrollbar/issues/318#issuecomment-91620732" target="_blank" rel="noopener"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></a></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><a href="https://github.com/jamesflorentino/nanoScrollerJS/issues/104#issuecomment-12391970" target="_blank" rel="noopener"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></a></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><a href="https://github.com/malihu/malihu-custom-scrollbar-plugin/blob/master/examples/textarea_example.html" target="_blank" rel="noopener"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></a></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white"><b>Supports Body-Element</b></td>
|
||||
<td class="cell-white"><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/supportedelements" target="_blank" rel="noopener"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></a></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><a href="https://github.com/utatti/perfect-scrollbar/issues/340#issuecomment-114099116" target="_blank" rel="noopener"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></a></td>
|
||||
<td class="cell-white"><a href="https://github.com/noeldelgado/gemini-scrollbar#notes" target="_blank" rel="noopener"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></a></td>
|
||||
<td class="cell-white"><a href="https://github.com/jamesflorentino/nanoScrollerJS/issues/335#issuecomment-362910690" target="_blank" rel="noopener"><i class="mdi mdi-help-circle txtc-light"></i></a></td>
|
||||
<td class="cell-white"><i class="mdi mdi-help-circle txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-help-circle txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-help-circle txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-help-circle txtc-light"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white"><b>Supports Touch</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white" data-tooltip><span class="tooltip">The plugin is able to handle native-overlaid (not space consuming) scrollbars.</span><b>Supports native overlaid scrollbars</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color" data-tooltip><span class="tooltip">Even provides extra options to handle this case.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light" data-tooltip><span class="tooltip">The plugin won't initialize if the native scrollbars are overlaid.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white"><b>Supports Direction-RTL</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-help-circle txtc-light"></i></td>
|
||||
<td class="cell-white"><a href="https://github.com/utatti/perfect-scrollbar/issues/689" target="_blank" rel="noopener"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></a></td>
|
||||
<td class="cell-white"><a href="https://github.com/noeldelgado/gemini-scrollbar/issues/20" target="_blank" rel="noopener"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></a></td>
|
||||
<td class="cell-white"><a href="https://github.com/jamesflorentino/nanoScrollerJS/issues/87" target="_blank" rel="noopener"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></a></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white" data-tooltip><span class="tooltip">If you change the native browser zoom.</span><b>Supports Browser Zoom</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light" data-tooltip><span class="tooltip">The native scrollbars will appear if you zoom.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light" data-tooltip><span class="tooltip">The native scrollbars will appear if you zoom.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light" data-tooltip><span class="tooltip">The plugin restricts the Zoom with Ctrl + Scroll.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light" data-tooltip><span class="tooltip">The native scrollbars will appear if you zoom.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light" data-tooltip><span class="tooltip">The plugin restricts the Zoom with Ctrl + Scroll.<br>You can only zoom if the scroll position is zero or maximum, else you will scroll.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white" data-tooltip><span class="tooltip">You can change the scroll-offset by clicking on the scrollbar-track.</span><b>Supports click-scrolling</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white" data-tooltip><span class="tooltip">You can change the scroll-offset by dragging the scrollbar-handle.</span><b>Supports drag-scrolling</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white" data-tooltip><span class="tooltip">It's possible to initialize the plugin inside an iFrame from the outside.</span><b>Supports iFrames</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light" data-tooltip><span class="tooltip">The plugin initializes but it looks messed up and you can't scroll via dragging the handles.<br>It's buggy and you can tell this feature isn't supported.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light" data-tooltip><span class="tooltip">The plugin initializes and looks alright.<br>But you can't scroll via dragging the handles.<br>iFrame support isn't mentioned anywhere.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light" data-tooltip><span class="tooltip">The plugin initializes.<br>The plugin deosn't inject its default styles into the iframe.<br>You can't scroll with dragging the handles.<br>iFrame support isn't mentioned anywhere.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light" data-tooltip><span class="tooltip">The plugin initializes and looks alright.<br>But you can't scroll via dragging the handles.<br>iFrame support isn't mentioned anywhere.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color" data-tooltip><span class="tooltip">Everything worked, but in my test-case the horizontal scrollbar was out of place.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light" data-tooltip><span class="tooltip">The plugin won't initialize properly.<br>In older versions the plugin initializes but scrolling is only<br>possible vertically and you can't scroll via dragging the handles.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light" data-tooltip><span class="tooltip">The plugin initializes and looks alright.<br>But you can't scroll with dragging the handles.<br>iFrame support isn't mentioned anywhere.</span></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white"><b>Supports nesting</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><a href="https://github.com/jamesflorentino/nanoScrollerJS/issues/135#issuecomment-16599587" target="_blank" rel="noopener"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color" data-tooltip><span class="tooltip">It works but has one bug if you use a certain option.</span></i></a></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
</tr>
|
||||
<tr class="row-caption">
|
||||
<td class="cell-white"><b class="txtc-light">Scrollbar styling:</b></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white"><b>Adjustable scrollbar handle <u>min</u>-length</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color" data-tooltip><span class="tooltip">Via CSS-styling in all CSS units.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color" data-tooltip><span class="tooltip">Via plugin-options, only in pixels.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color" data-tooltip><span class="tooltip">Via plugin-options, only in pixels.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color" data-tooltip><span class="tooltip">Via plugin-options, only in pixels.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color" data-tooltip><span class="tooltip">Via plugin-options, only in pixels.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color" data-tooltip><span class="tooltip">Via plugin-options, only in pixels.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color" data-tooltip><span class="tooltip">Via plugin-options, only in percent.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color" data-tooltip><span class="tooltip">Via plugin-options, only in pixels.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-help-circle txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color" data-tooltip><span class="tooltip">Via plugin-options, only in pixels.</span></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white"><b>Adjustable scrollbar handle <u>max</u>-length</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color" data-tooltip><span class="tooltip">Via CSS-styling in all CSS units.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color" data-tooltip><span class="tooltip">Via plugin-options, only in pixels.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color" data-tooltip><span class="tooltip">Via plugin-options, only in pixels.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color" data-tooltip><span class="tooltip">Via plugin-options, only in percent.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-help-circle txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color" data-tooltip><span class="tooltip">Via plugin-options, only in pixels.</span></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white"><b>Scrollbar handle can have fixed length</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color" data-tooltip><span class="tooltip">Via plugin-options.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color" data-tooltip><span class="tooltip">Via plugin-options.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white"><b>Adjustable scrollbar-length</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color" data-tooltip><span class="tooltip">Via CSS-styling in all CSS units.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color" data-tooltip><span class="tooltip">Via CSS-styling in all CSS units.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color" data-tooltip><span class="tooltip">Via CSS-styling in all CSS units.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color" data-tooltip><span class="tooltip">Via CSS-styling in all CSS units.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color" data-tooltip><span class="tooltip">Via CSS-styling in all CSS units.</span></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white" data-tooltip><span class="tooltip">The plugin provides a option to hide the scrollbars if the user is inactive or if a certain event happens.</span><b>Scrollbars auto-hide possibility</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white" data-tooltip><span class="tooltip">The plugin provides a documented possibility to use arrow buttons in the scrollbars.</span><b>Scrollbar arrow buttons</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
</tr>
|
||||
<tr class="row-caption">
|
||||
<td class="cell-white"><b class="txtc-light">Goodies:</b></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white"><b><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo" target="_blank" rel="noopener" class="inline-btn">scrollTo</a>-like method</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white"><b><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView" target="_blank" rel="noopener" class="inline-btn">scrollIntoView</a>-like method</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white"><b><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded" target="_blank" rel="noopener" class="inline-btn">scrollIntoViewIfNeeded</a>-like method</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white"><b>Provides <a href="https://www.w3schools.com/cssref/css3_pr_resize.asp" target="_blank" rel="noopener" class="inline-btn">CSS3 resize</a> functionality</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cell-white" data-tooltip><span class="tooltip">A feedback or an animation if you reached the minimum or maximum scroll offset.</span><b>Overscroll animation / feedback</b></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-marked-circle txtc-primary-color"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
<td class="cell-white"><i class="mdi mdi-checkbox-blank-circle-outline txtc-light"></i></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="split-table-side">
|
||||
<div class="split-table-side-head split-table-head">
|
||||
</div>
|
||||
<div class="split-table-side-body split-table-body">
|
||||
</div>
|
||||
</div>
|
||||
<div class="split-table-main">
|
||||
<div class="split-table-main-head split-table-head">
|
||||
</div>
|
||||
<div class="split-table-main-body split-table-body">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,545 @@
|
||||
<div id="features" class="content-section skew">
|
||||
<div class="container">
|
||||
<div class="content-message-full content-message">
|
||||
<h3 class="content-message-title">
|
||||
Main Features
|
||||
</h3>
|
||||
<div class="content-message-content">
|
||||
<div class="content-message-content-list">
|
||||
<div class="content-message-content-list-item">
|
||||
<p class="content-message-content-list-item-bullet"><i class="mdi mdi-star"></i></p>
|
||||
<p class="content-message-content-list-item-title">Custom design & native functionality</p>
|
||||
<p class="content-message-content-list-item-content">
|
||||
The plugin combines the features of native scrolling <br>
|
||||
(e.g. hotkeys, speed, smoothness, <b>touchsupport</b> etc.) and custom HTML & CSS. It does not replace the native scrollbars, it just hides them to guarantee 100% native scrolling. It also provides additional and highly customizable DOM elements to style your own scrollbars.<br>
|
||||
To check how flexible the styling is, take a look at the examples in the <a class="inline-btn" data-navigation="demos/styling">styling demo</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="content-message-content-list-item">
|
||||
<p class="content-message-content-list-item-bullet"><i class="mdi mdi-image-size-select-small"></i></p>
|
||||
<p class="content-message-content-list-item-title">Supports all css size affecting properties</p>
|
||||
<p class="content-message-content-list-item-content">
|
||||
Supported are all size properties (width, height, max-*, min-*)<br>
|
||||
with all units (em, ex, %, px, cm, mm, in, pt, pc, rem).<br>
|
||||
Even <code class="code-inline scss">height: auto</code> and <code class="code-inline scss">width: auto</code> in combination with min-* and max-* size properties.
|
||||
Floating elements in combination with <code class="code-inline scss">width: auto</code> are supported too.
|
||||
The best thing is, any size, padding, margin or border-width changes are detected automatically by the plugin.
|
||||
Please use the <a class="inline-btn" data-navigation="demos/capabilites">capabilities demo</a> to convince yourself.
|
||||
</p>
|
||||
</div>
|
||||
<div class="content-message-content-list-item">
|
||||
<p class="content-message-content-list-item-bullet"><i class="mdi mdi-textbox"></i></p>
|
||||
<p class="content-message-content-list-item-title">Extended support for textarea elements</p>
|
||||
<p class="content-message-content-list-item-content">
|
||||
Textarea elements have extended support.
|
||||
Dependent on your options, textareas can have dynamic width and height. Which means the size of the textarea is dependent of its content.
|
||||
For more information please read the <a class="inline-btn" data-navigation="documentation/options">documentation</a> to the textarea options or check out the <a class="inline-btn" data-navigation="demos/textarea">textarea demo</a>.
|
||||
No-auto-wrapping (<code class="code-inline">wrap="off"</code>) textareas are also supported.
|
||||
</p>
|
||||
</div>
|
||||
<div class="content-message-content-list-item">
|
||||
<p class="content-message-content-list-item-bullet"><i class="mdi mdi-format-textdirection-r-to-l"></i></p>
|
||||
<p class="content-message-content-list-item-title">Extended RTL support</p>
|
||||
<p class="content-message-content-list-item-content">
|
||||
Every browser handles RTL scrolling differently. The plugin leaves it up to you whether you want to use the native RTL scroll behavior which differs in each browser or a "normalized" RTL scroll behavior, which works the same way in every browser.
|
||||
</p>
|
||||
</div>
|
||||
<div class="content-message-content-list-item">
|
||||
<p class="content-message-content-list-item-bullet"><i class="mdi mdi-overscan"></i></p>
|
||||
<p class="content-message-content-list-item-title">Extremely powerful scroll method</p>
|
||||
<p class="content-message-content-list-item-content">
|
||||
The plugin offers a scroll method which supports animated scrolling. With this method you can scroll to absolute, relative and calculated coordinates. It's also possible to scroll directly to a passed DOM element. Furthermore it provides the same functionality as the native <a class="inline-btn" href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView" target="_blank" rel="noopener">scrollIntoView</a> method. Try the <a class="inline-btn" data-navigation="demos/scroll">demo</a> or read the <a class="inline-btn" data-navigation="documentation/method-scroll">documentation</a> for more info.
|
||||
</p>
|
||||
</div>
|
||||
<div class="content-message-content-list-item">
|
||||
<p class="content-message-content-list-item-bullet"><i class="mdi mdi-puzzle"></i></p>
|
||||
<p class="content-message-content-list-item-title">Supports Extensions for simple customization</p>
|
||||
<p class="content-message-content-list-item-content">
|
||||
In case OverlayScrollbars doesn't support a feature you need, you are able to develop or use extensions. Extensions provide additional functionality to the plugin, to support special or personal cases. The extension-system is simple and powerful. Please read the <a data-navigation="documentation/extensions-basics" class="inline-btn">documentation</a> for more info and check the <a data-navigation="extensions" class="inline-btn">extensions page</a> to see all official extensions.
|
||||
</p>
|
||||
</div>
|
||||
<div class="content-message-content-list-item">
|
||||
<p class="content-message-content-list-item-bullet"><i class="mdi mdi-web"></i></p>
|
||||
<p class="content-message-content-list-item-title">Using modern web technologies</p>
|
||||
<p class="content-message-content-list-item-content">
|
||||
The Web has many useful tools which are only supported in modern browsers. The plugin is using them in modern browsers to ensure maximum performance but uses fallbacks in older browsers to ensure functionality.
|
||||
</p>
|
||||
</div>
|
||||
<div class="content-message-content-list-item">
|
||||
<p class="content-message-content-list-item-bullet"><i class="mdi mdi-auto-fix"></i></p>
|
||||
<p class="content-message-content-list-item-title">Able to hide all types of scrollbars</p>
|
||||
<p class="content-message-content-list-item-content">
|
||||
Similar plugins are not able to hide natively overlaid scrollbars. These are standard on all mobile browsers as well as on many Linux operating systems and MacOS.<br>
|
||||
Moreover it's even possible to hide mixed scrollbars (e.g. vertical scrollbar is overlaid and horizontal isn't) but this case can only happen if your browser is using some skin or theme plugins.
|
||||
</p>
|
||||
</div>
|
||||
<div class="content-message-content-list-item">
|
||||
<p class="content-message-content-list-item-bullet"><i class="mdi mdi-format-text-wrapping-overflow"></i></p>
|
||||
<p class="content-message-content-list-item-title">No clipping without overflow</p>
|
||||
<p class="content-message-content-list-item-content">
|
||||
As long as there is no overflow, the element is <i>not</i> clipped. The clip appears only if a overflow exists.
|
||||
You can not achieve this with CSS because all overflow values except of <code class="code-inline scss">overflow: visible</code> clips the element even if the element has no overflow.
|
||||
</p>
|
||||
</div>
|
||||
<div class="content-message-content-list-item">
|
||||
<p class="content-message-content-list-item-bullet"><i class="mdi mdi-react"></i></p>
|
||||
<p class="content-message-content-list-item-title">Component wrapper for popular frameworks</p>
|
||||
<p class="content-message-content-list-item-content">
|
||||
If you are using popular component-based web front-end frameworks such as <b>React</b>, <b>Vue</b> or <b>Angular</b>, you can use the corresponding component wrapper.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section">
|
||||
<div class="container">
|
||||
<div class="content-message-full content-message">
|
||||
<h3 class="content-message-title">
|
||||
Sub Features
|
||||
</h3>
|
||||
<div class="content-message-content">
|
||||
<ul>
|
||||
<li>Options can be changed at runtime.</li>
|
||||
<li>Supports horizontal and / or vertical scrollbars.</li>
|
||||
<li>Free adjustable handle size.</li>
|
||||
<li>Selectable & searchable content.</li>
|
||||
<li>Support for <code class="code-inline scss">box-sizing: border-box</code> and <code class="code-inline scss">box-sizing: content-box</code>.</li>
|
||||
<li>Two different padding variants.</li>
|
||||
<li>Ability to completely ignore the overflow of a specified axis.</li>
|
||||
<li>Provides callbacks for any situation.</li>
|
||||
<li>You can use the plugin without any dependencies or with jQuery.</li>
|
||||
<li>Provides actively maintained <b>TypeScript</b> declarations.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="browsersupport" class="content-section">
|
||||
<div class="container">
|
||||
<div class="content-message-full content-message">
|
||||
<h3 class="content-message-title">
|
||||
Browser Support
|
||||
</h3>
|
||||
<div class="content-message-content">
|
||||
Tested on desktop and mobile browsers as well as on Windows and Linux machines.<br>
|
||||
<br>
|
||||
<div class="browsersupport">
|
||||
<div class="browsersupport-line">
|
||||
<div class="browsersupport-line-item">
|
||||
<div class="browsersupport-line-item-inner">
|
||||
<img src="./_framework/img/icons-browser/ie.svg" alt="Internet Explorer">
|
||||
<img src="./_framework/img/icons-browser/ie.svg" alt="Internet Explorer">
|
||||
</div>
|
||||
</div>
|
||||
<div class="browsersupport-line-item">
|
||||
<div class="browsersupport-line-item-inner">
|
||||
<img src="./_framework/img/icons-browser/edge.svg" alt="Edge">
|
||||
<img src="./_framework/img/icons-browser/edge.svg" alt="Edge">
|
||||
</div>
|
||||
</div>
|
||||
<div class="browsersupport-line-item">
|
||||
<div class="browsersupport-line-item-inner">
|
||||
<img src="./_framework/img/icons-browser/opera.svg" alt="Opera">
|
||||
<img src="./_framework/img/icons-browser/opera.svg" alt="Opera">
|
||||
</div>
|
||||
</div>
|
||||
<div class="browsersupport-line-item">
|
||||
<div class="browsersupport-line-item-inner">
|
||||
<img src="./_framework/img/icons-browser/chrome.svg" alt="Chrome">
|
||||
<img src="./_framework/img/icons-browser/chrome.svg" alt="Chrome">
|
||||
</div>
|
||||
</div>
|
||||
<div class="browsersupport-line-item">
|
||||
<div class="browsersupport-line-item-inner">
|
||||
<img src="./_framework/img/icons-browser/firefox.svg" alt="Firefox">
|
||||
<img src="./_framework/img/icons-browser/firefox.svg" alt="Firefox">
|
||||
</div>
|
||||
</div>
|
||||
<div class="browsersupport-line-item">
|
||||
<div class="browsersupport-line-item-inner">
|
||||
<img src="./_framework/img/icons-browser/safari.svg" alt="Safari">
|
||||
<img src="./_framework/img/icons-browser/safari.svg" alt="Safari">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="browsersupport-line">
|
||||
<div class="browsersupport-line-item">
|
||||
<div class="browsersupport-line-item-inner">
|
||||
Internet Explorer
|
||||
</div>
|
||||
</div>
|
||||
<div class="browsersupport-line-item">
|
||||
<div class="browsersupport-line-item-inner">
|
||||
Edge
|
||||
</div>
|
||||
</div>
|
||||
<div class="browsersupport-line-item">
|
||||
<div class="browsersupport-line-item-inner">
|
||||
Opera
|
||||
</div>
|
||||
</div>
|
||||
<div class="browsersupport-line-item">
|
||||
<div class="browsersupport-line-item-inner">
|
||||
Chrome
|
||||
</div>
|
||||
</div>
|
||||
<div class="browsersupport-line-item">
|
||||
<div class="browsersupport-line-item-inner">
|
||||
Firefox
|
||||
</div>
|
||||
</div>
|
||||
<div class="browsersupport-line-item">
|
||||
<div class="browsersupport-line-item-inner">
|
||||
Safari
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="browsersupport-line">
|
||||
<div class="browsersupport-line-item">
|
||||
<div class="browsersupport-line-item-inner">
|
||||
8+
|
||||
</div>
|
||||
</div>
|
||||
<div class="browsersupport-line-item">
|
||||
<div class="browsersupport-line-item-inner">
|
||||
Yes
|
||||
</div>
|
||||
</div>
|
||||
<div class="browsersupport-line-item">
|
||||
<div class="browsersupport-line-item-inner">
|
||||
Yes
|
||||
</div>
|
||||
</div>
|
||||
<div class="browsersupport-line-item">
|
||||
<div class="browsersupport-line-item-inner">
|
||||
Yes
|
||||
</div>
|
||||
</div>
|
||||
<div class="browsersupport-line-item">
|
||||
<div class="browsersupport-line-item-inner">
|
||||
Yes
|
||||
</div>
|
||||
</div>
|
||||
<div class="browsersupport-line-item">
|
||||
<div class="browsersupport-line-item-inner">
|
||||
6+
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="implementation" class="content-section">
|
||||
<div class="container">
|
||||
<div class="content-message-full content-message">
|
||||
<h3 class="content-message-title">
|
||||
Implementation
|
||||
</h3>
|
||||
<div class="content-message-content">
|
||||
You can get the plugin by <a class="inline-btn" href="https://github.com/KingSora/OverlayScrollbars/archive/master.zip">downloading</a> it manually, via <a class="inline-btn" target="_blank" rel="noopener" href="https://cdnjs.com/libraries/overlayscrollbars">cdn</a> or via a package manager like <a class="inline-btn" target="_blank" rel="noopener" href="https://www.npmjs.com/package/overlayscrollbars">npm</a>:
|
||||
<pre><code class="sh code-noscroll">npm install overlayscrollbars</code></pre>
|
||||
<br>
|
||||
The plugin has two versions:
|
||||
<ul>
|
||||
<li>The default version without any dependencies: <b>OverlayScrollbars.js</b></li>
|
||||
<li>The jQuery version with jQuery as dependency: <b>jquery.overlayScrollbars.js</b></li>
|
||||
</ul>
|
||||
Both versions are capable of the same, but the jQuery version is a bit smaller in size.
|
||||
<br>
|
||||
<br>
|
||||
To <b>implement</b> the plugin to your page you have to include all necessary files to the head tag in your HTML document.<br>
|
||||
If you are using jQuery, please use the file prefixed with <code class="code-inline">jquery.</code>.<br>
|
||||
|
||||
<div class="txtbox txtbox-yellow">
|
||||
<i class="mdi mdi-lightbulb"></i>
|
||||
<span>
|
||||
Make sure to load all CSS file(s) before the JS file(s), to prevent unexpected bugs.
|
||||
</span>
|
||||
</div>
|
||||
<div class="tab-control">
|
||||
<div class="tab-button-bar">
|
||||
<div class="tab-button-bar-center">
|
||||
<div class="tab-button active" data-tab-key="implementation-default">Default</div>
|
||||
<div class="tab-button" data-tab-key="implementation-jquery">jQuery</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="implementation-default" class="active" data-tab-value="implementation-default">
|
||||
<pre><code class="html code-noscroll"><html>
|
||||
<head>
|
||||
<!-- Plugin CSS -->
|
||||
<link type="text/css" href="path/to/OverlayScrollbars.css" rel="stylesheet"/>
|
||||
<!-- Plugin JS -->
|
||||
<script type="text/javascript" src="path/to/OverlayScrollbars.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
</code></pre>
|
||||
</div>
|
||||
<div id="implementation-jquery" data-tab-value="implementation-jquery">
|
||||
<pre><code class="html code-noscroll"><html>
|
||||
<head>
|
||||
<!-- Plugin CSS -->
|
||||
<link type="text/css" href="path/to/OverlayScrollbars.css" rel="stylesheet"/>
|
||||
<!-- jQuery JS -->
|
||||
<script type="text/javascript" src="path/to/jquery.js"></script>
|
||||
<!-- Plugin JS -->
|
||||
<script type="text/javascript" src="path/to/jquery.overlayScrollbars.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
The plugin is now ready to be <b>initialized</b>.<br>
|
||||
|
||||
<div class="txtbox txtbox-orange">
|
||||
<i class="mdi mdi-alert"></i>
|
||||
<span>
|
||||
Initialize the plugin only after your document has been fully loaded.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="tab-control">
|
||||
<div class="tab-button-bar">
|
||||
<div class="tab-button-bar-center">
|
||||
<div class="tab-button active" data-tab-key="initialization-default">Default</div>
|
||||
<div class="tab-button" data-tab-key="initialization-jquery">jQuery</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="initialization-default" class="active" data-tab-value="initialization-default">
|
||||
<pre><code class="js code-noscroll">document.addEventListener("DOMContentLoaded", function() {
|
||||
//The first argument are the elements to which the plugin shall be initialized
|
||||
//The second argument has to be at least a empty object or a object with your desired options
|
||||
OverlayScrollbars(document.querySelectorAll("body"), { });
|
||||
});</code></pre>
|
||||
For further and more detailed information about the initialization and the initialization possibilities please read <a class="inline-btn" data-navigation="documentation/initialization">this section</a> in the documentation.<br>
|
||||
</div>
|
||||
<div id="initialization-jquery" data-tab-value="initialization-jquery">
|
||||
<pre><code class="js code-noscroll">$(function() {
|
||||
//The passed argument has to be at least a empty object or a object with your desired options
|
||||
$("body").overlayScrollbars({ });
|
||||
});</code></pre>
|
||||
For further and more detailed information about the initialization and the initialization possibilities please read <a class="inline-btn" data-navigation="documentation/initialization-jquery">this section</a> in the documentation.<br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section">
|
||||
<div class="container">
|
||||
<div class="content-message-full content-message">
|
||||
<h3 class="content-message-title">
|
||||
TypeScript
|
||||
</h3>
|
||||
<div class="content-message-content">
|
||||
Although OverlayScrollbars isn't written in TypeScript, it provides its own <a class="inline-btn" href="https://www.npmjs.com/package/@types/overlayscrollbars" target="_blank" rel="noopener">TypeScript declarations</a>:
|
||||
<pre><code class="sh code-noscroll">npm install @types/overlayscrollbars</code></pre>
|
||||
I recommend setting these options in your <b>tsconfig.json</b>:
|
||||
<pre><code class="json code-noscroll">{
|
||||
"compilerOptions": {
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true
|
||||
}
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content-section">
|
||||
<div class="container">
|
||||
<div class="content-message-full content-message">
|
||||
<h3 class="content-message-title">
|
||||
Component Wrapper
|
||||
</h3>
|
||||
<div class="content-message-content">
|
||||
OverlayScrollbars provides its own wrapper components for popular component-based front-end frameworks. Each wrapper is written in <b>TypeScript</b> and actively maintained.
|
||||
<div class="three-col-content">
|
||||
<div class="three-col-content-item">
|
||||
<div class="three-col-content-item-content">
|
||||
<a href="https://github.com/KingSora/OverlayScrollbars/tree/v1.x/packages/overlayscrollbars-react" target="_blank" rel="noopener" class="three-col-content-item-content-framework-wrapper">
|
||||
<span class="three-col-content-item-content-framework-wrapper-icon three-col-content-item-content-framework-wrapper-icon-react">
|
||||
<svg version="1.1" viewBox="515.064 141.508 890.053 792.629" enable-background="new 515.064 141.508 890.053 792.629" xml:space="preserve">
|
||||
<g>
|
||||
<path fill="#fff" d="M1405.116,537.914c0-58.962-73.838-114.84-187.045-149.491c26.125-115.384,14.514-207.183-36.646-236.573
|
||||
c-11.793-6.894-25.581-10.16-40.639-10.16v40.457c8.346,0,15.058,1.633,20.682,4.717c24.674,14.151,35.377,68.033,27.032,137.335
|
||||
c-1.995,17.054-5.262,35.015-9.253,53.338c-35.559-8.708-74.383-15.421-115.202-19.774c-24.491-33.563-49.891-64.042-75.471-90.711
|
||||
c59.143-54.971,114.658-85.086,152.394-85.086v-40.457c-49.891,0-115.202,35.559-181.24,97.242
|
||||
c-66.037-61.32-131.349-96.516-181.239-96.516v40.457c37.554,0,93.251,29.935,152.394,84.542
|
||||
c-25.398,26.669-50.798,56.966-74.927,90.529c-41.001,4.354-79.825,11.066-115.384,19.956c-4.173-18.142-7.257-35.74-9.434-52.612
|
||||
c-8.527-69.303,1.995-123.185,26.487-137.517c5.442-3.266,12.518-4.717,20.863-4.717v-40.457c-15.239,0-29.027,3.266-41.001,10.16
|
||||
c-50.979,29.39-62.409,121.008-36.104,236.029c-112.844,34.832-186.319,90.528-186.319,149.31
|
||||
c0,58.962,73.839,114.839,187.046,149.49c-26.125,115.384-14.514,207.184,36.646,236.573c11.793,6.895,25.58,10.16,40.82,10.16
|
||||
c49.891,0,115.202-35.559,181.239-97.242c66.037,61.32,131.349,96.517,181.24,96.517c15.239,0,29.027-3.266,41.001-10.16
|
||||
c50.979-29.391,62.408-121.008,36.103-236.029C1331.642,652.571,1405.117,596.694,1405.116,537.914L1405.116,537.914z
|
||||
M1168.906,416.906c-6.713,23.402-15.058,47.532-24.491,71.661c-7.438-14.514-15.24-29.027-23.767-43.541
|
||||
c-8.346-14.514-17.235-28.665-26.125-42.453C1120.285,406.384,1145.14,411.101,1168.906,416.906L1168.906,416.906z
|
||||
M1085.815,610.119c-14.15,24.492-28.664,47.714-43.723,69.303c-27.031,2.358-54.426,3.629-82.002,3.629
|
||||
c-27.395,0-54.789-1.271-81.64-3.447c-15.058-21.589-29.753-44.63-43.904-68.939c-13.788-23.767-26.306-47.896-37.735-72.206
|
||||
c11.248-24.311,23.947-48.621,37.555-72.387c14.15-24.492,28.664-47.714,43.723-69.304c27.031-2.358,54.426-3.628,82.002-3.628
|
||||
c27.395,0,54.789,1.27,81.64,3.447c15.058,21.589,29.753,44.629,43.903,68.939c13.788,23.767,26.307,47.896,37.736,72.206
|
||||
C1111.94,562.043,1099.422,586.354,1085.815,610.119L1085.815,610.119z M1144.415,586.534
|
||||
c9.796,24.311,18.142,48.621,25.035,72.206c-23.766,5.806-48.802,10.704-74.745,14.514c8.89-13.97,17.779-28.302,26.125-42.997
|
||||
C1129.175,615.743,1136.976,601.048,1144.415,586.534z M960.454,780.111c-16.873-17.417-33.745-36.829-50.436-58.055
|
||||
c16.328,0.726,33.019,1.27,49.891,1.27c17.054,0,33.926-0.363,50.436-1.27C994.017,743.282,977.145,762.694,960.454,780.111z
|
||||
M825.477,673.254c-25.763-3.81-50.617-8.527-74.383-14.332c6.712-23.403,15.058-47.532,24.491-71.662
|
||||
c7.438,14.514,15.24,29.027,23.767,43.542C807.878,645.315,816.587,659.466,825.477,673.254z M959.546,295.716
|
||||
c16.873,17.417,33.745,36.829,50.436,58.055c-16.328-0.726-33.019-1.271-49.891-1.271c-17.054,0-33.926,0.363-50.436,1.271
|
||||
C925.983,332.545,942.855,313.133,959.546,295.716z M825.295,402.573c-8.89,13.97-17.779,28.302-26.125,42.997
|
||||
c-8.345,14.514-16.146,29.027-23.585,43.541c-9.796-24.311-18.142-48.621-25.035-72.206
|
||||
C774.315,411.281,799.352,406.383,825.295,402.573L825.295,402.573z M661.108,629.713
|
||||
c-64.223-27.395-105.769-63.316-105.769-91.799c0-28.483,41.546-64.586,105.769-91.8c15.603-6.712,32.656-12.699,50.254-18.323
|
||||
c10.341,35.559,23.947,72.568,40.82,110.485c-16.691,37.735-30.116,74.564-40.276,109.941
|
||||
C693.946,642.594,676.893,636.426,661.108,629.713L661.108,629.713z M758.713,888.964c-24.673-14.151-35.377-68.033-27.031-137.336
|
||||
c1.995-17.054,5.261-35.015,9.252-53.338c35.559,8.708,74.383,15.421,115.203,19.774c24.491,33.563,49.891,64.042,75.471,90.711
|
||||
c-59.144,54.971-114.658,85.087-152.394,85.087C771.05,893.681,764.156,892.048,758.713,888.964L758.713,888.964z
|
||||
M1189.044,750.721c8.527,69.303-1.995,123.185-26.487,137.518c-5.442,3.266-12.519,4.717-20.863,4.717
|
||||
c-37.554,0-93.251-29.935-152.394-84.543c25.398-26.669,50.798-56.966,74.927-90.528c41.001-4.354,79.825-11.067,115.384-19.957
|
||||
C1183.783,716.251,1187.049,733.849,1189.044,750.721z M1258.892,629.713c-15.603,6.713-32.656,12.699-50.254,18.323
|
||||
c-10.341-35.559-23.947-72.568-40.82-110.485c16.691-37.735,30.116-74.564,40.276-109.941c17.96,5.624,35.014,11.793,50.979,18.505
|
||||
c64.223,27.395,105.768,63.316,105.768,91.8C1364.66,566.396,1323.114,602.5,1258.892,629.713L1258.892,629.713z"/>
|
||||
<circle fill="#fff" cx="959.909" cy="537.914" r="82.91"/>
|
||||
<path fill="#fff" d="M1140.604,141.69"/>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
<h4>React</h4>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="three-col-content-item">
|
||||
<div class="three-col-content-item-content">
|
||||
<a href="https://github.com/KingSora/OverlayScrollbars/tree/v1.x/packages/overlayscrollbars-vue" target="_blank" rel="noopener" class="three-col-content-item-content-framework-wrapper">
|
||||
<span class="three-col-content-item-content-framework-wrapper-icon three-col-content-item-content-framework-wrapper-icon-vue">
|
||||
<svg version="1.1" viewBox="0 0 197 170">
|
||||
<polygon fill="#ffffff" points="98.16 102.01 42.1757011 5.09911711 39.23 0 0 0 2.94507611 5.10107823 98.16 170.02 196.32 0 157.06 0"/>
|
||||
<polygon fill="#ffffff" points="98.16 29.0371525 81.35 2.009956e-14 75.5 2.009956e-14 -6.81139173e-16 2.009956e-14 2.94 5.1 78.4487095 5.1 98.16 39.26 117.879366 5.1 193.38 5.1 196.325 0 120.82 7.80656356e-15 114.973219 2.009956e-14"/>
|
||||
</svg>
|
||||
</span>
|
||||
<h4>Vue</h4>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="three-col-content-item">
|
||||
<div class="three-col-content-item-content">
|
||||
<a href="https://github.com/KingSora/OverlayScrollbars/tree/v1.x/packages/overlayscrollbars-ngx" target="_blank" rel="noopener" class="three-col-content-item-content-framework-wrapper">
|
||||
<span class="three-col-content-item-content-framework-wrapper-icon three-col-content-item-content-framework-wrapper-icon-angular">
|
||||
<svg version="1.1" viewBox="0 0 250 250" style="enable-background:new 0 0 250 250;" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<polygon fill="#FFFFFF" points="125,153.4 100.3,153.4 88.6,182.6 88.6,182.6 66.9,182.6 66.8,182.6 125,52.1 125,52.2 125,52.2
|
||||
125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,153.4 "/>
|
||||
<polygon fill="#FFFFFF" points="108,135.4 125,135.4 125,135.4 125,94.5 "/>
|
||||
</g>
|
||||
<g style="opacity:0.9">
|
||||
<polygon fill="#FFFFFF" points="125,153.4 149.7,153.4 161.4,182.6 161.4,182.6 183.1,182.6 183.2,182.6 125,52.1 125,52.2 125,52.2
|
||||
125,30 125,30 218.1,63.2 203.9,186.3 125,230 125,230 125,153.4 "/>
|
||||
<polygon fill="#FFFFFF" points="142,135.4 125,135.4 125,135.4 125,94.5 "/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
<h4>Angular</h4>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="three-col-content-item">
|
||||
<div class="three-col-content-item-content">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section">
|
||||
<div class="container">
|
||||
<div class="content-message-full content-message">
|
||||
<h3 class="content-message-title">
|
||||
Limitations
|
||||
</h3>
|
||||
<div class="content-message-content">
|
||||
The plugin was tested with great care on many different devices and browsers. The only bug which I've found was on Safari on iOS (i.e. mobile Safari) where sometimes native scrollbars will appear if you've applied the plugin to the body element. I wasnt able to fix this bug until now, because Safari seems to act strange since everything works on Chrome and other mobile browsers.
|
||||
<br><br>
|
||||
If you find a bug, any strange or maybe unintended behavior, please open a issue on <a href="https://github.com/KingSora/OverlayScrollbars/issues" target="_blank" rel="noopener" class="inline-btn">github</a>.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sponsors" class="content-section">
|
||||
<div class="container">
|
||||
<div class="content-message-full content-message">
|
||||
<h3 class="content-message-title">
|
||||
Sponsors
|
||||
</h3>
|
||||
<div class="content-message-content">
|
||||
<div class="sponsors">
|
||||
<div class="sponsors-sponsor">
|
||||
<div class="sponsors-sponsor-logo">
|
||||
<img src="img/browserstack.png" alt="BrowserStack"/>
|
||||
</div>
|
||||
<div class="sponsors-sponsor-text">
|
||||
Thanks to BrowserStack for sponsoring open source projects and letting me test OverlayScrollbars for free.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section">
|
||||
<div class="container">
|
||||
<div class="content-message-full content-message">
|
||||
<h3 class="content-message-title">
|
||||
License
|
||||
</h3>
|
||||
<div class="content-message-content">
|
||||
<center><a href="https://en.wikipedia.org/wiki/MIT_License" class="inline-btn" target="_blank" rel="noopener">MIT License</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section">
|
||||
<div class="container">
|
||||
<div class="content-message-full content-message">
|
||||
<h3 class="content-message-title">
|
||||
Epilogue
|
||||
</h3>
|
||||
<div class="content-message-content">
|
||||
I've created this plugin because I hate ugly and space consuming scrollbars. Similar plugins haven't met my requirements in terms of features, quality, simplicity, license or browser support.<br>
|
||||
<br>
|
||||
<div class="logo"></div>
|
||||
<br>
|
||||
This project required very much time and research and I'm very proud that I've managed to implement everything I wanted to. Nonetheless there will be enhancements in the future, either because of the community (bugs and requests) or because of me and my perfectionism. Browsers will evolve too over time and I'll do my best to use always the most recent technologies to ensure maximum efficiency and performance.<br>
|
||||
<br>
|
||||
The future plans are:
|
||||
<ul>
|
||||
<li>Minimize the code as much as possible.</li>
|
||||
<li>Frequent updates in terms of bug-fixes and enhancements.</li>
|
||||
<li>Enhancements on this page to provide the best possible documentation and presentation.</li>
|
||||
</ul>
|
||||
<br>
|
||||
If you like my work and want to support me, feel free to leave me a small donation. You'll definitely make my day.
|
||||
|
||||
<a href="https://www.paypal.me/ReneHaas" target="_blank" rel="noopener" class="button-dontate">Donate</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,628 @@
|
||||
<!--
|
||||
<div class="content-section">
|
||||
<div class="container">
|
||||
<div class="content-message-full content-message">
|
||||
<h3 class="content-message-title">Styling</h3>
|
||||
<div class="content-message-content">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-section">
|
||||
<div class="container">
|
||||
<div class="group-box">
|
||||
<div class="group-box-caption">Horizontal Scrollbar:</div>
|
||||
|
||||
<div class="expander-header" data-expander-key="styling-horizontal-scrollbar-general">
|
||||
<i class="mdi mdi-chevron-down"></i>
|
||||
<span>Scrollbar:</span>
|
||||
</div>
|
||||
<div class="expander-content" data-expander-value="styling-horizontal-scrollbar-general">
|
||||
<div class="group-box">
|
||||
<div class="group-box-caption">Constants:</div>
|
||||
<div class="styling-tool-line">
|
||||
<div class="styling-tool-line-left">
|
||||
Size:
|
||||
</div>
|
||||
<div class="styling-tool-line-right">
|
||||
<div class="styling-tool-line-right-number-unit">
|
||||
<div class="input-numeric" data-input-numeric-min="1" data-input-numeric-max="10" data-input-numeric-step="1" data-input-numeric-float="false">
|
||||
<div class="button input-numeric-button input-numeric-button-decrease">
|
||||
<i class="mdi mdi-minus"></i>
|
||||
</div>
|
||||
<div class="button input-numeric-button input-numeric-button-increase">
|
||||
<i class="mdi mdi-plus"></i>
|
||||
</div>
|
||||
<div class="input-numeric-input">
|
||||
<input class="input" type="text" value="0" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<div class="dropdown-value">px</div>
|
||||
<div class="dropdown-list">
|
||||
<div>px</div>
|
||||
<div>%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="styling-tool-line">
|
||||
<div class="styling-tool-line-left">
|
||||
Length:
|
||||
</div>
|
||||
<div class="styling-tool-line-right">
|
||||
<div class="styling-tool-line-right-number-unit">
|
||||
<div class="input-numeric" data-input-numeric-min="1" data-input-numeric-max="10" data-input-numeric-step="1" data-input-numeric-float="false">
|
||||
<div class="button input-numeric-button input-numeric-button-decrease">
|
||||
<i class="mdi mdi-minus"></i>
|
||||
</div>
|
||||
<div class="button input-numeric-button input-numeric-button-increase">
|
||||
<i class="mdi mdi-plus"></i>
|
||||
</div>
|
||||
<div class="input-numeric-input">
|
||||
<input class="input" type="text" value="0" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<div class="dropdown-value">px</div>
|
||||
<div class="dropdown-list">
|
||||
<div>px</div>
|
||||
<div>%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="styling-tool-line">
|
||||
<div class="styling-tool-line-left">
|
||||
Padding Top:
|
||||
</div>
|
||||
<div class="styling-tool-line-right">
|
||||
<div class="styling-tool-line-right-number-unit">
|
||||
<div class="input-numeric" data-input-numeric-min="1" data-input-numeric-max="10" data-input-numeric-step="1" data-input-numeric-float="false">
|
||||
<div class="button input-numeric-button input-numeric-button-decrease">
|
||||
<i class="mdi mdi-minus"></i>
|
||||
</div>
|
||||
<div class="button input-numeric-button input-numeric-button-increase">
|
||||
<i class="mdi mdi-plus"></i>
|
||||
</div>
|
||||
<div class="input-numeric-input">
|
||||
<input class="input" type="text" value="0" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<div class="dropdown-value">px</div>
|
||||
<div class="dropdown-list">
|
||||
<div>px</div>
|
||||
<div>%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="styling-tool-line">
|
||||
<div class="styling-tool-line-left">
|
||||
Padding Right:
|
||||
</div>
|
||||
<div class="styling-tool-line-right">
|
||||
<div class="styling-tool-line-right-number-unit">
|
||||
<div class="input-numeric" data-input-numeric-min="1" data-input-numeric-max="10" data-input-numeric-step="1" data-input-numeric-float="false">
|
||||
<div class="button input-numeric-button input-numeric-button-decrease">
|
||||
<i class="mdi mdi-minus"></i>
|
||||
</div>
|
||||
<div class="button input-numeric-button input-numeric-button-increase">
|
||||
<i class="mdi mdi-plus"></i>
|
||||
</div>
|
||||
<div class="input-numeric-input">
|
||||
<input class="input" type="text" value="0" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<div class="dropdown-value">px</div>
|
||||
<div class="dropdown-list">
|
||||
<div>px</div>
|
||||
<div>%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="styling-tool-line">
|
||||
<div class="styling-tool-line-left">
|
||||
Padding Bottom:
|
||||
</div>
|
||||
<div class="styling-tool-line-right">
|
||||
<div class="styling-tool-line-right-number-unit">
|
||||
<div class="input-numeric" data-input-numeric-min="1" data-input-numeric-max="10" data-input-numeric-step="1" data-input-numeric-float="false">
|
||||
<div class="button input-numeric-button input-numeric-button-decrease">
|
||||
<i class="mdi mdi-minus"></i>
|
||||
</div>
|
||||
<div class="button input-numeric-button input-numeric-button-increase">
|
||||
<i class="mdi mdi-plus"></i>
|
||||
</div>
|
||||
<div class="input-numeric-input">
|
||||
<input class="input" type="text" value="0" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<div class="dropdown-value">px</div>
|
||||
<div class="dropdown-list">
|
||||
<div>px</div>
|
||||
<div>%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="styling-tool-line">
|
||||
<div class="styling-tool-line-left">
|
||||
Padding Left:
|
||||
</div>
|
||||
<div class="styling-tool-line-right">
|
||||
<div class="styling-tool-line-right-number-unit">
|
||||
<div class="input-numeric" data-input-numeric-min="1" data-input-numeric-max="10" data-input-numeric-step="1" data-input-numeric-float="false">
|
||||
<div class="button input-numeric-button input-numeric-button-decrease">
|
||||
<i class="mdi mdi-minus"></i>
|
||||
</div>
|
||||
<div class="button input-numeric-button input-numeric-button-increase">
|
||||
<i class="mdi mdi-plus"></i>
|
||||
</div>
|
||||
<div class="input-numeric-input">
|
||||
<input class="input" type="text" value="0" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<div class="dropdown-value">px</div>
|
||||
<div class="dropdown-list">
|
||||
<div>px</div>
|
||||
<div>%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="styling-tool-line">
|
||||
<div class="styling-tool-line-left">
|
||||
Border Width:
|
||||
</div>
|
||||
<div class="styling-tool-line-right">
|
||||
<div class="styling-tool-line-right-number-unit">
|
||||
<div class="input-numeric" data-input-numeric-min="1" data-input-numeric-max="10" data-input-numeric-step="1" data-input-numeric-float="false">
|
||||
<div class="button input-numeric-button input-numeric-button-decrease">
|
||||
<i class="mdi mdi-minus"></i>
|
||||
</div>
|
||||
<div class="button input-numeric-button input-numeric-button-increase">
|
||||
<i class="mdi mdi-plus"></i>
|
||||
</div>
|
||||
<div class="input-numeric-input">
|
||||
<input class="input" type="text" value="0" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<div class="dropdown-value">px</div>
|
||||
<div class="dropdown-list">
|
||||
<div>px</div>
|
||||
<div>%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group-box">
|
||||
<div class="group-box-caption">
|
||||
State:
|
||||
<div class="radio-button-bar styling-tool-states">
|
||||
<div class="active radio-button" data-radio="styling-horizontal-scrollbar-state">
|
||||
Normal
|
||||
</div>
|
||||
<div class="radio-button" data-radio="styling-horizontal-scrollbar-state">
|
||||
Hover
|
||||
</div>
|
||||
<div class="radio-button" data-radio="styling-horizontal-scrollbar-state">
|
||||
Active
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="styling-tool-line">
|
||||
<div class="styling-tool-line-left">
|
||||
Border Style:
|
||||
</div>
|
||||
<div class="styling-tool-line-right">
|
||||
<div class="dropdown">
|
||||
<div class="dropdown-value">Solid</div>
|
||||
<div class="dropdown-list">
|
||||
<div>Solid</div>
|
||||
<div>Dotted</div>
|
||||
<div>Dashed</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="styling-tool-line">
|
||||
<div class="styling-tool-line-left">
|
||||
Border Color:
|
||||
</div>
|
||||
<div class="styling-tool-line-right">
|
||||
<input type="text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="styling-tool-line">
|
||||
<div class="styling-tool-line-left">
|
||||
Border Radius:
|
||||
</div>
|
||||
<div class="styling-tool-line-right">
|
||||
<div class="styling-tool-line-right-number-unit">
|
||||
<div class="input-numeric" data-input-numeric-min="1" data-input-numeric-max="10" data-input-numeric-step="1" data-input-numeric-float="false">
|
||||
<div class="button input-numeric-button input-numeric-button-decrease">
|
||||
<i class="mdi mdi-minus"></i>
|
||||
</div>
|
||||
<div class="button input-numeric-button input-numeric-button-increase">
|
||||
<i class="mdi mdi-plus"></i>
|
||||
</div>
|
||||
<div class="input-numeric-input">
|
||||
<input class="input" type="text" value="0" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<div class="dropdown-value">px</div>
|
||||
<div class="dropdown-list">
|
||||
<div>px</div>
|
||||
<div>%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="styling-tool-line">
|
||||
<div class="styling-tool-line-left">
|
||||
Background:
|
||||
</div>
|
||||
<div class="styling-tool-line-right">
|
||||
<input type="text">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="expander-header" data-expander-key="styling-horizontal-scrollbar-track">
|
||||
<i class="mdi mdi-chevron-down"></i>
|
||||
<span>Track:</span>
|
||||
</div>
|
||||
<div class="expander-content" data-expander-value="styling-horizontal-scrollbar-track">
|
||||
<div class="group-box">
|
||||
<div class="group-box-caption">
|
||||
State:
|
||||
<div class="radio-button-bar styling-tool-states">
|
||||
<div class="active radio-button" data-radio="styling-horizontal-scrollbar-track-state">
|
||||
Normal
|
||||
</div>
|
||||
<div class="radio-button" data-radio="styling-horizontal-scrollbar-track-state">
|
||||
Hover
|
||||
</div>
|
||||
<div class="radio-button" data-radio="styling-horizontal-scrollbar-track-state">
|
||||
Active
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="styling-tool-line">
|
||||
<div class="styling-tool-line-left">
|
||||
Background:
|
||||
</div>
|
||||
<div class="styling-tool-line-right">
|
||||
<input type="text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="styling-tool-line">
|
||||
<div class="styling-tool-line-left">
|
||||
Border Radius:
|
||||
</div>
|
||||
<div class="styling-tool-line-right">
|
||||
<div class="styling-tool-line-right-number-unit">
|
||||
<div class="input-numeric" data-input-numeric-min="1" data-input-numeric-max="10" data-input-numeric-step="1" data-input-numeric-float="false">
|
||||
<div class="button input-numeric-button input-numeric-button-decrease">
|
||||
<i class="mdi mdi-minus"></i>
|
||||
</div>
|
||||
<div class="button input-numeric-button input-numeric-button-increase">
|
||||
<i class="mdi mdi-plus"></i>
|
||||
</div>
|
||||
<div class="input-numeric-input">
|
||||
<input class="input" type="text" value="0" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<div class="dropdown-value">px</div>
|
||||
<div class="dropdown-list">
|
||||
<div>px</div>
|
||||
<div>%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="expander-header" data-expander-key="styling-horizontal-scrollbar-track-before">
|
||||
<i class="mdi mdi-chevron-down"></i>
|
||||
<span>:before</span>
|
||||
</div>
|
||||
<div class="expander-content" data-expander-value="styling-horizontal-scrollbar-track-before">
|
||||
</div>
|
||||
<div class="expander-header" data-expander-key="styling-horizontal-scrollbar-track-after">
|
||||
<i class="mdi mdi-chevron-down"></i>
|
||||
<span>:after</span>
|
||||
</div>
|
||||
<div class="expander-content" data-expander-value="styling-horizontal-scrollbar-track-after">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
-->
|
||||
<div class="content-section skew">
|
||||
<div class="container">
|
||||
<div class="content-message-full content-message">
|
||||
<h3 class="content-message-title">Themes</h3>
|
||||
<div class="content-message-content">
|
||||
In this section you can find all themes which I've created for the community. If you've found a theme which matches your expectations download the CSS and use it below the core styles of the plugin.<br>
|
||||
<br>
|
||||
These themes shall serve as a template, you can change them as you please.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-section content-section-themes">
|
||||
<div class="content-section-themes-inner">
|
||||
<div class="theme-container">
|
||||
<div class="theme-container-caption">
|
||||
os-theme-dark
|
||||
</div>
|
||||
<div id="os-theme-dark" class="theme-container-content">
|
||||
<div class="theme-container-content-inner">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br><br>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. <br><br>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
|
||||
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br><br>
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-container-bottom">
|
||||
built-in
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-container theme-container-dark">
|
||||
<div class="theme-container-caption">
|
||||
os-theme-light
|
||||
</div>
|
||||
<div id="os-theme-light" class="theme-container-content">
|
||||
<div class="theme-container-content-inner">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br><br>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. <br><br>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
|
||||
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br><br>
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-container-bottom">
|
||||
built-in
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="theme-container">
|
||||
<div class="theme-container-caption">
|
||||
os-theme-minimal-dark
|
||||
</div>
|
||||
<div id="os-theme-minimal-dark" class="theme-container-content">
|
||||
<div class="theme-container-content-inner">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br><br>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. <br><br>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
|
||||
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br><br>
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-container-bottom">
|
||||
<a href="etc/os-theme-minimal-dark.css" target="_blank" rel="noopener" class="theme-container-bottom-button">
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-container theme-container-dark">
|
||||
<div class="theme-container-caption">
|
||||
os-theme-minimal-light
|
||||
</div>
|
||||
<div id="os-theme-minimal-light" class="theme-container-content">
|
||||
<div class="theme-container-content-inner">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br><br>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. <br><br>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
|
||||
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br><br>
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-container-bottom">
|
||||
<a href="etc/os-theme-minimal-light.css" target="_blank" rel="noopener" class="theme-container-bottom-button">
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-container">
|
||||
<div class="theme-container-caption">
|
||||
os-theme-thin-dark
|
||||
</div>
|
||||
<div id="os-theme-thin-dark" class="theme-container-content">
|
||||
<div class="theme-container-content-inner">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br><br>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. <br><br>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
|
||||
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br><br>
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-container-bottom">
|
||||
<a href="etc/os-theme-thin-dark.css" target="_blank" rel="noopener" class="theme-container-bottom-button">
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-container theme-container-dark">
|
||||
<div class="theme-container-caption">
|
||||
os-theme-thin-light
|
||||
</div>
|
||||
<div id="os-theme-thin-light" class="theme-container-content">
|
||||
<div class="theme-container-content-inner">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br><br>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. <br><br>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
|
||||
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br><br>
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-container-bottom">
|
||||
<a href="etc/os-theme-thin-light.css" target="_blank" rel="noopener" class="theme-container-bottom-button">
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-container">
|
||||
<div class="theme-container-caption">
|
||||
os-theme-thick-dark
|
||||
</div>
|
||||
<div id="os-theme-thick-dark" class="theme-container-content">
|
||||
<div class="theme-container-content-inner">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br><br>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. <br><br>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
|
||||
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br><br>
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-container-bottom">
|
||||
<a href="etc/os-theme-thick-dark.css" target="_blank" rel="noopener" class="theme-container-bottom-button">
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-container theme-container-dark">
|
||||
<div class="theme-container-caption">
|
||||
os-theme-thick-light
|
||||
</div>
|
||||
<div id="os-theme-thick-light" class="theme-container-content">
|
||||
<div class="theme-container-content-inner">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br><br>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. <br><br>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
|
||||
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br><br>
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-container-bottom">
|
||||
<a href="etc/os-theme-thick-light.css" target="_blank" rel="noopener" class="theme-container-bottom-button">
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-container">
|
||||
<div class="theme-container-caption">
|
||||
os-theme-round-dark
|
||||
</div>
|
||||
<div id="os-theme-round-dark" class="theme-container-content">
|
||||
<div class="theme-container-content-inner">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br><br>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. <br><br>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
|
||||
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br><br>
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-container-bottom">
|
||||
<a href="etc/os-theme-round-dark.css" target="_blank" rel="noopener" class="theme-container-bottom-button">
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-container theme-container-dark">
|
||||
<div class="theme-container-caption">
|
||||
os-theme-round-light
|
||||
</div>
|
||||
<div id="os-theme-round-light" class="theme-container-content">
|
||||
<div class="theme-container-content-inner">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br><br>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. <br><br>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
|
||||
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br><br>
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-container-bottom">
|
||||
<a href="etc/os-theme-round-light.css" target="_blank" rel="noopener" class="theme-container-bottom-button">
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-container">
|
||||
<div class="theme-container-caption">
|
||||
os-theme-block-dark
|
||||
</div>
|
||||
<div id="os-theme-block-dark" class="theme-container-content">
|
||||
<div class="theme-container-content-inner">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br><br>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. <br><br>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
|
||||
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br><br>
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-container-bottom">
|
||||
<a href="etc/os-theme-block-dark.css" target="_blank" rel="noopener" class="theme-container-bottom-button">
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-container theme-container-dark">
|
||||
<div class="theme-container-caption">
|
||||
os-theme-block-light
|
||||
</div>
|
||||
<div id="os-theme-block-light" class="theme-container-content">
|
||||
<div class="theme-container-content-inner">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<br><br>
|
||||
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
|
||||
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. <br><br>
|
||||
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
|
||||
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<br><br>
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-container-bottom">
|
||||
<a href="etc/os-theme-block-light.css" target="_blank" rel="noopener" class="theme-container-bottom-button">
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user