mirror of
https://github.com/tenrok/OverlayScrollbars.git
synced 2026-05-17 08:19:40 +03:00
Rene Haas
5862 lines
390 KiB
HTML
5862 lines
390 KiB
HTML
<div id="content-navigable">
|
|
<div class="container">
|
|
<div id="content-navigation">
|
|
<div class="content-navigation-item content-navigation-item-caption">
|
|
<span>Basics:</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-clickable active" data-tab-key="basics-options" data-navigation="[1]options">
|
|
<span>Options</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-clickable" data-tab-key="basics-supportedelements" data-navigation="[1]supportedelements">
|
|
<span>Supported Elements</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-clickable" data-tab-key="basics-flexbox" data-navigation="[1]flexbox">
|
|
<span>Flexbox</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-info">
|
|
<span>Initialization:</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-clickable" data-tab-key="initialization-default" data-navigation="[1]initialization">
|
|
<span>Default</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-clickable" data-tab-key="initialization-jquery" data-navigation="[1]initialization-jquery">
|
|
<span>jQuery</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-info">
|
|
<span>Instance Methods:</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-clickable" data-tab-key="instance-options" data-navigation="[1]method-options">
|
|
<span>options</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-clickable" data-tab-key="instance-update" data-navigation="[1]method-update">
|
|
<span>update</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-clickable" data-tab-key="instance-sleep" data-navigation="[1]method-sleep">
|
|
<span>sleep</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-clickable" data-tab-key="instance-scroll" data-navigation="[1]method-scroll">
|
|
<span>scroll</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-clickable" data-tab-key="instance-scrollStop" data-navigation="[1]method-scrollstop">
|
|
<span>scrollStop</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-clickable" data-tab-key="instance-getElements" data-navigation="[1]method-getelements">
|
|
<span>getElements</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-clickable" data-tab-key="instance-getState" data-navigation="[1]method-getstate">
|
|
<span>getState</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-clickable" data-tab-key="instance-destroy" data-navigation="[1]method-destroy">
|
|
<span>destroy</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-clickable" data-tab-key="instance-ext" data-navigation="[1]method-ext">
|
|
<span>ext</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-clickable" data-tab-key="instance-addext" data-navigation="[1]method-addext">
|
|
<span>addExt</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-clickable" data-tab-key="instance-removeext" data-navigation="[1]method-removeext">
|
|
<span>removeExt</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-info">
|
|
<span>Global Methods:</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-clickable" data-tab-key="global-defaultOptions" data-navigation="[1]gmethod-defaultoptions">
|
|
<span>defaultOptions</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-clickable" data-tab-key="global-globals" data-navigation="[1]gmethod-globals">
|
|
<span>globals</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-clickable" data-tab-key="global-extension" data-navigation="[1]gmethod-extension">
|
|
<span>extension</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-clickable" data-tab-key="global-valid" data-navigation="[1]gmethod-valid">
|
|
<span>valid</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-caption">
|
|
<span>Extensions:</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-clickable" data-tab-key="extensions-basics" data-navigation="[1]extensions-basics">
|
|
<span>Basics</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-clickable" data-tab-key="extensions-createextensions" data-navigation="[1]extensions-createextensions">
|
|
<span>Create Extensions</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-caption">
|
|
<span>Themes & Styling:</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-clickable" data-tab-key="themesandstyling-builtinthemes" data-navigation="[1]builtinthemes">
|
|
<span>Built-in Themes</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-clickable" data-tab-key="themesandstyling-classnames" data-navigation="[1]classnames">
|
|
<span>Class Names</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-clickable" data-tab-key="themesandstyling-styling" data-navigation="[1]styling">
|
|
<span>Styling</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-caption">
|
|
<span>Structure:</span>
|
|
</div>
|
|
<div class="content-navigation-item content-navigation-item-clickable" data-tab-key="structure-domelements" data-navigation="[1]domelements">
|
|
<span>DOM Elements</span>
|
|
</div>
|
|
</div>
|
|
<div id="content-navigation-main">
|
|
<div id="basics-options" class="active" data-tab-value="basics-options">
|
|
<div class="content-navigation-main-caption">Options</div>
|
|
<div class="content-navigation-sub-caption">Summarized default options</div>
|
|
<div class="options-object-summary">
|
|
<pre><code class="js expandable">{
|
|
className : "os-theme-dark",
|
|
resize : "none",
|
|
sizeAutoCapable : true,
|
|
clipAlways : true,
|
|
normalizeRTL : true,
|
|
paddingAbsolute : false,
|
|
autoUpdate : null,
|
|
autoUpdateInterval : 33,
|
|
updateOnLoad : ["img"],
|
|
nativeScrollbarsOverlaid : {
|
|
showNativeScrollbars : false,
|
|
initialize : true
|
|
},
|
|
overflowBehavior : {
|
|
x : "scroll",
|
|
y : "scroll"
|
|
},
|
|
scrollbars : {
|
|
visibility : "auto",
|
|
autoHide : "never",
|
|
autoHideDelay : 800,
|
|
dragScrolling : true,
|
|
clickScrolling : false,
|
|
touchSupport : true,
|
|
snapHandle : false
|
|
},
|
|
textarea : {
|
|
dynWidth : false,
|
|
dynHeight : false,
|
|
inheritedAttrs : ["style", "class"]
|
|
},
|
|
callbacks : {
|
|
onInitialized : null,
|
|
onInitializationWithdrawn : null,
|
|
onDestroyed : null,
|
|
onScrollStart : null,
|
|
onScroll : null,
|
|
onScrollStop : null,
|
|
onOverflowChanged : null,
|
|
onOverflowAmountChanged : null,
|
|
onDirectionChanged : null,
|
|
onContentSizeChanged : null,
|
|
onHostSizeChanged : null,
|
|
onUpdated : null
|
|
}
|
|
}</code></pre>
|
|
</div>
|
|
|
|
<div class="content-navigation-sub-caption">Documentation</div>
|
|
<div class="txtbox txtbox-yellow">
|
|
<i class="mdi mdi-information-outline"></i>
|
|
<span>Click on an option to toggle its description and additional info.</span>
|
|
</div>
|
|
|
|
<table class="options-table">
|
|
<thead>
|
|
<tr>
|
|
<td>Option Name</td>
|
|
<td>Type(s)</td>
|
|
<td>Valid values</td>
|
|
<td>Default Value</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>className</td>
|
|
<td>string / null</td>
|
|
<td>-</td>
|
|
<td>"os-theme-dark"</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
The class name which shall be added to the host element. You can add multiple class names if you separate them by spaces.<br>
|
|
This option is intended for styling / theming purposes.<br><br>
|
|
If this option is null, then the class <code class="code-inline css">.os-theme-none</code> gets added automatically to the host element. This class ensures that the scrollbars won't have any appearance.<br>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>resize</td>
|
|
<td>string</td>
|
|
<td>
|
|
<p><code class="code-inline js">[ "none", "both", "horizontal", "vertical" ]</code></p>
|
|
<p>shorthand: <code class="code-inline js">[ "n", "b", "h", "v" ]</code></p>
|
|
</td>
|
|
<td>"none"</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
The resize behavior of the host element. This option works exactly like the <a href="https://www.w3schools.com/cssref/css3_pr_resize.asp" target="_blank" rel="noopener" class="inline-btn">CSS3 resize property</a>.<br>
|
|
This option is ignored if the target-element is the body element. The window itself can be resized and thus this option isn't needed.<br>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"none"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
The host element is not resizable.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"both"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
The host element is resizable in the horizontal and vertical direction.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"horizontal"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
The host element is resizable in the horizontal direction.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"vertical"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
The host element is resizable in the vertical direction.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>sizeAutoCapable</td>
|
|
<td>boolean</td>
|
|
<td>-</td>
|
|
<td>true</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
Indicates whether the host element is capable of "auto" sizes such as:
|
|
<code class="code-inline css">width: auto</code> and <code class="code-inline css">height: auto</code>.
|
|
If set to false and the property width or height is "auto", the rendered width or height of the content will be zero.<br>
|
|
If you are applying OverlayScrollbars to a <b>flexbox-element</b> set this option to <b>false</b> to ensure correct functionality.<br><br>
|
|
This option is ignored if the target-element is the body element, because in this case the size must be 100% (on both axis) to simulate the viewport correctly.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>clipAlways</td>
|
|
<td>boolean</td>
|
|
<td>-</td>
|
|
<td>true</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
Indicates whether the content shall be clipped always.<br>
|
|
|
|
If false the content gets only clipped if an overflow on the bottom or right<!-- (if the direction is RTL the left) --> edge exists.
|
|
<br>
|
|
-<br>
|
|
Use the <a data-navigation="demos/capabilites" class="inline-btn">capabilities demo</a>, set the host-element height dropdown value to "Auto" and play with the "Clip Always" checkbox to understand this option.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>normalizeRTL</td>
|
|
<td>boolean</td>
|
|
<td>-</td>
|
|
<td>true</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
Indicates whether RTL scrolling shall be normalized.<br>
|
|
Every browser handles RTL scrolling differently. With this option set to true, every call to the scroll method will be normalized to guarantee the same functionality on every browser.<br>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>paddingAbsolute</td>
|
|
<td>boolean</td>
|
|
<td>-</td>
|
|
<td>false</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
Indicates whether the padding for the content shall be absolute.<br>
|
|
Absolute padding means that the content will <i>always</i> have the defined spacing to the edge, regardless of the scroll-offset.<br>
|
|
Every browser handles normal padding on scrolled content differently. This options gives you also the possibility to handle padding the same way in every browser.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>autoUpdate</td>
|
|
<td>boolean / null</td>
|
|
<td>-</td>
|
|
<td>null</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
Indicates whether the plugin instance shall be updated continuously within a update loop.<br>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
true
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
The instance is using the update loop.<br>
|
|
On every iteration of the loop the DOM / instance is checked for changes. <u>Only if there are any changes</u> the DOM / instance will be updated.
|
|
<b>If the browser supports modern change detection mechanisms, they get turned off.</b>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
false
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
The instance isn't using the update loop.<br>
|
|
<b>If the browser supports modern change detection mechanisms, they gets turned on and the instance is using them.</b>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
null
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
The plugin chooses. - It checks if the browser supports modern change detection mechanisms. If yes, then the plugin will use these for updating (alike false), else it will fallback to the update loop (alike true).
|
|
<b>This option is highly recommended to guarantee best performance and browser compatibility.</b>
|
|
<br>-
|
|
<br>
|
|
<b>Note:</b> To ensure maximum efficiency there is only <u>ONE</u> update loop across <u>ALL</u> instances. The loop is only running if at least one instance is using it. The loop interval is the value of the smallest "autoUpdateInterval" option across all instances which are using the loop.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>autoUpdateInterval</td>
|
|
<td>number</td>
|
|
<td>-</td>
|
|
<td>33</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
The interval in milliseconds in which an auto update shall be performed for this instance.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>updateOnLoad</td>
|
|
<td>string / array / null</td>
|
|
<td>-</td>
|
|
<td>["img"]</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
<code class="code-inline">added in v1.12.0</code><br>
|
|
Selectors of which the elements load event shall be handled by the plugin.<br>
|
|
Thats means OverlayScrollbars will trigger a automatic update if a element with a matching selector emits a <code class="code-inline js">load</code> event.<br>
|
|
Per default OverlayScrollbars will update automatically if a <code class="code-inline js">img</code> element loads.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="options-object">
|
|
<p>nativeScrollbarsOverlaid : {</p>
|
|
<p>These options are only respected if the native scrollbars are overlaid.</p>
|
|
<table class="options-table">
|
|
<thead>
|
|
<tr>
|
|
<td>Option Name</td>
|
|
<td>Type(s)</td>
|
|
<td>Valid values</td>
|
|
<td>Default Value</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>showNativeScrollbars</td>
|
|
<td>boolean</td>
|
|
<td>-</td>
|
|
<td>false</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
Indicates whether the native overlaid scrollbars shall be visible.<br>
|
|
<p>true</p>
|
|
Shows the native scrollbars and hides the custom scrollbars, but still initializes the plugin and dispatches all callbacks.
|
|
<br>
|
|
<p>false</p>
|
|
Hides the native scrollbars and acts like if they were non-overlay-scrollbars.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>initialize</td>
|
|
<td>boolean</td>
|
|
<td>-</td>
|
|
<td>true</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
Indicates whether the plugin shall be initialized even if the native scrollbars are overlaid.<br>
|
|
<p>true</p>
|
|
Initializes the plugin normally.
|
|
<br>
|
|
<p>false</p>
|
|
Stops the plugin from initializing and fires the <code class="code-inline js">'onInitializationWithdrawn'</code> callback.<br>
|
|
-<br>
|
|
Use false if you want prevent the plugin to initialize for example on mobile browsers.<br>
|
|
<b>If you initialize the plugin on the body element, I highly recommend to set this option to false.</b>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p>}</p>
|
|
</div>
|
|
|
|
<div class="options-object">
|
|
<p>overflowBehavior : {</p>
|
|
<p>Defines how the overflow should be handled for each axis, e.g. if scrolling shall be possible or not.</p>
|
|
<table class="options-table">
|
|
<thead>
|
|
<tr>
|
|
<td>Option Name</td>
|
|
<td>Type(s)</td>
|
|
<td>Valid values</td>
|
|
<td>Default Value</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>x</td>
|
|
<td>string</td>
|
|
<td>
|
|
<p><code class="code-inline js">[ "hidden", "scroll", "visible-hidden", "visible-scroll" ]</code></p>
|
|
<p>shorthand: <code class="code-inline js">[ "h", "s", "v-h", "v-s" ]</code></p>
|
|
</td>
|
|
<td>"scroll"</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
The overflow behavior for the <u>x</u> (horizontal) axis.
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"hidden"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
If the x-axis has an overflow, the viewport becomes <code class="code-inline css">overflow-x: hidden</code>.<br>
|
|
<i>In short: <b>Horizontal scrolling is NOT possible and the content is clipped.</b></i>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"scroll"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
If the x-axis has an overflow, the viewport becomes <code class="code-inline css">overflow-x: scroll</code>.<br>
|
|
<i>In short: <b>Horizontal scrolling is possible and the content is clipped.</b></i>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"visible-hidden"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
If the x-axis has an overflow, the viewport becomes <code class="code-inline css">overflow-x: visible</code>.
|
|
If the y-axis has an overflow and the overflow behavior of the y-axis is "hidden" or "scroll", the viewport becomes <code class="code-inline css">overflow-x: hidden</code>.<br>
|
|
<i>In short: <b>The content is not clipped, but if the y-axis has an overflow the content is clipped and horizontal scrolling is NOT possible.</b></i>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"visible-scroll"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
If the x-axis has an overflow, the viewport becomes <code class="code-inline css">overflow-x: visible</code>.
|
|
If the y-axis has an overflow and the overflow behavior of the y-axis is "hidden" or "scroll", the viewport becomes <code class="code-inline css">overflow-x: scroll</code>.<br>
|
|
<i>In short: <b>The content is not clipped, but if the y-axis has an overflow the content is clipped and horizontal scrolling is possible.</b></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>y</td>
|
|
<td>string</td>
|
|
<td>
|
|
<p><code class="code-inline js">[ "hidden", "scroll", "visible-hidden", "visible-scroll" ]</code></p>
|
|
<p>shorthand: <code class="code-inline js">[ "h", "s", "v-h", "v-s" ]</code></p>
|
|
</td>
|
|
<td>"scroll"</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
The overflow behavior for the <u>y</u> (vertical) axis.
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"hidden"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
If the y-axis has an overflow, the viewport becomes <code class="code-inline css">overflow-y: hidden</code>.<br>
|
|
<i>In short: <b>Vertical scrolling is NOT possible and the content is clipped.</b></i>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"scroll"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
If the y-axis has an overflow, the viewport becomes <code class="code-inline css">overflow-y: scroll</code>.<br>
|
|
<i>In short: <b>Vertical scrolling is possible and the content is clipped.</b></i>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"visible-hidden"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
If the y-axis has an overflow, the viewport becomes <code class="code-inline css">overflow-y: visible</code>.
|
|
If the x-axis has an overflow and the overflow behavior of the x-axis is "hidden" or "scroll", the viewport becomes <code class="code-inline css">overflow-y: hidden</code>.<br>
|
|
<i>In short: <b>The content is not clipped, but if the x-axis has a overflow the content is clipped and vertical scrolling is NOT possible.</b></i>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"visible-scroll"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
If the y-axis has an overflow, the viewport becomes <code class="code-inline css">overflow-y: visible</code>.
|
|
If the x-axis has an overflow and the overflow behavior of the x-axis is "hidden" or "scroll", the viewport becomes <code class="code-inline css">overflow-y: scroll</code>.<br>
|
|
<i>In short: <b>The content is not clipped, but if the x-axis has an overflow the content is clipped and vertical scrolling is possible.</b></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p>}</p>
|
|
</div>
|
|
|
|
<div class="options-object">
|
|
<p>scrollbars : {</p>
|
|
<p>Defines the behavior of the custom scrollbars.</p>
|
|
<table class="options-table">
|
|
<thead>
|
|
<tr>
|
|
<td>Option Name</td>
|
|
<td>Type(s)</td>
|
|
<td>Valid values</td>
|
|
<td>Default Value</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>visibility</td>
|
|
<td>string</td>
|
|
<td>
|
|
<p><code class="code-inline js">[ "visible", "hidden", "auto" ]</code></p>
|
|
<p>shorthand: <code class="code-inline js">[ "v", "h", "a" ]</code></p>
|
|
</td>
|
|
<td>"auto"</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
The basic visibility of the scrollbars.
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"visible"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
The scrollbars are always visible, regardless of whether the appropriate axis has an overflow.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"hidden"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
The scrollbars are never visible, regardless of whether the appropriate axis has an overflow.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"auto"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
The scrollbars are only visible if the appropriate axis has an overflow.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>autoHide</td>
|
|
<td>string</td>
|
|
<td>
|
|
<p><code class="code-inline js">[ "never", "scroll", "leave", "move" ]</code></p>
|
|
<p>shorthand: <code class="code-inline js">[ "n", "s", "l", "m" ]</code></p>
|
|
</td>
|
|
<td>"never"</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
The possibility to hide visible scrollbars automatically after a certain action.
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"never"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
The scrollbars never get hidden automatically.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"scroll"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
The scrollbars get hidden automatically after a scroll.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"leave"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
The scrollbars get hidden automatically after the mouse has left the host-element.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"move"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
The scrollbars get hidden automatically after a scroll and after the mouse has stopped moving. <code class="code-inline">added in v1.4.0</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>autoHideDelay</td>
|
|
<td>number</td>
|
|
<td>-</td>
|
|
<td>800</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
The delay in milliseconds before the scrollbars get hidden automatically.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>dragScrolling</td>
|
|
<td>boolean</td>
|
|
<td>-</td>
|
|
<td>true</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
Defines whether the scrollbar-handle supports drag scrolling.<br>
|
|
If set to true, it's possible to drag the scrollbar-handle to change the scroll-offset.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>clickScrolling</td>
|
|
<td>boolean</td>
|
|
<td>-</td>
|
|
<td>false</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
Defines whether the scrollbar-track supports click scrolling.<br>
|
|
If set to true, it's possible to click on the scrollbar-track to change the scroll-offset.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>touchSupport</td>
|
|
<td>boolean</td>
|
|
<td>-</td>
|
|
<td>true</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
Indicates whether the scrollbar reacts to touch events.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>snapHandle</td>
|
|
<td>boolean</td>
|
|
<td>-</td>
|
|
<td>false</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
<code class="code-inline">added in v1.7.0</code><br>
|
|
Indicates whether the scrollbar handle-offset shall be snapped or not.<br><br>
|
|
|
|
This option is only interesting if you use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type" target="_blank" rel="noopener" class="inline-btn">CSS Scroll snapping</a>.<br>
|
|
Some browsers, like Google Chrome, will snap the scrollbar handle to the next possible position.
|
|
By default the unsnapped (normal) handleOffset will be used, but you can change this behavior with this option.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p>}</p>
|
|
</div>
|
|
|
|
<div class="options-object">
|
|
<p>textarea : {</p>
|
|
<p>Defines special behavior of textarea elements.</p>
|
|
<table class="options-table">
|
|
<thead>
|
|
<tr>
|
|
<td>Option Name</td>
|
|
<td>Type(s)</td>
|
|
<td>Valid values</td>
|
|
<td>Default Value</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>dynWidth</td>
|
|
<td>boolean</td>
|
|
<td>-</td>
|
|
<td>false</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
Indiactes whether the textarea width will be dynamic (content dependent).<br><br>
|
|
This effect will only take place if the <code class="code-inline js">sizeAutoCapable</code> option is true and the textarea has the HTML attribute <code class="code-inline js">wrap="off"</code> applied.<br>
|
|
Also the host-elements CSS must be <code class="code-inline css">width: auto</code> in combination with <code class="code-inline css">float: left</code> or <code class="code-inline css">float: right</code>.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>dynHeight</td>
|
|
<td>boolean</td>
|
|
<td>-</td>
|
|
<td>false</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
Indiactes whether the textarea height will be dynamic (content dependent).<br><br>
|
|
This effect will only take place if the <code class="code-inline js">sizeAutoCapable</code> option is true and the host-element has the CSS rule <code class="code-inline css">height: auto</code> applied.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>inheritedAttrs</td>
|
|
<td>string / array / null</td>
|
|
<td>-</td>
|
|
<td>["style", "class"]</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
<code class="code-inline">added in v1.6.0</code><br>
|
|
You can pass a array of strings which represents attribute names: <code class="code-inline js">["style", "class"]</code><br>
|
|
or a string where you separate multiple attributes with a whitespace: <code class="code-inline js">"style class"</code><br>
|
|
or <code class="code-inline js">null</code> which represents a empty array, a empty string or simply no attributes.<br>
|
|
<br>
|
|
<b>During initialization:</b> Attributes which the generated host-element shall inherit from from the target textarea-element.<br>
|
|
<b>During destruction:</b> Attributes which the target textarea-element shall inherit from from the generated host-element.<br>
|
|
<br>
|
|
This option was created to increase the control over the styling of textarea instances, but you can use it for any kind of attributes.<br>
|
|
<br>
|
|
Let's say you initialize the plugin to: <code class="code-inline html"><textarea class="foo bar" style="background: red;"></textarea></code>
|
|
and the inheritedAttrs are <code class="code-inline js">["style", "class"]</code>. Then the resulting generated DOM structure will look like this:
|
|
<pre><code class="html code-noscroll"><!-- the host-element -->
|
|
<div class="foo bar os-host-textarea ..." style="background: red;">
|
|
<!-- ... -->
|
|
<textarea class="foo bar" style="background: red;"></textarea>
|
|
<!-- ... -->
|
|
</div></code></pre>
|
|
|
|
If the inheritedAttrs would be <code class="code-inline js">null</code> then the host-element wouldn't have the style and the class attributes of the textarea element.
|
|
This was the default behavior before this option was introduced.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p>}</p>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="options-object">
|
|
<p>callbacks : {</p>
|
|
<p>Callbacks for specific events.</p>
|
|
<p>The "this" context of every callback is the current instance of the plugin.</p>
|
|
<table class="options-table">
|
|
<thead>
|
|
<tr>
|
|
<td>Option Name</td>
|
|
<td>Type(s)</td>
|
|
<td>Valid values</td>
|
|
<td>Default Value</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>onInitialized</td>
|
|
<td>function / null</td>
|
|
<td> - </td>
|
|
<td>null</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
Gets fired after the plugin was initialized. It takes no arguments.
|
|
<br>
|
|
<code class="code-inline js">onInitialized : function() { }</code>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>onInitializationWithdrawn</td>
|
|
<td>function / null</td>
|
|
<td> - </td>
|
|
<td>null</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
Gets fired after the initialization of the plugin was aborted due to the option: <code class="code-inline js">nativeScrollbarsOverlaid : { initialize : false }</code>. It takes no arguments.
|
|
<br>
|
|
<code class="code-inline js">onInitializationWithdrawn : function() { }</code>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>onDestroyed</td>
|
|
<td>function / null</td>
|
|
<td> - </td>
|
|
<td>null</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
Gets fired after the plugin was destryoed. It takes no arguments.
|
|
<br>
|
|
<code class="code-inline js">onDestroyed : function() { }</code>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>onScrollStart</td>
|
|
<td>function / null</td>
|
|
<td> - </td>
|
|
<td>null</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
Gets fired after the user starts scrolling. It takes one argument.
|
|
<br>
|
|
<code class="code-inline js">onScrollStart : function(eventArgs) { }</code>
|
|
<br>
|
|
The passed argument is the scroll argument which gets also passed to the "native" scroll callback. <a href="https://developer.mozilla.org/en-US/docs/Web/Events/scroll" target="_blank" rel="noopener" class="inline-btn">Read more about it</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>onScroll</td>
|
|
<td>function / null</td>
|
|
<td> - </td>
|
|
<td>null</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
Gets fired after every scroll. It takes one argument.
|
|
<br>
|
|
<code class="code-inline js">onScroll : function(eventArgs) { }</code>
|
|
<br>
|
|
The passed argument is the scroll argument which gets also passed to the "native" scroll callback. <a href="https://developer.mozilla.org/en-US/docs/Web/Events/scroll" target="_blank" rel="noopener" class="inline-btn">Read more about it</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>onScrollStop</td>
|
|
<td>function / null</td>
|
|
<td> - </td>
|
|
<td>null</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
Gets fired after the user stops scrolling. It takes one argument.
|
|
<br>
|
|
<code class="code-inline js">onScrollStop : function(eventArgs) { }</code>
|
|
<br>
|
|
The passed argument is the scroll argument which gets also passed to the "native" scroll callback. <a href="https://developer.mozilla.org/en-US/docs/Web/Events/scroll" target="_blank" rel="noopener" class="inline-btn">Read more about it</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>onOverflowChanged</td>
|
|
<td>function / null</td>
|
|
<td> - </td>
|
|
<td>null</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
Gets fired after the overflow has changed.<br>
|
|
Example: the content gets smaller and thus the overflow disappears.
|
|
It takes one argument.<br>
|
|
<code class="code-inline js">onOverflowChanged : function(eventArgs) { }</code><br>
|
|
|
|
<div class="expander-header" data-expander-key="onOverflowChangedEventArgs">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>eventArgs documentaton:</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="onOverflowChangedEventArgs">
|
|
Structure:
|
|
<pre><code class="json code-noscroll">eventArgs : {
|
|
x : <span class="txtc-secondary-color">boolean</span>,
|
|
y : <span class="txtc-secondary-color">boolean</span>,
|
|
xScrollable : <span class="txtc-secondary-color">boolean</span>,
|
|
yScrollable : <span class="txtc-secondary-color">boolean</span>,
|
|
clipped : <span class="txtc-secondary-color">boolean</span>
|
|
}</code></pre>
|
|
Description:
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
x
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether the x-axis has an overflow. This overflow must not be scrollable.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
y
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether the y-axis has an overflow. This overflow must not be scrollable.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
xScrollable
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether the x-axis is scrollable.<br>(To be scrollable the axis needs to have an overflow and a "scroll" / "visible-scroll" overflow behavior.)
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
yScrollable
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether the y-axis is scrollable.<br>(To be scrollable the axis needs to have an overflow and a "scroll" / "visible-scroll" overflow behavior.)<br>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
clipped
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether the content is clipped due to an overflow.<br>
|
|
(Thus it can be false even if <code class="code-inline js">contentClipAlways : true</code> is set.<br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>onOverflowAmountChanged</td>
|
|
<td>function / null</td>
|
|
<td> - </td>
|
|
<td>null</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
Gets fired after the overflow amount has changed.<br>
|
|
Example: the content gets a bit larger and thus the overflow amount is now higher.
|
|
It takes one argument.<br>
|
|
<code class="code-inline js">onOverflowAmountChanged : function(eventArgs) { }</code>
|
|
|
|
<div class="expander-header" data-expander-key="onOverflowAmountChangedEventArgs">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>eventArgs documentaton:</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="onOverflowAmountChangedEventArgs">
|
|
Structure:
|
|
<pre><code class="json code-noscroll">eventArgs : {
|
|
x : <span class="txtc-secondary-color">number</span>,
|
|
y : <span class="txtc-secondary-color">number</span>
|
|
}</code></pre>
|
|
Description:
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
x
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The overflow amount on the x-axis in pixels.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
y
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The overflow amount on the y-axis in pixels.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>onDirectionChanged</td>
|
|
<td>function / null</td>
|
|
<td> - </td>
|
|
<td>null</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
Gets fired after the direction has changed. It takes one argument.<br>
|
|
<code class="code-inline js">onDirectionChanged : function(eventArgs) { }</code>
|
|
|
|
<div class="expander-header" data-expander-key="onDirectionChangedEventArgs">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>eventArgs documentaton:</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="onDirectionChangedEventArgs">
|
|
Structure:
|
|
<pre><code class="json code-noscroll">eventArgs : {
|
|
isRTL : <span class="txtc-secondary-color">boolean</span>,
|
|
dir : <span class="txtc-secondary-color">string</span>
|
|
}</code></pre>
|
|
Description:
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
isRTL
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates if the new direction is RTL.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
dir
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The new direction as string. ("ltr" or "rtl")
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>onContentSizeChanged</td>
|
|
<td>function / null</td>
|
|
<td> - </td>
|
|
<td>null</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
Gets fired after the content size has changed. It takes one argument.<br>
|
|
<code class="code-inline js">onContentSizeChanged : function(eventArgs) { }</code>
|
|
|
|
<div class="expander-header" data-expander-key="onContentSizeChangedEventArgs">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>eventArgs documentaton:</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="onContentSizeChangedEventArgs">
|
|
Structure:
|
|
<pre><code class="json code-noscroll">eventArgs : {
|
|
width : <span class="txtc-secondary-color">number</span>,
|
|
height : <span class="txtc-secondary-color">number</span>
|
|
}</code></pre>
|
|
Description:
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
width
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The content width in pixels.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
height
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The content height in pixels.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>onHostSizeChanged</td>
|
|
<td>function / null</td>
|
|
<td> - </td>
|
|
<td>null</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
Gets fired after the host size or host padding has changed. It takes one argument.<br>
|
|
<code class="code-inline js">onHostSizeChanged : function(eventArgs) { }</code>
|
|
|
|
<div class="expander-header" data-expander-key="onHostSizeChangedEventArgs">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>eventArgs documentaton:</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="onHostSizeChangedEventArgs">
|
|
Structure:
|
|
<pre><code class="json code-noscroll">eventArgs : {
|
|
width : <span class="txtc-secondary-color">number</span>,
|
|
height : <span class="txtc-secondary-color">number</span>
|
|
}</code></pre>
|
|
Description:
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
width
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The host-element width in pixels.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
height
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The host-element height in pixels.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>onUpdated</td>
|
|
<td>function / null</td>
|
|
<td> - </td>
|
|
<td>null</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4">
|
|
<div>
|
|
Gets fired after the host size has changed. It takes one argument.<br>
|
|
<code class="code-inline js">onUpdated : function(eventArgs) { }</code>
|
|
|
|
<div class="expander-header" data-expander-key="onUpdatedEventArgs">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>eventArgs documentaton:</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="onUpdatedEventArgs">
|
|
Structure:
|
|
<pre><code class="json code-noscroll">eventArgs : {
|
|
forced : <span class="txtc-secondary-color">boolean</span>
|
|
}</code></pre>
|
|
Description:
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
forced
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether the update was forced due to the "force" parameter in the <a class="inline-btn" data-navigation="[1]method-update">update</a> method.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p>}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="basics-specialelements" data-tab-value="basics-supportedelements">
|
|
<div class="content-navigation-main-caption">Supported Elements</div>
|
|
<div class="content-navigation-sub-caption">General</div>
|
|
Basically the plugin can be initialized to any DOM element which can contain DOM elements and supports scrolling.<br>
|
|
However, <code class="code-inline css">display : inline</code> elements does not support scrolling at all. If you initialize the plugin to a inline element, the plugin will not work crrectly, and the element dimensions will be wrong aswell.
|
|
After you changed the display property to something else, it will work correctly again.
|
|
<br>
|
|
<br>
|
|
The plugin was tested with the following display values:
|
|
<code class="css">display : block;<br>
|
|
display : inline-block;
|
|
</code>
|
|
Since you can wrap any element which has one of those values, they should suit for every application.<br>
|
|
|
|
<div class="content-navigation-sub-caption">Body element</div>
|
|
The body element is not really special, because it supports all criteria, but there is a case which is different on this element.<br>
|
|
Without the plugin initialized the scroll viewport of your whole content is the window. But after the initialization of the plugin, the body element itself becomes new scroll viewport of your whole content.<br>
|
|
<br>
|
|
That means, if you want to specify a <code class="code-inline css">min-height</code> or <code class="code-inline css">min-width</code> for your content, you have to do it with this two selectors:
|
|
<pre><code class="css">body.os-host > .os-padding > .os-viewport > .os-content,
|
|
body.os-host > .os-padding > .os-viewport > .os-content-arrange {
|
|
min-width : 800px;
|
|
min-height : 600px;
|
|
}
|
|
</code></pre>
|
|
Please use always both selectors and not just one.<br>
|
|
<br>
|
|
You could also specify a <code class="code-inline css">min-height</code> or <code class="code-inline css">min-width</code> directly for the body element, but that wouldn't make any sense, since you want the body element to be always as big as the window, to simulate a correct viewport. Besides that, the plugin style overrides your body min size(s) to 0 if the plugin is applied to the body element.
|
|
|
|
<div class="content-navigation-sub-caption">Textarea elements</div>
|
|
Textarea elements are special. Although they can't contain any DOM elements, the plugin has extended support for them.<br>
|
|
<b>Your textarea element will be wrapped inside a generated element</b>, please read the <a class="inline-btn" data-navigation="[1]domelements">DOM Elements</a> section for more information.<br>
|
|
<div class="txtbox txtbox-yellow">
|
|
<i class="mdi mdi-information-outline"></i>
|
|
<span>
|
|
Because of this wrapping <b>you might have to redefine the styles of your textarea element</b>.<br>
|
|
The plugin offers the basic selector <code class="code-inline css">.os-host-textarea</code>, every textarea-host-element has this class applied.<br>
|
|
<b>For individual styling</b> use the <code class="code-inline js">inheritedAttrs</code> or <code class="code-inline js">className</code> options, to give your textarea individual classes or styles.<br>
|
|
</span>
|
|
</div>
|
|
|
|
<b>After the plugin is applied to your textarea, the textarea is capable of dynamic height and dynamic width.</b><br>
|
|
Dynamic height can be achieved if the option <code class="code-inline js">textarea.dynHeight</code> is set to true, then the host-element must have the css property <code class="code-inline css">height: auto</code> set.<br><br>
|
|
Dynamic width can be achieved if the option <code class="code-inline js">textarea.dynWidth</code> is set to true, then the host-element must have the css properties <code class="code-inline css">width: auto</code> & <code class="code-inline css">float: left</code> set, additionally your textarea element must have the html attribute <code class="code-inline html">wrap="auto"</code> applied, to disable the autowrapping.<br>
|
|
<br>
|
|
Use the <a class="inline-btn" data-navigation="demos/textarea">textarea demo</a> to test dynamic sized textareas.
|
|
|
|
<div class="content-navigation-sub-caption">Unsupported elements</div>
|
|
Unsupported are the following elements:<br><br>
|
|
<code class="html">
|
|
img, video, audio, input, embed, object, canvas, button, datalist, fieldset, label, legend, meter, optgroup, option, output, progress, select, [... and maybe more]
|
|
</code>
|
|
<br>
|
|
If you need support for a yet unsupported element, please open a issue on <a href="https://github.com/KingSora/OverlayScrollbars/issues" target="_blank" rel="noopener" class="inline-btn">github</a>.
|
|
</div>
|
|
|
|
<div id="basics-flexbox" data-tab-value="basics-flexbox">
|
|
<div class="content-navigation-main-caption">Flexbox</div>
|
|
<div class="content-navigation-sub-caption">General</div>
|
|
The plugin was built to be used on "normal" elements, however flexbox is a popular and accepted standard.<br>
|
|
Currently I haven't managed to create a automatic and reliable flexbox detection, so you have to take action by yourself:<br><br>
|
|
|
|
<div class="expander-header" data-expander-key="flexbox-new">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>OverlayScrollbars <code class="code-inline">v1.5.0 or higher</code></span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="flexbox-new">
|
|
Append the class <code class="code-inline">os-host-flexbox</code> to your target element.
|
|
</div>
|
|
|
|
<div class="expander-header" data-expander-key="flexbox-old">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>OverlayScrollbars <code class="code-inline">lower than v1.5.0</code></span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="flexbox-old">
|
|
Try to initialize the plugin with the option <code class="code-inline js">sizeAutoCapable : false</code> and set the overflow style of the target element to <code class="code-inline css">overflow: hidden</code>.<br>
|
|
</div>
|
|
<br>
|
|
|
|
In the most cases this should be enough.<br><br>
|
|
However if the plugin isn't updating correctly or if the plugin isn't working at all, I can only recommend to use / create a <b>inner-div</b> with the style <code class="code-inline css">display: block; height: 100%; width: 100%;</code> and initialize to plugin to that inner-div. With this setup the plugin will definitely work.<br>
|
|
<br>
|
|
|
|
If you need help with a special flexbox case, please open a issue on <a href="https://github.com/KingSora/OverlayScrollbars/issues" target="_blank" rel="noopener" class="inline-btn">github</a> with a small demo.<br>
|
|
I'll do my best to solve your problem.
|
|
</div>
|
|
|
|
<div id="initialization-default" data-tab-value="initialization-default">
|
|
<div class="content-navigation-main-caption">Default initialization</div>
|
|
<div class="content-navigation-sub-caption">Single element</div>
|
|
<b>The initialization</b> of the plugin for a cerain element is very easy:
|
|
<div class="txtbox txtbox-blue">
|
|
<i class="mdi mdi-alert-circle-outline"></i>
|
|
<span>In order to initialize the plugin, you have to pass at least a empty object as second argument.</span>
|
|
</div>
|
|
<pre><code class="js">//initializes the plugin to a single element and returns its instance
|
|
var instance = OverlayScrollbars(document.getElementById(id), { /* your options */ });
|
|
</code></pre>
|
|
The first argument is the element or the elements to which the plugin shall be initialized.
|
|
The second argument represents the options with which the plugin shall be initialized.<br>
|
|
If you initialize the plugin to a single element, this method will return the instance of the plugin.<br><br>
|
|
|
|
You can get the <b>current instance</b> with the same method.
|
|
<div class="txtbox txtbox-blue">
|
|
<i class="mdi mdi-alert-circle-outline"></i>
|
|
<span>If you don't pass a object as second argument, the method returns the instance.</span>
|
|
</div>
|
|
|
|
<pre><code class="js">//returns the plugin instance or undefined if the element has no instance
|
|
var instance = OverlayScrollbars(document.getElementById(id));
|
|
</code></pre><br>
|
|
If you have initialized the plugin and try to initialize it again, it will be handled as if you call the options method:
|
|
<pre><code class="js"> //initializes plugin
|
|
OverlayScrollbars(document.getElementById(id), { });
|
|
|
|
//... later
|
|
//is the same as .options({ resize : "both" }) because the plugin is initialized already
|
|
OverlayScrollbars(document.getElementById(id), { resize : "both" });
|
|
</code></pre>
|
|
|
|
<div class="content-navigation-sub-caption">Multiple elements</div>
|
|
The <b>initialization for multiple elements</b> works like the initialization for a single element. The only difference is, that the initialization method will return a array of instances.
|
|
<pre><code class="js">//initialize plugin with custom options on all div elements and return all instances as array
|
|
var instances = OverlayScrollbars(document.querySelectorAll("div"), { });
|
|
</code></pre>
|
|
<br>
|
|
If you need the <b>instances of multiple element</b> you can do it the same way as for a single element:
|
|
<pre><code class="js">//get the instance information of all elements on your page and store it into a variable
|
|
//the array can contain undefined entries
|
|
var instances = OverlayScrollbars(document.querySelectorAll("*"));
|
|
|
|
for(var i = 0; i < instances.length; i++) {
|
|
//check for validity
|
|
if(instances[i] !== undefined) {
|
|
//do domething with the instance
|
|
}
|
|
}
|
|
</code></pre>
|
|
I've built-in a filtering possibility, if you want an array only with not undefined instances:
|
|
<div class="txtbox txtbox-yellow">
|
|
<i class="mdi mdi-information-outline"></i>
|
|
<span>This will only work if the first argument returns multiple HTML elements.</span>
|
|
</div>
|
|
<pre><code class="js">//returns an array with all instances which are not undefined
|
|
var instances = OverlayScrollbars(document.querySelectorAll("*"), "!");
|
|
|
|
for(var i = 0; i < instances.length; i++) {
|
|
//do something with the instance
|
|
}
|
|
</code></pre>
|
|
Since <code class="code-inline">v1.6.0</code> you can pass a custom filtering function.<br>
|
|
This function has to return a boolean and takes two arguments:<br>
|
|
The first argument is called <b>element</b>. This is the current <b>HTMLElement</b> which gets checked.<br>
|
|
The second argument is called <b>instance</b>. This is the <b>OverlayScrollbars instance</b> of the current element which gets checked.<br>
|
|
<pre><code class="js">//returns an array with all instances which are not undefined and applied to a div-tag-element
|
|
var instances = OverlayScrollbars(document.querySelectorAll("*"),
|
|
function(element, instance) {
|
|
return element.tagName === 'DIV' && instance !== undefined;
|
|
}
|
|
);
|
|
|
|
for(var i = 0; i < instances.length; i++) {
|
|
//do something with the instance
|
|
}
|
|
</code></pre>
|
|
|
|
<div class="content-navigation-sub-caption">Initialize with Extensions <code class="code-inline">added in v1.5.0</code></div>
|
|
The <b>initialization with extensions</b> provides a possibility to initialize your instance with one or multiple extensions.<br>
|
|
You simply have to pass a <b>third</b> argument which has to be a <b>string</b>, an <b>array of strings</b> or an <b>object</b>. This argument represents the extensions which shall be added right after the initialization is complete.<br>
|
|
<br>
|
|
Let's make some examples:
|
|
<pre><code class="js">//register a extension with the name "myExtension"
|
|
OverlayScrollbars.extension("myExtension", function() { return { }; });
|
|
//register a 2nd extension with the name "myOtherExtension"
|
|
OverlayScrollbars.extension("myOtherExtension", function() { return { }; });
|
|
|
|
//initialize the plugin with just one extension via string
|
|
OverlayScrollbars((document.getElementById(id), { }, "myExtension");
|
|
|
|
//initialize the plugin with multiple extensions via array of strings
|
|
OverlayScrollbars((document.getElementById(id), { }, [ "myExtension", "myOtherExtension" ]);
|
|
|
|
//initialize the plugin with extensions with custom options via object
|
|
OverlayScrollbars((document.getElementById(id), { }, {
|
|
"myExtension" : { /* options for "myExtension" */ },
|
|
"myOtherExtension" : { /* options for "myOtherExtension" */ },
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
|
|
|
|
<div id="initialization-jquery" data-tab-value="initialization-jquery">
|
|
<div class="content-navigation-main-caption">jQuery initialization</div>
|
|
<div class="content-navigation-sub-caption">Single element</div>
|
|
<b>The initialization</b> of the plugin for a certain element is very easy and it won't break the jQuery chain:
|
|
<div class="txtbox txtbox-blue">
|
|
<i class="mdi mdi-alert-circle-outline"></i>
|
|
<span>You have to pass at least an empty object in order to initialize the plugin.</span>
|
|
</div>
|
|
<pre><code class="js">//initializes the plugin with empty options
|
|
$(id).overlayScrollbars({ /* your options */ });
|
|
</code></pre>
|
|
The object which is passed to this method represents the options with which the plugin shall be initialized.<br><br>
|
|
|
|
You can get the <b>current instance</b> with the same method.
|
|
<div class="txtbox txtbox-blue">
|
|
<i class="mdi mdi-alert-circle-outline"></i>
|
|
<span>If you don't pass an object the method returns the instance.</span>
|
|
</div>
|
|
<pre><code class="js">//returns the plugin instance or undefined if the element has no instance
|
|
var instance = $(id).overlayScrollbars();
|
|
</code></pre><br>
|
|
Due to the fact that the initialization won't break the jQuery chain you can <b>initialize and store the instance</b> in just one line:
|
|
<pre><code class="js"> //initializes plugin and stores the instance into a variable
|
|
var instance = $(id).overlayScrollbars({ }).overlayScrollbars();
|
|
</code></pre>
|
|
<br>
|
|
If you have initialized the plugin and try to initialize it again, it will be handled as if you called the options method:
|
|
<pre><code class="js"> //initializes plugin
|
|
$(id).overlayScrollbars({ });
|
|
|
|
//... later
|
|
//is the same as .options({ resize : "both" }) because the plugin is initialized already
|
|
$(id).overlayScrollbars({ resize : "both" });
|
|
</code></pre>
|
|
|
|
<div class="content-navigation-sub-caption">Multiple elements</div>
|
|
The <b>initialization for multiple elements</b> works like the initialization for a single element. The only difference is, that the initialization method will return an array of instances.
|
|
<pre><code class="js">//initialize plugin with custom options on all div elements and return all instances as array
|
|
var instances = $("div").overlayScrollbars({ }).overlayScrollbars();
|
|
</code></pre>
|
|
<br>
|
|
If you need the <b>instances of multiple elements</b> you can do it the same way as for a single element:
|
|
<pre><code class="js">//get the instance information of all elements on your page and store it into a variable
|
|
//the array can contain undefined entries
|
|
var instances = $("*").overlayScrollbars();
|
|
|
|
$.each(instances, function(index, instance) {
|
|
//check for validity
|
|
if(instance !== undefined) {
|
|
//do domething with the instance
|
|
}
|
|
});
|
|
</code></pre>
|
|
I've built-in a filtering possibility, if you want an array only with not undefined instances:
|
|
<div class="txtbox txtbox-yellow">
|
|
<i class="mdi mdi-information-outline"></i>
|
|
<span>This will only work if the jQuery selectors targets more than one element.</span>
|
|
</div>
|
|
<pre><code class="js">//returns a array with all instances which are not undefined
|
|
var instances = $("*").overlayScrollbars("!");
|
|
|
|
$.each(instances, function(index, instance) {
|
|
//do domething with the instance
|
|
});
|
|
</code></pre>
|
|
Since <code class="code-inline">v1.6.0</code> you can pass a custom filtering function.<br>
|
|
This function has to return a boolean and takes two arguments:<br>
|
|
The first argument is called <b>element</b>. This is the current <b>HTMLElement</b> which gets checked.<br>
|
|
The second argument is called <b>instance</b>. This is the <b>OverlayScrollbars instance</b> of the current element which gets checked.<br>
|
|
<pre><code class="js">//returns a array with all instances which are not undefined and applied to a div-tag-element
|
|
var instances = $("*").overlayScrollbars(function(element, instance) {
|
|
return element.tagName === 'DIV' && instance !== undefined;
|
|
});
|
|
|
|
for(var i = 0; i < instances.length; i++) {
|
|
//do something with the instance
|
|
}
|
|
</code></pre>
|
|
|
|
<div class="content-navigation-sub-caption">Initialize with Extensions <code class="code-inline">added in v1.5.0</code></div>
|
|
The <b>initialization with extensions</b> provides a possibility to initialize your instance with one or multiple extensions.<br>
|
|
You simply have to pass a <b>second</b> argument which has to be a <b>string</b>, an <b>array of strings</b> or an <b>object</b>. This argument represents the extensions which shall be added right after the initialization is complete.<br>
|
|
<br>
|
|
Lets make some examples:
|
|
<pre><code class="js">//register a extension with the name "myExtension"
|
|
OverlayScrollbars.extension("myExtension", function() { return { }; });
|
|
//register a 2nd extension with the name "myOtherExtension"
|
|
OverlayScrollbars.extension("myOtherExtension", function() { return { }; });
|
|
|
|
//initialize the plugin with just one extension via string
|
|
$(id).overlayScrollbars({ }, "myExtension");
|
|
|
|
//initialize the plugin with multiple extensions via array of strings
|
|
$(id).overlayScrollbars({ }, [ "myExtension", "myOtherExtension" ]);
|
|
|
|
//initialize the plugin with extensions with custom options via object
|
|
$(id).overlayScrollbars({ }, {
|
|
"myExtension" : { /* options for "myExtension" */ },
|
|
"myOtherExtension" : { /* options for "myOtherExtension" */ },
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div id="instance-options" data-tab-value="instance-options">
|
|
<div class="content-navigation-main-caption">Options Method</div>
|
|
<div class="content-navigation-sub-caption">Description</div>
|
|
Returns or sets the options of the instance.
|
|
<div class="content-navigation-sub-caption">Signatures</div>
|
|
<div class="method-documentation-box">
|
|
<div class="method-documentation-box-signature">
|
|
.options()
|
|
</div>
|
|
<div class="method-documentation-box-description">
|
|
Returns the instance options.
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Returns:</span>
|
|
<div class="method-documentation-box-description-return">
|
|
<p>Type: PlainObject</p>
|
|
<p>
|
|
The current options of the instance.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="method-documentation-box">
|
|
<div class="method-documentation-box-signature">
|
|
.options(<span>optionName</span>)
|
|
</div>
|
|
<div class="method-documentation-box-description">
|
|
Returns the option value with the given name.
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Parameters:</span>
|
|
<div class="method-documentation-box-description-param">
|
|
<p>optionName</p>
|
|
<p>Type: string</p>
|
|
<div>
|
|
A string which represents the option whose value shall be returned.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Returns:</span>
|
|
<div class="method-documentation-box-description-return">
|
|
<p>Type: *</p>
|
|
<div>
|
|
The value of the options with the given name.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>examples:</span>
|
|
<pre><code class="js">var className = instance.options("className");
|
|
var visibility = instance.options("scrollbars.visibility");
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="method-documentation-box">
|
|
<div class="method-documentation-box-signature">
|
|
.options(<span>newOptions</span>)
|
|
</div>
|
|
<div class="method-documentation-box-description">
|
|
Sets the instance options via a plain object.
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Parameters:</span>
|
|
<div class="method-documentation-box-description-param">
|
|
<p>newOptions</p>
|
|
<p>Type: PlainObject</p>
|
|
<div>
|
|
A plain object which represents the new options.<br>
|
|
All option possibilities can be read in the <a class="inline-btn" data-navigation="[1]options">Options</a> section tab.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>examples:</span>
|
|
<pre><code class="js">instance.options({ className : null });
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="method-documentation-box">
|
|
<div class="method-documentation-box-signature">
|
|
.options(<span>optionName, optionValue</span>)
|
|
</div>
|
|
<div class="method-documentation-box-description">
|
|
Assigns the given value to the given option Name.
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Parameters:</span>
|
|
<div class="method-documentation-box-description-param">
|
|
<p>optionName</p>
|
|
<p>Type: string</p>
|
|
<div>
|
|
A string which represents the option that shall be assigned.
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-param">
|
|
<p>optionValue</p>
|
|
<p>Type: *</p>
|
|
<div>
|
|
The value which shall be assigned to the given options name.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>examples:</span>
|
|
<pre><code class="js">instance.options("contentClipAlways", true);
|
|
instance.options("overflowBehavior.y", "hidden");
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="instance-update" data-tab-value="instance-update">
|
|
<div class="content-navigation-main-caption">Update Method</div>
|
|
<div class="content-navigation-sub-caption">Description</div>
|
|
Updates the instance.<br>
|
|
Use this method to reset the "sleep" behavior of the <a class="inline-btn" data-navigation="[1]method-sleep">sleep</a> method or use it to update the instance manually.<br>
|
|
|
|
<div class="content-navigation-sub-caption">Signatures</div>
|
|
<div class="method-documentation-box">
|
|
<div class="method-documentation-box-signature">
|
|
.update(<span>[force]</span>)
|
|
</div>
|
|
<div class="method-documentation-box-description">
|
|
Updates the instance and resets the "sleep" behavior.
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Parameters:</span>
|
|
<div class="method-documentation-box-description-param">
|
|
<p>force</p>
|
|
<p>Type: boolean</p>
|
|
<div>
|
|
A optional parameter, the default value is false.<br>
|
|
<br>
|
|
If set to true, the plugin will be forced to do a complete update which is more expensive but guarantees a lackless update, else a normal update will be done where only necessary components are updated.<br><br>
|
|
Usually (99.9%) a normal update should be enough, but ideally you will call this method only to reset the sleep behavior and never to update it manually.<br><br>
|
|
<b>If you have to call this method to update the instance manually (because else the appearance is wrong) it could be a bug, in this case please open a issue on <a href="https://github.com/KingSora/OverlayScrollbars/issues" target="_blank" rel="noopener" class="inline-btn">github</a> with a small demo.</b>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>example:</span>
|
|
<pre><code class="js">//initialize the plugin and get its instance
|
|
var instance = OverlayScrollbars(document.getElementById(id), { });
|
|
|
|
//put the instance to sleep
|
|
instance.sleep();
|
|
|
|
//... later
|
|
//wake the instance up so it work properly again
|
|
instance.update();
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="instance-sleep" data-tab-value="instance-sleep">
|
|
<div class="content-navigation-main-caption">Sleep Method</div>
|
|
<div class="content-navigation-sub-caption">Description</div>
|
|
Disables every observation of the DOM and puts the instance to "sleep".<br>
|
|
It won't respond to any changes in the DOM and won't update. Scrollbars won't respond to mouse or touch events.<br>
|
|
Resizing isn't possible anymore.<br>
|
|
This behavior can be reset by calling the <a class="inline-btn" data-navigation="[1]method-update">update</a> method.<br>
|
|
<br>
|
|
Use this method before expensive DOM operations (such as animations) to make sure the plugin won't slow them down unnecessary.<br>
|
|
Dont forget to re-enable it after the operations via the update method.
|
|
|
|
<div class="content-navigation-sub-caption">Signatures</div>
|
|
<div class="method-documentation-box">
|
|
<div class="method-documentation-box-signature">
|
|
.sleep()
|
|
</div>
|
|
<div class="method-documentation-box-description">
|
|
Puts the instance to sleep. It won't respond to any changes in the DOM and won't update.
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>example:</span>
|
|
<pre><code class="js">//initialize the plugin and get its instance
|
|
var instance = OverlayScrollbars(document.getElementById(id), { });
|
|
|
|
//put the instance to sleep
|
|
instance.sleep();
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="instance-scroll" data-tab-value="instance-scroll">
|
|
<div class="content-navigation-main-caption">Scroll Method</div>
|
|
<div class="content-navigation-sub-caption">Description</div>
|
|
Returns the scroll information or sets the scroll position.
|
|
<div class="content-navigation-sub-caption">Signatures</div>
|
|
<div class="method-documentation-box">
|
|
<div class="method-documentation-box-signature">
|
|
.scroll()
|
|
</div>
|
|
<div class="method-documentation-box-description">
|
|
Returns the current scroll information.
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Returns:</span>
|
|
<div class="method-documentation-box-description-return">
|
|
<p>Type: PlainObject</p>
|
|
<div>
|
|
The current scroll information of the instance:
|
|
<div class="expander-header" data-expander-key="getScrollPlainObjectDocumentation">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>PlainObject documentaton:</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="getScrollPlainObjectDocumentation">
|
|
Structure:
|
|
<pre><code class="json">{
|
|
position : {
|
|
x : <span class="txtc-secondary-color">number</span>,
|
|
y : <span class="txtc-secondary-color">number</span>
|
|
},
|
|
ratio : {
|
|
x : <span class="txtc-secondary-color">number</span>,
|
|
y : <span class="txtc-secondary-color">number</span>
|
|
},
|
|
max : {
|
|
x : <span class="txtc-secondary-color">number</span>,
|
|
y : <span class="txtc-secondary-color">number</span>
|
|
},
|
|
handleOffset : {
|
|
x : <span class="txtc-secondary-color">number</span>,
|
|
y : <span class="txtc-secondary-color">number</span>
|
|
},
|
|
handleLength : {
|
|
x : <span class="txtc-secondary-color">number</span>,
|
|
y : <span class="txtc-secondary-color">number</span>
|
|
},
|
|
handleLengthRatio : {
|
|
x : <span class="txtc-secondary-color">number</span>,
|
|
y : <span class="txtc-secondary-color">number</span>
|
|
},
|
|
trackLength : {
|
|
x : <span class="txtc-secondary-color">number</span>,
|
|
y : <span class="txtc-secondary-color">number</span>
|
|
},
|
|
snappedHandleOffset : {
|
|
x : <span class="txtc-secondary-color">number</span>,
|
|
y : <span class="txtc-secondary-color">number</span>
|
|
},
|
|
isRTL : <span class="txtc-secondary-color">boolean</span>,
|
|
isRTLNormalized : <span class="txtc-secondary-color">boolean</span>
|
|
}</code></pre>
|
|
Description:
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
position.x
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The current x-axis scroll position in pixels. (scrollLeft equivalent)
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
position.y
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The current y-axis scroll position in pixels. (scrollTop equivalent)
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
ratio.x
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The current x-axis scroll position in percent. (Number between 0 and 1)
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
ratio.y
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The current y-axis scroll position in percent. (Number between 0 and 1)
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
max.x
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The max scroll position of the x-axis in pixels.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
max.y
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The max scroll position of the y-axis in pixels.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
handleOffset.x
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The handle offset of the horizontal scrollbar in pixels.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
handleOffset.y
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The handle offset of the vertical scrollbar in pixel.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
handleLength.x
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The handle length of the horizontal scrollbar in pixel.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
handleLength.y
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The handle length of the vertical scrollbar in pixel.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
handleLengthRatio.x
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The handle length of the horizontal scrollbar in percent. (Number between 0 and 1)
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
handleLengthRatio.y
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The handle length of the vertical scrollbar in percent. (Number between 0 and 1)
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
trackLength.x
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The track length of the horizontal scrollbar in pixels.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
trackLength.y
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The track length of the vertical scrollbar in pixels.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
snappedHandleOffset.x
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
<code class="code-inline">added in v1.7.0</code> The snapped handle offset of the horizontal scrollbar in pixels.<br>
|
|
If you use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type" target="_blank" rel="noopener" class="inline-btn">CSS Scroll snapping</a> some browsers, like Google Chrome, will snap the scrollbar handle to the next possible position.
|
|
By default the unsnapped (normal) handleOffset will be used, but you can change this behavior with the <code class="code-inline js hljs javascript">scrollbars.snapHandle</code> option.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
snappedHandleOffset.y
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
<code class="code-inline">added in v1.7.0</code> The snapped handle offset of the vertical scrollbar in pixels.<br>
|
|
If you use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type" target="_blank" rel="noopener" class="inline-btn">CSS Scroll snapping</a> some browsers, like Google Chrome, will snap the scrollbar handle to the next possible position.
|
|
By default the unsnapped (normal) handleOffset will be used, but you can change this behavior with the <code class="code-inline js hljs javascript">scrollbars.snapHandle</code> option.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
isRTL
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether the values are rtl values.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
isRTLNormalized
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether rtl values are normalized.
|
|
</div>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="deprecatedScrollReturn">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span><code class="code-inline">deprecated since v1.6.0 & removed since v1.7.0</code></span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="deprecatedScrollReturn">
|
|
Structure:
|
|
<pre><code class="json">{
|
|
x : {
|
|
position : <span class="txtc-secondary-color">number</span>,
|
|
ratio : <span class="txtc-secondary-color">number</span>,
|
|
max : <span class="txtc-secondary-color">number</span>,
|
|
handleOffset : <span class="txtc-secondary-color">number</span>,
|
|
handleLength : <span class="txtc-secondary-color">number</span>,
|
|
handleLengthRatio : <span class="txtc-secondary-color">number</span>,
|
|
trackLength : <span class="txtc-secondary-color">number</span>,
|
|
isRTL : <span class="txtc-secondary-color">boolean</span>
|
|
isRTLNormalized : <span class="txtc-secondary-color">boolean</span>
|
|
},
|
|
y : {
|
|
position : <span class="txtc-secondary-color">number</span>,
|
|
ratio : <span class="txtc-secondary-color">number</span>,
|
|
max : <span class="txtc-secondary-color">number</span>,
|
|
handleOffset : <span class="txtc-secondary-color">number</span>,
|
|
handleLength : <span class="txtc-secondary-color">number</span>,
|
|
handleLengthRatio : <span class="txtc-secondary-color">number</span>,
|
|
trackLength : <span class="txtc-secondary-color">number</span>
|
|
}
|
|
}</code></pre>
|
|
Description:
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
x.position
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The current x-axis scroll position in pixels. (scrollLeft equivalent)
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
x.ratio
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The current x-axis scroll position in percent. (Number between 0 and 1)
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
x.max
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The max scroll position of the x-axis in pixels.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
x.handleOffset
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The handle offset of the horizontal scrollbar in pixels.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
x.handleLength
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The handle length of the horizontal scrollbar in pixels.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
x.handleLengthRatio
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The handle length of the horizontal scrollbar in percent. (Number between 0 and 1)
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
x.trackLength
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The track length of the horizontal scrollbar in pixels.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
x.isRTL
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether the values are rtl values.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
x.isRTLNormalized
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether rtl values are normalized.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
y.position
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The current y-axis scroll position in pixels. (scrollTop equivalent)
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
y.ratio
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The current y-axis scroll position in percent. (Number between 0 and 1)
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
y.max
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The max scroll position of the y-axis in pixel.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
y.handleOffset
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The handle offset of the vertical scrollbar in pixels.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
y.handleLength
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The handle length of the vertical scrollbar in pixels.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
y.handleLengthRatio
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The handle length of the vertical scrollbar in percent. (Number between 0 and 1)
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
y.trackLength
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The track length of the vertical scrollbar in pixels.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="method-documentation-box">
|
|
<div class="method-documentation-box-signature">
|
|
.scroll(<span>coordinates [, duration] [, easing] [, complete]</span>)
|
|
</div>
|
|
<div class="method-documentation-box-description">
|
|
Sets the scroll position.
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Parameters:</span>
|
|
<div class="method-documentation-box-description-param">
|
|
<p>coordinates</p>
|
|
<p>Type: *</p>
|
|
<div>
|
|
The coordinates describes the new scroll position.<br>
|
|
Coordinates contain the position value(s) for the x- and y-axis.<br>
|
|
<br>
|
|
A position value can be a number or a string.<br>
|
|
If you specify your position as a string, you have the following possibilities:
|
|
<div class="expander-header" data-expander-key="setScrollPositionOperators">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>Position operators:</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="setScrollPositionOperators">
|
|
A position can have one operator in front.<br>
|
|
The following operators are supported:
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"+="
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
The position value will be added to the current scroll-offset.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"-="
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
The position value will be subtracted from the current scroll-offset.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"*="
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
The current scroll-offset will be multiplicated by the position value.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"/="
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
The current scroll-offset will be divided by the position value.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="setScrollPositionUnits">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>Position units:</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="setScrollPositionUnits">
|
|
Each number can be followed by a unit.<br>
|
|
The following units are supported:
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"px"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
Same as no unit.<br>
|
|
value = (value * 1)
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"%"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
The value is dependent on the current scroll value.<br>
|
|
value = ((currentScrollOffset / 100) * value)
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"vw"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
The value is multiplied by the viewport-width of the host-element.<br>
|
|
value = (value * viewportWidth)
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"vh"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
The value is multiplied by the viewport-height of the host-element.<br>
|
|
value = (value * viewportHeight)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="setScrollPositionCalculation">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>Examples</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="setScrollPositionCalculation">
|
|
It's also possible to calculate a position.<br>
|
|
Here are a few examples:
|
|
|
|
<pre><code class="js">//scrolls the y-axis to 100% -> to the bottom.
|
|
instance.scroll({ y : "100%" });
|
|
|
|
//scrolls the y-axis to 50%. You could write 50% directly, but I want to demonstrate the calculation possibility.
|
|
instance.scroll({ y : "100% / 2" });
|
|
|
|
//calculates the final result and then adds it to the current y-axis scroll-offset.
|
|
instance.scroll({ y : "+= 10% - 25" });
|
|
|
|
//subtracts 50 pixel from the currext y-axis scroll-offset.
|
|
instance.scroll({ y : "-= 50px" });
|
|
</code></pre>
|
|
</div>
|
|
<br>
|
|
Coordinates can be specified in different ways. Here is a overview of all possibilities.<br>
|
|
<div class="expander-header" data-expander-key="setScrollCoordinates1">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>A PlainObject which contains the new scroll position:</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="setScrollCoordinates1">
|
|
The PlainObject describes the coordinates.
|
|
<code class="js">
|
|
instance.scroll({ x : <span class="txtc-secondary-color">position</span>, y : <span class="txtc-secondary-color">position</span> });<br>
|
|
//or<br>
|
|
instance.scroll({ l : <span class="txtc-secondary-color">position</span>, t : <span class="txtc-secondary-color">position</span> });<br>
|
|
//or<br>
|
|
instance.scroll({ left : <span class="txtc-secondary-color">position</span>, top : <span class="txtc-secondary-color">position</span> });<br>
|
|
</code>
|
|
</div>
|
|
|
|
<div class="expander-header" data-expander-key="setScrollCoordinates2">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>A array which contains the new scroll position:</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="setScrollCoordinates2">
|
|
The array describes the coordinates. The first value stands for the x-axis and the second value stands for the y-axis.
|
|
<code class="js">
|
|
//[ x, y ]<br>
|
|
instance.scroll([ <span class="txtc-secondary-color">position</span>, <span class="txtc-secondary-color">position</span> ]);<br>
|
|
</code>
|
|
</div>
|
|
|
|
<div class="expander-header" data-expander-key="setScrollCoordinates3">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>A position which affects both axis:</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="setScrollCoordinates3">
|
|
The position value describes the coordinates for both axis.
|
|
<code class="js">
|
|
instance.scroll(<span class="txtc-secondary-color">position</span>);<br>
|
|
</code>
|
|
</div>
|
|
|
|
<div class="expander-header" data-expander-key="setScrollCoordinates4">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>A HTML or jQuery Element:</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="setScrollCoordinates4">
|
|
The top offset of the element stands for the y-axis scroll value and the left offset of the element stand for the x-axis scroll value.
|
|
<code class="js">
|
|
instance.scroll($(selector));<br>
|
|
//or<br>
|
|
instance.scroll(document.getElementById("id"));<br>
|
|
</code>
|
|
</div>
|
|
|
|
<div class="expander-header" data-expander-key="setScrollCoordinates5">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>A HTML or jQuery Element with additional settings:</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="setScrollCoordinates5">
|
|
To use this approach a PlainObject with the following structure must be passed:
|
|
<pre><code class="json code-noscroll">{
|
|
el : <span class="txtc-secondary-color">HTMLElement | jQueryElement</span>,
|
|
scroll : <span class="txtc-secondary-color">string | array | object</span>,
|
|
block : <span class="txtc-secondary-color">string | array | object</span>,
|
|
margin : <span class="txtc-secondary-color">number | boolean | array | object</span>
|
|
}</code></pre>
|
|
PlainObject description:
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
el
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The HTML or jQuery Element which shall describe the coordinates.<br>
|
|
<u>MUST</u> be specified or else this object isn't valid and this approach won't work.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
scroll <code class="code-inline">added in v1.5.0</code>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The scroll behavior which shall be used. The Default value is <span class="txtc-primary-color">"always"</span>.<br>
|
|
Possible values are:
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"always"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
Scrolls always.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"ifneeded"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
Scrolls only if the element isn't fully in view.<br>Implemented in order to support: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded" target="_blank" rel="noopener" class="inline-btn">Element.scrollIntoViewIfNeeded()</a>.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"never"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
Scrolls never.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
array
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
With this array you are able to specify the scroll strategy for each axis individually.<br>
|
|
A example: <code class="js code-inline">[ "never", "always" ]</code> -
|
|
with this array a scroll will be performed only on the y-axis.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
object
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
The passed object specifies the scroll strategy for each axis with its properties <code class="js code-inline">x</code> and <code class="js code-inline">y</code>.
|
|
If your object doesn't specify a value for a axis, it's treated as if the value was <code class="js code-inline">always</code>.<br>
|
|
A example object would look like: <code class="js code-inline">{ x : "never" }</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
block
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The edge which shall be docked to the viewport. The Default value is <span class="txtc-primary-color">"begin"</span>.<br>
|
|
Possible values are:
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"begin"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
Both axis shall be docked to the "begin" edge. - The element will be docked to the top and left edge of the viewport.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"end"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
Both axis shall be docked to the "end" edge. - The element will be docked to the bottom and right edge of the viewport. (If direction is RTL to the bottom and left edge.)
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"center"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
The element gets centered horizontally and vertically.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"nearest"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
The element gets docked to the nearest edge(s).
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
array
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
With this array you are able to specify the edge for each axis individually.<br>
|
|
If the direction is RTL, the x-axis values are inverted ("begin" = dock to right, "end" = dock to left).<br>
|
|
A example: <code class="js code-inline">[ "begin", "end" ]</code> -
|
|
with this array the element will be docked to the left and bottom edge of the viewport.<br>
|
|
A second example: <code class="js code-inline">[ "center", "begin" ]</code> -
|
|
with this array the element will be docked to the top edge of the viewport and is centered horizontally.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
object
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
<code class="code-inline">added in v1.5.0</code><br>
|
|
The passed object specifies the block for each axis with its properties <code class="js code-inline">x</code> and <code class="js code-inline">y</code>.
|
|
If your object doesn't specify a value for an axis, it's treated as if the value was <code class="js code-inline">begin</code>.<br>
|
|
A example object would look like: <code class="js code-inline">{ y : "center" }</code>
|
|
</div>
|
|
</div>
|
|
<!--
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
boolean
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
<code class="code-inline">added in v1.5.1</code><br>
|
|
The passed boolean is a shortcut which corresponds exactly to the boolean parameter of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView" target="_blank" rel="noopener" class="inline-btn">Element.scrollIntoView()</a> method.<br>
|
|
<code class="code-inline">true</code> corresponds to the array <code class="code-inline">[ "nearest", "begin" ]</code>.<br>
|
|
<code class="code-inline">false</code> corresponds to the array <code class="code-inline">[ "nearest", "end" ]</code>.<br>
|
|
</div>
|
|
</div>
|
|
-->
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
margin
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The margin which shall be used. The Default value is <span class="txtc-primary-color">false</span>.<br>
|
|
The original CSS margin won't be affected.<br>
|
|
Possible values are:
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
true
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
The true CSS margin of the element will be used.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
false
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
No margin will be used, even if the element has CSS margin.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
number
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
The specified number will be used as margin for all directions.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
array
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
The passed array can have the size of two or the size of four.<br>
|
|
A array with two entries specifies the margin for the left&right and top&bottom directions:<br>
|
|
<code class="js code-inline">[ left&right, top&bottom ]</code>
|
|
<br>
|
|
A array with four entries specifies the margin for all directions:<br>
|
|
<code class="js code-inline">[ top, right, bottom, left ]</code>
|
|
The array can consist of numbers or booleans or a mix.<br>
|
|
A example array would look like: <code class="js code-inline">[ true, 0, 0, 10 ]</code>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
object
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
<code class="code-inline">added in v1.5.0</code><br>
|
|
The passed object specifies the margin with the properties called <code class="js code-inline">top</code>, <code class="js code-inline">right</code>, <code class="js code-inline">bottom</code> and <code class="js code-inline">left</code>.
|
|
The values can be booleans (if the original CSS margin value of the corresponding direction shall be used) or numbers (if a custom margin value shall be used).<br>
|
|
If your object doesn't specify a value for a direction, it's treated as if the value was <code class="js code-inline">0</code>.<br>
|
|
A example object would look like: <code class="js code-inline">{ top : true, left: 10 }</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
axis <code class="code-inline">deprecated since v1.5.0</code>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
<b>This property is deprecated. Please use the new "scroll" property instead!</b>
|
|
<div class="expander-header" data-expander-key="method-scroll-axis">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>Old documentation:</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="method-scroll-axis">
|
|
The axis which shall be scrolled. The Default value is <span class="txtc-primary-color">"xy"</span>.<br>
|
|
Possible values are:
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"xy"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
Scrolls both axis.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"yx"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
Scrolls both axis.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"x"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
Scrolls only the x-axis.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box">
|
|
<div class="plainobjectpropertyvalue-documentation-box-title">
|
|
"y"
|
|
</div>
|
|
<div class="plainobjectpropertyvalue-documentation-box-content">
|
|
Scrolls only the y-axis.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-param">
|
|
<p>duration</p>
|
|
<p>Type: number</p>
|
|
<div>
|
|
The duration in milliseconds of the scroll-animation.
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-param">
|
|
<p>easing</p>
|
|
<p>Type: string | array | object</p>
|
|
<div>
|
|
The easing of the scroll-animation.<br>
|
|
A single <b>string</b> represents the easing for both axis.<br>
|
|
If you pass a <b>array</b>, the first entry is the easing for the x axis and the second entry is the easing for the y axis.<br>
|
|
<br>
|
|
<code class="code-inline">added in v1.6.0</code><br>
|
|
If you pass a <b>object</b>, the x property represents the easing for the x axis and the y property represents the easing for the y axis.<br>
|
|
If undefined the easing is "swing".
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-param">
|
|
<p>complete</p>
|
|
<p>Type: function</p>
|
|
<div>
|
|
The callback function which shall be called after the scroll-animation has completed.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>examples:</span>
|
|
<pre><code class="js">//set the scroll-offset to 50 on both axis.
|
|
instance.scroll(50);
|
|
|
|
//scroll to 50% on both axis with a duration of 1000ms
|
|
instance.scroll({ x : "50%", y : "50%" }, 1000);
|
|
|
|
//scroll to 0 on the x-axis and to 100% on the y-axis with a duration of 2500ms
|
|
instance.scroll([ 0, "100%" ], 2500);
|
|
|
|
//scroll to 50% on both axis with a duration of 5500ms
|
|
//use a "linear" easing on the x axis and a "easeOutBounce" easing on the y axis
|
|
instance.scroll("50%", 5500, { x : "linear", y : "easeOutBounce" });
|
|
|
|
//set the x-axis scroll-offset to 0 and add a calculatd value to the y-axis scroll-offset
|
|
//with a duration of 1500ms
|
|
//with a "easeOutBounce" easing for both axis
|
|
instance.scroll({ x : 0, y : "+= 30% - 25px" }, 1500, "easeOutBounce");
|
|
|
|
//subtract 10 pixel from the current x-axis scroll-offset and set the y-axis scroll-offset to 10 pixel
|
|
instance.scroll({ x : "-= 10px", y : 10 });
|
|
|
|
//scroll to the left top corner of the passed element
|
|
instance.scroll(element);
|
|
|
|
//scroll to the left top corner of the passed element
|
|
//with a duration of 1300ms
|
|
//with no easing
|
|
//with a complete callback
|
|
instance.scroll(element, 1300, undefined, function() { });
|
|
|
|
//equivalent of the scrollIntoView() method
|
|
instance.scroll({ el : element, block : { y : "begin", x : "nearest" } });
|
|
|
|
//equivalent of the scrollIntoView(false) method
|
|
instance.scroll({ el : element, block : { y : "end", x : "nearest" } });
|
|
|
|
//scroll to the top edge of the passed element if it isn't in view
|
|
//with 500ms
|
|
instance.scroll({ el : element, scroll : { y : "ifneeded", x : "never" } }, 500);
|
|
|
|
//scroll to the bottom edge of the passed element
|
|
instance.scroll({ el : element, scroll : { x : "never" }, block : "end" });
|
|
|
|
//scroll to the bottom and left edge of the passed element if it isnt in view and let 10 pixel margin
|
|
instance.scroll({ el : element, scroll : "ifneeded", block : ["begin", "end"], margin : 10 });
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="method-documentation-box">
|
|
<div class="method-documentation-box-signature">
|
|
.scroll(<span>coordinates, options</span>)
|
|
</div>
|
|
<div class="method-documentation-box-description">
|
|
Sets the scroll position.
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Parameters:</span>
|
|
<div class="method-documentation-box-description-param">
|
|
<p>coordinates</p>
|
|
<p>Type: *</p>
|
|
<div>
|
|
Read the documentation of this parameter above. They are alike.
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-param">
|
|
<p>options</p>
|
|
<p>Type: PlainObject</p>
|
|
<div>
|
|
A jQuery animate options object. <a href="http://api.jquery.com/animate/#animate-properties-options" target="_blank" rel="noopener" class="inline-btn">Read more</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="instance-scrollStop" data-tab-value="instance-scrollStop">
|
|
<div class="content-navigation-main-caption">ScrollStop Method</div>
|
|
<div class="content-navigation-sub-caption">Description</div>
|
|
Stops the current scroll-animation.
|
|
<div class="content-navigation-sub-caption">Signatures</div>
|
|
<div class="method-documentation-box">
|
|
<div class="method-documentation-box-signature">
|
|
.scrollStop()
|
|
</div>
|
|
<div class="method-documentation-box-description">
|
|
Stops the current scroll-animation.<br>
|
|
Has the same paramets as the jQuery.stop() method. <a href="http://api.jquery.com/stop/" target="_blank" rel="noopener" class="inline-btn">Read more</a>
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Returns: <code class="code-inline">added in v1.5.0</code></span>
|
|
<div class="method-documentation-box-description-return">
|
|
<p>Type: OverlayScrollbars</p>
|
|
<div>
|
|
The current OverlayScrollbars instance, so you can chain this method with other methods.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>example:</span>
|
|
<pre><code class="js">//scroll-animation duration is 10 seconds
|
|
instance.scroll({ y : "100%" }, 10000);
|
|
|
|
//abort the 10 seconds scroll-animation immediately
|
|
instance.scrollStop();
|
|
|
|
//scroll-animation duration is 1 second
|
|
instance.scroll({ y : "100%" }, 1000);
|
|
|
|
//chaining added in v1.5.0 - stop the old animation and start a new one in one line
|
|
instance.scrollStop().scroll({ y : 500 }, 5000);
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="instance-getElements" data-tab-value="instance-getElements">
|
|
<div class="content-navigation-main-caption">GetElements Method</div>
|
|
<div class="content-navigation-sub-caption">Description</div>
|
|
Returns all relevant elements.
|
|
<div class="content-navigation-sub-caption">Signatures</div>
|
|
<div class="method-documentation-box">
|
|
<div class="method-documentation-box-signature">
|
|
.getElements()
|
|
</div>
|
|
<div class="method-documentation-box-description">
|
|
Returns all relevant elements.
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Returns:</span>
|
|
<div class="method-documentation-box-description-return">
|
|
<p>Type: PlainObject</p>
|
|
<div>
|
|
Structure:
|
|
<pre><code class="json">{
|
|
target : <span class="txtc-secondary-color">HTMLElement</span>,
|
|
host : <span class="txtc-secondary-color">HTMLElement</span>,
|
|
padding : <span class="txtc-secondary-color">HTMLElement</span>,
|
|
viewport : <span class="txtc-secondary-color">HTMLElement</span>,
|
|
content : <span class="txtc-secondary-color">HTMLElement</span>,
|
|
scrollbarHorizontal : {
|
|
scrollbar : <span class="txtc-secondary-color">HTMLElement</span>,
|
|
track : <span class="txtc-secondary-color">HTMLElement</span>,
|
|
handle : <span class="txtc-secondary-color">HTMLElement</span>
|
|
},
|
|
scrollbarVertical : {
|
|
scrollbar : <span class="txtc-secondary-color">HTMLElement</span>,
|
|
track : <span class="txtc-secondary-color">HTMLElement</span>,
|
|
handle : <span class="txtc-secondary-color">HTMLElement</span>
|
|
},
|
|
scrollbarCorner : <span class="txtc-secondary-color">HTMLElement</span>
|
|
}</code></pre>
|
|
Description:
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
target
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The target element. - The element to which this instance was attached to.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
host
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The host element. - The element which is the topmost element of the instance.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
padding
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The padding element. - This element controls the padding.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
viewport
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The viewport element. - This element responsible for the native scrolling.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
content
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The content element. - Contains all the content which shall be scrolled.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
scrollbarHorizontal.scrollbar
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The horizontal scrollbar element. - The topmost horizontal scrollbar element.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
scrollbarHorizontal.track
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The horizontal scrollbar track element. - The track of the horizontal scrollbar. <br>Is the parent of the handle element.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
scrollbarHorizontal.handle
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The horizontal scrollbar handle element. - The handle of the horizontal scrollbars. <br>This element could contain custom content.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
scrollbarVertical.scrollbar
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The vertical scrollbar element. - The topmost vertical scrollbar element.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
scrollbarVertical.track
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The vertical scrollbar track element. - The track of the vertical scrollbar. <br>Is the parent of the handle element.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
scrollbarVertical.handle
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The vertical scrollbar handle element. - The handle of the vertical scrollbars. <br>This element could contain custom content.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
scrollbarCorner
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The scrollbar corner element. Is the corner which appears if both scrollbars are visible. <br>Is also the resize handle.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="method-documentation-box">
|
|
<div class="method-documentation-box-signature">
|
|
.getElements(<span>elementName</span>)
|
|
</div>
|
|
<div class="method-documentation-box-description">
|
|
Returns the element with the given name.
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Parameters:</span>
|
|
<div class="method-documentation-box-description-param">
|
|
<p>elementName</p>
|
|
<p>Type: string</p>
|
|
<div>
|
|
The name of the element which shall be returned.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Returns:</span>
|
|
<div class="method-documentation-box-description-return">
|
|
<p>Type: *</p>
|
|
<div>
|
|
The value of the given element name.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>examples:</span>
|
|
<pre><code class="js">var host = instance.getElements("host");
|
|
var horizontalHandle = instance.getElements("scrollbarHorizontal.handle");
|
|
var verticalHandle = instance.getElements("scrollbarVertical.handle");
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="instance-getState" data-tab-value="instance-getState">
|
|
<div class="content-navigation-main-caption">GetState Method</div>
|
|
<div class="content-navigation-sub-caption">Description</div>
|
|
Returns a object which describes the current state of this instance.
|
|
<div class="content-navigation-sub-caption">Signatures</div>
|
|
<div class="method-documentation-box">
|
|
<div class="method-documentation-box-signature">
|
|
.getState()
|
|
</div>
|
|
<div class="method-documentation-box-description">
|
|
Returns a object which describes the current state of this instance.
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Returns:</span>
|
|
<div class="method-documentation-box-description-return">
|
|
<p>Type: PlainObject</p>
|
|
<div>
|
|
Structure:
|
|
<pre><code class="json">{
|
|
destroyed : <span class="txtc-secondary-color">boolean</span>,
|
|
sleeping : <span class="txtc-secondary-color">boolean</span>,
|
|
autoUpdate : <span class="txtc-secondary-color">boolean</span>,
|
|
widthAuto : <span class="txtc-secondary-color">boolean</span>,
|
|
heightAuto : <span class="txtc-secondary-color">boolean</span>,
|
|
documentMixed : <span class="txtc-secondary-color">boolean</span>,
|
|
padding : {
|
|
t : <span class="txtc-secondary-color">number</span>,
|
|
r : <span class="txtc-secondary-color">number</span>,
|
|
b : <span class="txtc-secondary-color">number</span>,
|
|
l : <span class="txtc-secondary-color">number</span>
|
|
},
|
|
overflowAmount : {
|
|
x : <span class="txtc-secondary-color">number</span>,
|
|
y : <span class="txtc-secondary-color">number</span>
|
|
},
|
|
hideOverflow : {
|
|
x : <span class="txtc-secondary-color">boolean</span>,
|
|
y : <span class="txtc-secondary-color">boolean</span>,
|
|
xs : <span class="txtc-secondary-color">boolean</span>,
|
|
ys : <span class="txtc-secondary-color">boolean</span>
|
|
},
|
|
hasOverflow : {
|
|
x : <span class="txtc-secondary-color">boolean</span>,
|
|
y : <span class="txtc-secondary-color">boolean</span>
|
|
},
|
|
contentScrollSize : {
|
|
width : <span class="txtc-secondary-color">number</span>,
|
|
height : <span class="txtc-secondary-color">number</span>
|
|
},
|
|
viewportSize : {
|
|
width : <span class="txtc-secondary-color">number</span>,
|
|
height : <span class="txtc-secondary-color">number</span>
|
|
},
|
|
hostSize : {
|
|
width : <span class="txtc-secondary-color">number</span>,
|
|
height : <span class="txtc-secondary-color">number</span>
|
|
}
|
|
}</code></pre>
|
|
Description:
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
destroyed
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether this instance is destroyed. <code class="code-inline">added in v1.8.0</code>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
sleeping
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether this instance is currently sleeping due to the <a class="inline-btn" data-navigation="[1]method-sleep">sleep</a> method.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
autoUpdate
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether this instance uses the autoUpdateLoop.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
widthAuto
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether the host-element's width is auto.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
heightAuto
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether the host-element's height is auto.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
documentMixed
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether the host-elements document isn't the same document as the one with which the plugin was initialized.
|
|
If this property is true it's most likely the host-element is inside an iFrame. <code class="code-inline">added in v1.4.5</code>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
padding.t
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The top padding of the host-element in pixel.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
padding.r
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The right padding of the host-element in pixel.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
padding.b
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The bottom padding of the host-element in pixel.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
padding.l
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The left padding of the host-element in pixel.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
overflowAmount.x
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The overflow amount of the x-axis in pixel.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
overflowAmount.y
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The overflow amount of the y-axis in pixel.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
hideOverflow.x
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether the overflow on the x-axis is hidden by <code class="code-inline css">overflow-x: hidden</code> or <code class="code-inline css">overflow-x: scroll</code>.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
hideOverflow.y
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether the overflow on the y-axis is hidden by <code class="code-inline css">overflow-y: hidden</code> or <code class="code-inline css">overflow-y: scroll</code>.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
hideOverflow.xs
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether the overflow on the x-axis is hidden by <code class="code-inline css">overflow-x: scroll</code>.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
hideOverflow.ys
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether the overflow on the y-axis is hidden by <code class="code-inline css">overflow-y: scroll</code>.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
hasOverflow.x
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether the x-axis has an overflow. (overflowAmount.x > 0)
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
hasOverflow.y
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether the y-axis has an overflow. (overflowAmount.y > 0)
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
contentScrollSize.width
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The width of the scrollable content in pixels.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
contentScrollSize.height
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The height of the scrollable content in pixels.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
viewportSize.width
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The width of the viewport in pixels.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
viewportSize.height
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The height of the viewport in pixels.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
hostSize.width
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The width of the host-element in pixels.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
hostSize.height
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The height of the host-element in pixels.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box">
|
|
<div class="method-documentation-box-signature">
|
|
.getState(<span>stateProperty</span>)
|
|
</div>
|
|
<div class="method-documentation-box-description">
|
|
Returns the value of the given state property.
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Parameters:</span>
|
|
<div class="method-documentation-box-description-param">
|
|
<p>stateProperty</p>
|
|
<p>Type: string</p>
|
|
<div>
|
|
A string which represents a property of the state object.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Returns:</span>
|
|
<div class="method-documentation-box-description-return">
|
|
<p>Type: *</p>
|
|
<div>
|
|
The value of the given state property.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>examples:</span>
|
|
<pre><code class="js">var isWidthAuto = instance.getState("widthAuto");
|
|
var contentScrollHeight = instance.getState("contentScrollSize.height");
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="instance-destroy" data-tab-value="instance-destroy">
|
|
<div class="content-navigation-main-caption">Destroy Method</div>
|
|
<div class="content-navigation-sub-caption">Description</div>
|
|
Destroys and disposes the current instance and removes all extensions and added elements from the DOM.<br>
|
|
<div class="content-navigation-sub-caption">Signatures</div>
|
|
<div class="method-documentation-box">
|
|
<div class="method-documentation-box-signature">
|
|
.destroy()
|
|
</div>
|
|
<div class="method-documentation-box-description">
|
|
Destroys the current instance and resets the DOM of the target-element to the state before the initialization.
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>example:</span>
|
|
<pre><code class="js">//initialize the plugin and get its instance
|
|
var instance = OverlayScrollbars(document.getElementById(id), { });
|
|
|
|
//destroy the instance
|
|
instance.destroy();
|
|
|
|
//try to get the instance of the plugin again, but it's undefined
|
|
instance = var instance = OverlayScrollbars(document.getElementById(id));
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="instance-ext" data-tab-value="instance-ext">
|
|
<div class="content-navigation-main-caption">Ext Method</div>
|
|
<div class="content-navigation-sub-caption">Description</div>
|
|
Returns the instance of a certain extension of the current plugin instance. <code class="code-inline">added in v1.5.0</code>
|
|
<div class="content-navigation-sub-caption">Signatures</div>
|
|
<div class="method-documentation-box">
|
|
<div class="method-documentation-box-signature">
|
|
.ext( extensionName )
|
|
</div>
|
|
<div class="method-documentation-box-description">
|
|
Returns the instance of a previously added extension with the given name.
|
|
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Parameters:</span>
|
|
<div class="method-documentation-box-description-param">
|
|
<p>extensionName</p>
|
|
<p>Type: string</p>
|
|
<div>
|
|
The name of the previously added extension of which the instance shall be got.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Returns:</span>
|
|
<div class="method-documentation-box-description-return">
|
|
<p>Type: PlainObject | undefined</p>
|
|
<div>
|
|
The instance of the extension with the given name or undefined if no instance was found.<br>
|
|
This instance is just a copy of the actual instance. Changes to this object won't affect the original instance.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>example:</span>
|
|
<pre><code class="js">//register a dummy extensions with the name "myExtension"
|
|
OverlayScrollbars.extension("myExtension", function() { return { }; });
|
|
|
|
//initialize the plugin with the extension "myExtension" and get the plugins instance
|
|
var instance = OverlayScrollbars(document.getElementById(id), { }, "myExtension");
|
|
|
|
//get the instance of the extension "myExtension"
|
|
var extensionInstance = instance.ext("myExtension");
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="method-documentation-box">
|
|
<div class="method-documentation-box-signature">
|
|
.ext()
|
|
</div>
|
|
<div class="method-documentation-box-description">
|
|
Gets a object which contains all instances of all extensions which has been added to the current instance.
|
|
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Returns:</span>
|
|
<div class="method-documentation-box-description-return">
|
|
<p>Type: PlainObject</p>
|
|
<div>
|
|
The object keys represent the names of the added extensions. The corresponding values represent the instances.<br>
|
|
All instance objects are just a copy and changes won't affect the original instance.<br>
|
|
If a instance has no extensions added, a empty object will be returned.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="instance-addext" data-tab-value="instance-addext">
|
|
<div class="content-navigation-main-caption">AddExt Method</div>
|
|
<div class="content-navigation-sub-caption">Description</div>
|
|
Adds a extension to the current instance. <code class="code-inline">added in v1.5.0</code>
|
|
<div class="content-navigation-sub-caption">Signatures</div>
|
|
<div class="method-documentation-box">
|
|
<div class="method-documentation-box-signature">
|
|
.addExt( extensionName [, options] )
|
|
</div>
|
|
<div class="method-documentation-box-description">
|
|
Adds a previously registered extension with the given name to the plugin instance and returns the instance of the extension or undefined if the extension couldn't be added.
|
|
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Parameters:</span>
|
|
<div class="method-documentation-box-description-param">
|
|
<p>extensionName</p>
|
|
<p>Type: string</p>
|
|
<div>
|
|
The name of the extension which shall be added to the instance.
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-param">
|
|
<p>options</p>
|
|
<p>Type: *</p>
|
|
<div>
|
|
A optional parameter.<br>
|
|
Options with which the extension shall be added.<br>
|
|
Options can be of any type, but I highly recommend using an <b>object</b>.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Returns:</span>
|
|
<div class="method-documentation-box-description-return">
|
|
<p>Type: PlainObject | undefined</p>
|
|
<div>
|
|
The instance of the added extension or undefined if the extension wasn't added successfully.<br>
|
|
This instance is just a copy of the actual instance. Changes to this object won't affect the original instance.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>example:</span>
|
|
<pre><code class="js">//register a dummy extensions with the name "myExtension"
|
|
OverlayScrollbars.extension("myExtension", function() { return { }; });
|
|
|
|
//initialize the plugin and get its instance
|
|
var instance = OverlayScrollbars(document.getElementById(id), { });
|
|
|
|
//add the previously registered extension "myExtension" to the plugin instance
|
|
var extensionInstance = instance.addExt("myExtension");
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="instance-removeext" data-tab-value="instance-removeext">
|
|
<div class="content-navigation-main-caption">RemoveExt Method</div>
|
|
<div class="content-navigation-sub-caption">Description</div>
|
|
Removes an extension from the current instance. <code class="code-inline">added in v1.5.0</code>
|
|
<div class="content-navigation-sub-caption">Signatures</div>
|
|
<div class="method-documentation-box">
|
|
<div class="method-documentation-box-signature">
|
|
.removeExt( extensionName )
|
|
</div>
|
|
<div class="method-documentation-box-description">
|
|
Removes a previously added extension from the current instance and returns a boolean which indicates whether the removal was successful.
|
|
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Parameters:</span>
|
|
<div class="method-documentation-box-description-param">
|
|
<p>extensionName</p>
|
|
<p>Type: string</p>
|
|
<div>
|
|
The name of the previously added extension which shall be removed.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Returns:</span>
|
|
<div class="method-documentation-box-description-return">
|
|
<p>Type: boolean</p>
|
|
<div>
|
|
True if the extension was successfully removed, false otherwise (for example if the extension wasn't added before).
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>example:</span>
|
|
<pre><code class="js">//register a dummy extension with the name "myExtension"
|
|
OverlayScrollbars.extension("myExtension", function() { return { }; });
|
|
|
|
//initialize the plugin and get its instance
|
|
var instance = OverlayScrollbars(document.getElementById(id), { });
|
|
|
|
//add the previously registered extension "myExtension" to the plugin instance
|
|
instance.addExt("myExtension");
|
|
|
|
//remove the previously added extension "myExtension" from the plugin instance
|
|
instance.removeExt("myExtension");
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="global-defaultOptions" data-tab-value="global-defaultOptions">
|
|
<div class="content-navigation-main-caption">OverlayScrollbars.defaultOptions Method</div>
|
|
<div class="content-navigation-sub-caption">Description</div>
|
|
Returns or Sets the default options for each new plugin initialization.
|
|
<div class="content-navigation-sub-caption">Signatures</div>
|
|
<div class="method-documentation-box">
|
|
<div class="method-documentation-box-signature">
|
|
OverlayScrollbars.defaultOptions()
|
|
</div>
|
|
<div class="method-documentation-box-description">
|
|
Returns the default options object.
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Returns:</span>
|
|
<div class="method-documentation-box-description-return">
|
|
<p>Type: PlainObject</p>
|
|
<p>
|
|
The object which describes the defaultOptions.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>examples:</span>
|
|
<pre><code class="js">//Gets the current defaultOptions
|
|
var defaultOptions = OverlayScrollbars.defaultOptions();
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="method-documentation-box">
|
|
<div class="method-documentation-box-signature">
|
|
OverlayScrollbars.defaultOptions(<span>newDefaultOptions</span>)
|
|
</div>
|
|
<div class="method-documentation-box-description">
|
|
Sets the default options via a plain object.
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Parameters:</span>
|
|
<div class="method-documentation-box-description-param">
|
|
<p>newDefaultOptions</p>
|
|
<p>Type: PlainObject</p>
|
|
<div>
|
|
A plain object which represents the new default options.<br>
|
|
All option possibilities can be read in the <a class="inline-btn" data-navigation="[1]options">Options</a> section.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>examples:</span>
|
|
<pre><code class="js">//this instance has the default defaultOptions.
|
|
OverlayScrollbars(document.getElementById(id), { });
|
|
|
|
OverlayScrollbars.defaultOptions({
|
|
className : "my-custom-class",
|
|
resize : "both"
|
|
});
|
|
|
|
//this instance has the new defaultOptions, which means the options:
|
|
//className = "my-custom-class"
|
|
//resize = "both"
|
|
//are set automatically even without custom options in the constructor
|
|
OverlayScrollbars(document.getElementById(otherId), { });
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="global-globals" data-tab-value="global-globals">
|
|
<div class="content-navigation-main-caption">OverlayScrollbars.globals Method</div>
|
|
<div class="content-navigation-sub-caption">Description</div>
|
|
Returns a plain object which contains global information about the plugin and each instance of it.
|
|
<div class="content-navigation-sub-caption">Signatures</div>
|
|
<div class="method-documentation-box">
|
|
<div class="method-documentation-box-signature">
|
|
OverlayScrollbars.globals()
|
|
</div>
|
|
<div class="method-documentation-box-description">
|
|
Returns a object which contains global information about the plugin and each instance of it. <br>
|
|
The purpose of this method is to provide access to all information which the plugin is able to offer.
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Returns:</span>
|
|
<div class="method-documentation-box-description-return">
|
|
<p>Type: PlainObject</p>
|
|
<div>
|
|
The returned plain object is just a copy, which means that changes to the returned object won't have any effect to the original object.<br><br>
|
|
Structure:
|
|
<pre><code class="json">{
|
|
defaultOptions : <span class="txtc-secondary-color">PlainObject</span>,
|
|
autoUpdateLoop : <span class="txtc-secondary-color">boolean</span>,
|
|
autoUpdateRecommended : <span class="txtc-secondary-color">boolean</span>,
|
|
supportMutationObserver : <span class="txtc-secondary-color">boolean</span>,
|
|
supportResizeObserver : <span class="txtc-secondary-color">boolean</span>,
|
|
supportPassiveEvents : <span class="txtc-secondary-color">boolean</span>,
|
|
supportTransform : <span class="txtc-secondary-color">boolean</span>,
|
|
supportTransition : <span class="txtc-secondary-color">boolean</span>,
|
|
restrictedMeasuring : <span class="txtc-secondary-color">boolean</span>,
|
|
nativeScrollbarStyling : <span class="txtc-secondary-color">boolean</span>,
|
|
nativeScrollbarSize : {
|
|
x : <span class="txtc-secondary-color">number</span>,
|
|
y : <span class="txtc-secondary-color">number</span>
|
|
},
|
|
nativeScrollbarIsOverlaid : {
|
|
x : <span class="txtc-secondary-color">boolean</span>,
|
|
y : <span class="txtc-secondary-color">boolean</span>
|
|
},
|
|
overlayScrollbarDummySize : {
|
|
x : <span class="txtc-secondary-color">number</span>,
|
|
y : <span class="txtc-secondary-color">number</span>
|
|
},
|
|
rtlScrollBehavior : {
|
|
i : <span class="txtc-secondary-color">boolean</span>,
|
|
n : <span class="txtc-secondary-color">boolean</span>
|
|
}
|
|
}</code></pre>
|
|
Description:
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
defaultOptions
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The default options for each new plugin initialization. This is the same object as the returned object from the <code class="code-inline js">OverlayScrollbars.defaultOptions()</code> function.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
autoUpdateLoop
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether the auto update loop is running or not.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
autoUpdateRecommended
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether the auto update loop is recommended for your browser.<br>
|
|
If the option <code class="code-inline js">autoUpdate</code> is null and this property returns true, you can be sure that your instance is updating due to the update loop.<br>
|
|
This property should be only true in old browsers.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
supportMutationObserver
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether your browser is capable of the <a href="https://developer.mozilla.org/de/docs/Web/API/MutationObserver" target="_blank" rel="noopener" class="inline-btn">MutationObserver</a> API.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
supportResizeObserver
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether your browser is capable of the <a href="https://wicg.github.io/ResizeObserver/#api" target="_blank" rel="noopener" class="inline-btn">ResizeObserver</a> API.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
supportPassiveEvents
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether your browser is capable of <a href="https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md" target="_blank" rel="noopener" class="inline-btn">passive event listeners</a>.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
supportTransform
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether your browser is supporting CSS3 Transforms.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
supportTransition
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether your browser is supporting CSS3 Transitions.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
restrictedMeasuring
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether the scrollSize calculation is only correct if certain CSS properties are set. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1439305" target="_blank" rel="noopener" class="inline-btn">More info</a>.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
nativeScrollbarStyling
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether your browser is capable of styling (hiding) the scrollbar via a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar" target="_blank" rel="noopener" class="inline-btn">CSS Pseudo Element</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width" target="_blank" rel="noopener" class="inline-btn">CSS Property</a>.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
nativeScrollbarSize.x
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The height of the native horizontal scrollbar.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
nativeScrollbarSize.y
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The width of the native vertical scrollbar.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
nativeScrollbarIsOverlaid.x
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether the native horizontal scrollbar is overlaid. (nativeScrollbarSize.x === 0)
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
nativeScrollbarIsOverlaid.y
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether the native vertical scrollbar is overlaid. (nativeScrollbarSize.y === 0)
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
overlayScrollbarDummySize.x
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Well, an explanation would be very long and require know how about the plugin so just ignore this property.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
overlayScrollbarDummySize.y
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Well, an explanation would be very long and require know how about the plugin so just ignore this property.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
rtlScrollBehavior.i
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether the origin side is wrong.<br>
|
|
The origin side should be the right side if you set your direction to "right to left" (rtl).<br>
|
|
This is not specified anywhere so browsers are handling this differently.<br>
|
|
"i" is shorthand for "invert" - we need to invert the origin side to normalize RTL scroll.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
rtlScrollBehavior.n
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Indicates whether the scrollLeft maximum value is negative.<br>
|
|
The scrollLeft offset should be always positive. Normally the range for this value is from zero (0) to a positive value which respresents the maximum scrollLeft offset.<br>
|
|
But if you set your direction to "right to left" (rtl), it can be that the scrollLeft offset goes from (0) to a negative value which respresents the maximum scrollLeft offset.<br>
|
|
This is not specified anywhere so browsers are handling this differently.<br>
|
|
"n" is shorthand for "negate" - we need to negate the scrollLeft offset to normalize RTL scroll.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
cssCalc
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
<span><code class="code-inline">deprecated since v1.12.0</code></span><br>
|
|
The name for the <a href="https://www.w3schools.com/cssref/func_calc.asp" target="_blank" rel="noopener" class="inline-btn">CSS calc function</a> (with vendor prefix) or null if the CSS calc function is not supported.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>examples:</span>
|
|
<pre><code class="js">//returns a object which represents global infromation about the plugin
|
|
var globals = OverlayScrollbars.globals();</code></pre>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="global-extension" data-tab-value="global-extension">
|
|
<div class="content-navigation-main-caption">OverlayScrollbars.extension Method</div>
|
|
<div class="content-navigation-sub-caption">Description</div>
|
|
Registers, Unregisters or returns extensions. <code class="code-inline">added in v1.5.0</code>
|
|
<div class="content-navigation-sub-caption">Signatures</div>
|
|
<div class="method-documentation-box">
|
|
<div class="method-documentation-box-signature">
|
|
OverlayScrollbars.extension( extensionName, extensionFactory [, defaultOptions] )
|
|
</div>
|
|
<div class="method-documentation-box-description">
|
|
Registers a extension globally to the plugin, so it can be used by instances.
|
|
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Parameters:</span>
|
|
<div class="method-documentation-box-description-param">
|
|
<p>extensionName</p>
|
|
<p>Type: string</p>
|
|
<div>
|
|
A string which represents the name of the extension which shall be registered.
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-param">
|
|
<p>extensionFactory</p>
|
|
<p>Type: function</p>
|
|
<div>
|
|
A function which returns the instance of your extension.<br>
|
|
It takes three arguments which are described in more detail in <a class="inline-btn" data-navigation="[1]extensions-basics">this</a> section.
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-param">
|
|
<p>defaultOptions</p>
|
|
<p>Type: *</p>
|
|
<div>
|
|
A optional parameter.<br>
|
|
If the extension is complex and offers a possibility to manage options, you can pass default options with this parameter.<br>
|
|
Options can be of any type, but I highly recommend using an <b>object</b>.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>examples:</span>
|
|
<pre><code class="js">//register a dummy extension with the name "myExtension"
|
|
OverlayScrollbars.extension("myExtension", function() { return { }; });</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="method-documentation-box">
|
|
<div class="method-documentation-box-signature">
|
|
OverlayScrollbars.extension( extensionName, extensionFactory )
|
|
</div>
|
|
<div class="method-documentation-box-description">
|
|
Unregisters a extension globally from the plugin.
|
|
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Parameters:</span>
|
|
<div class="method-documentation-box-description-param">
|
|
<p>extensionName</p>
|
|
<p>Type: string</p>
|
|
<div>
|
|
The name of the previous registered extension.
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-param">
|
|
<p>extensionFactory</p>
|
|
<p>Type: null | undefined</p>
|
|
<div>
|
|
You can pass anything here, as long as it is no function the extension with the given name will be unregistered.<br>
|
|
I suggest to pass null or undefined.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>examples:</span>
|
|
<pre><code class="js">//unregister the extension with the name "myExtension"
|
|
OverlayScrollbars.extension("myExtension", null);</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="method-documentation-box">
|
|
<div class="method-documentation-box-signature">
|
|
OverlayScrollbars.extension( extensionName )
|
|
</div>
|
|
<div class="method-documentation-box-description">
|
|
Returns the extension-object of the extensions with the given name.
|
|
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Parameters:</span>
|
|
<div class="method-documentation-box-description-param">
|
|
<p>extensionName</p>
|
|
<p>Type: string</p>
|
|
<div>
|
|
The name of the previous registered extension, of which the extension-object shall be returned.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Returns:</span>
|
|
<div class="method-documentation-box-description-return">
|
|
<p>Type: PlainObject</p>
|
|
<div>
|
|
The returned plain object is just a copy, which means that changes to the returned object won't have any effect to the original object.<br><br>
|
|
Structure:
|
|
<pre><code class="json">{
|
|
name : <span class="txtc-secondary-color">string</span>,
|
|
extensionFactory : <span class="txtc-secondary-color hljs-no-escape">function</span>,
|
|
defaultOptions : <span class="txtc-secondary-color">object | undefined</span>
|
|
}</code></pre>
|
|
Description:
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
name
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The name with which the extension was registered.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
extensionFactory
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The function which returns the instance of your extension.
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
defaultOptions
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
The default options object of your extension or undefined if you haven't passed any.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>examples:</span>
|
|
<pre><code class="js">//get the extension-object with the name "myExtension"
|
|
var registeredExtension = OverlayScrollbars.extension("myExtension");</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="method-documentation-box">
|
|
<div class="method-documentation-box-signature">
|
|
OverlayScrollbars.extension()
|
|
</div>
|
|
<div class="method-documentation-box-description">
|
|
Returns an array like object which contains all extension-objects which has been registered.
|
|
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Returns:</span>
|
|
<div class="method-documentation-box-description-return">
|
|
<p>Type: ArrayLikeObject</p>
|
|
<div>
|
|
The returned object is just a copy, which means that changes to the returned object won't have any effect to the original object.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>examples:</span>
|
|
<pre><code class="js">var extensionObjects = OverlayScrollbars.extension(); //get all registered extension-objects
|
|
var registeredExtensionCount = extensionObjects.length; //get the number of registered extensions
|
|
var firstRegisteredExtensionObject = extensionObjects[0]; //get the first registered extension-object</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="global-valid" data-tab-value="global-valid">
|
|
<div class="content-navigation-main-caption">OverlayScrollbars.valid Method</div>
|
|
<div class="content-navigation-sub-caption">Description</div>
|
|
Checks whether a passed object is a non-destroyed OverlayScrollbars instance. <code class="code-inline">added in v1.9.0</code>
|
|
<div class="content-navigation-sub-caption">Signatures</div>
|
|
<div class="method-documentation-box">
|
|
<div class="method-documentation-box-signature">
|
|
OverlayScrollbars.valid(<span>osInstance</span>)
|
|
</div>
|
|
<div class="method-documentation-box-description">
|
|
Checks whether the passed object is a non-destroyed OverlayScrollbars instance.
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>Parameters:</span>
|
|
<div class="method-documentation-box-description-param">
|
|
<p>osInstance</p>
|
|
<p>Type: *</p>
|
|
<div>
|
|
The potential OverlayScrollbars instance which shall be checked.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="method-documentation-box-description-wrapper">
|
|
<span>examples:</span>
|
|
<pre><code class="js">//create OverlayScrollbars instance
|
|
var osInstance = OverlayScrollbars(document.body, { });
|
|
|
|
//returns true
|
|
OverlayScrollbars.valid(osInstance);
|
|
|
|
//destroy the instance
|
|
osInstance.destroy();
|
|
|
|
//returns false
|
|
OverlayScrollbars.valid(osInstance);
|
|
|
|
//returns false
|
|
OverlayScrollbars.valid({ });
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="extensions-basics" data-tab-value="extensions-basics">
|
|
<div class="content-navigation-main-caption">Extensions</div>
|
|
|
|
The extension system was <code class="code-inline">added in v1.5.0</code>.<br>
|
|
Since each app has its own environment with its own requirements, it is impossible to cover all edge-cases within the standard features.<br>
|
|
Extensions provides a simple and elegant way to implement non-standard features into OverlayScrollbars.
|
|
<br>
|
|
|
|
<div class="content-navigation-sub-caption">Lifecycle</div>
|
|
A extension can be <b>added</b> right at the <a class="inline-btn" data-navigation="[1]initialization">initialization</a> of a OverlayScrollbars instance or with the <a class="inline-btn" data-navigation="[1]method-addext">addExt</a> method of a OverlayScrollbars instance.
|
|
To <b>remove</b> a extension you have two possibilities. You can do it via the <a class="inline-btn" data-navigation="[1]method-removeext">removeExt</a> method or you can <a class="inline-btn" data-navigation="[1]method-destroy">destroy</a> the OverlayScrollbars instance. This will remove all extensions.
|
|
|
|
|
|
<div class="content-navigation-sub-caption">Interface</div>
|
|
A <b>extensionFactory</b> is basically a function which is returning a object. This object is the instance of your extension.<br>
|
|
The most simple extension would look like this:<br>
|
|
<pre><code class="js code-noscroll">var extensionFactory = function() {
|
|
return { }; //<- this is the actual extension
|
|
};
|
|
</code></pre>
|
|
In order to make it more simple and comfortable for developers, the function has a bunch of parameters which make the development much easier.
|
|
Furthermore the <code class="code-inline">this</code>-context of the extensionFactory function is the <b>OverlayScrollbars instance</b> which is trying to add the extension.
|
|
<pre><code class="js code-noscroll">var extensionFactory = function(defaultOptions, framework, compatibility) {
|
|
var osInstance = this;
|
|
return { }; //<- this is the actual extension
|
|
};
|
|
</code></pre>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<td>Parameter</td>
|
|
<td>Description</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><b>defaultOptions</b></td>
|
|
<td>The "defaultOptions" value which were passed to the global <a class="inline-btn" data-navigation="[1]gmethod-extension">extension</a> method in order to register this extension. If no defaultOptions value was passed this parameter is undefined.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>framework</b></td>
|
|
<td>The <b>framework</b> which OverlayScrollbars is using internally in order to make it simpler to manipulate and traverse the DOM. If the jQuery version is used, this parameter is the jQuery object. However, if the non-jQuery version is used, this parameter is a jQuery-like-object which has the same API-structure as jQuery but doesn't offer all its functionality. A documentation of the supported methods can be found <a class="inline-btn" data-modal="extensions-framework-object">here</a>.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>compatibility</b></td>
|
|
<td>A object which offers <b>compatibility</b> methods. These methods are unifying native methods which are different or not present across all browsers. (for example if methods or objects have vendor prefixes, different names or signatures and so on...) A documentation of all methods can be found <a class="inline-btn" data-modal="extensions-compatibility-object">here</a>.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="content-navigation-sub-caption">Special methods</div>
|
|
You are free to design your extension instance as you like.<br>
|
|
However, every extension <b>can</b> have 4 methods which interact directly with the OverlayScrollbars instance.
|
|
These methods have fixed (reserved) names and they are only called from the OverlayScrollbars instance itself. They can't be called from the outside.<br>
|
|
The names of these methods are:
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<td>Method Name</td>
|
|
<td>Description</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><b>contract</b></td>
|
|
<td>
|
|
Gets called if an instance tries to add an extension.<br>
|
|
<u>Use this method to determine whether the extension can be added or not. With this method you have the opportunity to abort the adding process.</u><br><br>
|
|
This method has to return a boolean, if the method returns any other type, the method will be ignored.<br>
|
|
If the method returns true the extension will be added, if it returns false the extension won't be added.<br>
|
|
If your extension doesn't have a contract method the extension will be added always.<br><br>
|
|
The method has <b>one parameter</b>:<br>
|
|
<b class="txtc-primary-color">global</b> : The <a href="https://developer.mozilla.org/en-US/docs/Glossary/Global_object" target="_blank" rel="noopener" class="inline-btn">global</a> object of OverlayScrollbars. (The global window object)
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>added</b></td>
|
|
<td>
|
|
Gets called once the extension was successfully added to a OverlayScrollbars instance.<br>
|
|
<u>Use this method to add all your functionality, DOM elements and so on.</u><br><br>
|
|
The method has <b>one parameter</b>:<br>
|
|
<b class="txtc-primary-color">options</b> : The custom options which have been passed to the extension. This parameter is optional and can be undefined if no options were passed.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>removed</b></td>
|
|
<td>
|
|
Gets called once the extension was removed from a OverlayScrollbars instance.<br>
|
|
<u>Use this method to remove all your added functionality, DOM elements and so on.</u><br><br>
|
|
The method has <b>no parameters</b>.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>on</b></td>
|
|
<td>
|
|
Gets called after a event happened. <br><br>
|
|
The method has <b>two parameters</b>:<br>
|
|
<b class="txtc-primary-color">callbackName</b> : The callback name as specified in the <a class="inline-btn" data-navigation="[1]options">options</a> but without the prefix "on".
|
|
For exampple the if the event <code class="code-inline">onOverflowChanged</code> happened this parameter is <code class="code-inline">overflowChanged</code>. <br>
|
|
<b class="txtc-primary-color">callbackArgs</b> : The corresponding callback argument. A documentation of all callback arguments can be read <a class="inline-btn" data-navigation="[1]options">here</a>.
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
A small code example:
|
|
<pre><code class="js code-noscroll">var extensionFactory = function(defaultOptions, compatibility, framework) {
|
|
var osInstance = this;
|
|
var extension = { };
|
|
|
|
//the reserved "contract" method, can't be called freely
|
|
extension.contract = function(global) { /* code... */ }
|
|
|
|
//the reserved "added" method, can't be called freely
|
|
extension.added = function(options) { /* code... */ };
|
|
|
|
//the reserved "removed" method, can't be called freely
|
|
extension.removed = function() { /* code... */ };
|
|
|
|
//the reserved "on" method, can't be called freely
|
|
extension.on = function(callbackName, callbackArgs) { /* code... */ };
|
|
|
|
//a custom method which can be called freely
|
|
extension.myCustomMethod = function() { /* code... */ };
|
|
|
|
return extension;
|
|
};
|
|
</code></pre>
|
|
|
|
<div class="content-navigation-sub-caption">Epilogue</div>
|
|
I've designed the extension system to be simple and powerful at the same time. However if you're missing any features please open an issue on <a href="https://github.com/KingSora/OverlayScrollbars/issues" target="_blank" rel="noopener" class="inline-btn">github</a> and make your suggestion.
|
|
</div>
|
|
|
|
<div id="extensions-createextensions" data-tab-value="extensions-createextensions">
|
|
<div class="content-navigation-main-caption">Create Extensions</div>
|
|
The extension system was <code class="code-inline">added in v1.5.0</code>.<br>
|
|
Before you read this section, please make sure you've read and understand the extension <a class="inline-btn" data-navigation="[1]extensions-basics">basics</a>.<br>
|
|
<br>
|
|
This section is here to show example templates which shall illustrate how you write an extension correctly.
|
|
|
|
<div class="content-navigation-sub-caption">Examples</div>
|
|
<div class="expander-header" data-expander-key="extensions-createextensions-basic">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>Basic Extension</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-createextensions-basic">
|
|
This extension adds a red div to the handles of the scrollbars.
|
|
<pre><code class="js">OverlayScrollbars.extension("myBasicExtension", function(defaultOptions, framework, compatibility) {
|
|
var osInstance = this;
|
|
var extension = { };
|
|
|
|
var handleElmHorizontal;
|
|
var handleElmVertical;
|
|
|
|
extension.added = function() {
|
|
var instanceElements = osInstance.getElements();
|
|
var scrollbarHorizontalHandle = instanceElements.scrollbarHorizontal.handle;
|
|
var scrollbarVerticalHandle = instanceElements.scrollbarVertical.handle;
|
|
var html = '<div style="height: 100%; width: 100%; background: red;"></div>';
|
|
|
|
handleElmHorizontal = framework(html);
|
|
handleElmVertical = framework(html);
|
|
|
|
framework(scrollbarHorizontalHandle).append(handleElmHorizontal);
|
|
framework(scrollbarVerticalHandle).append(handleElmVertical);
|
|
}
|
|
|
|
extension.removed = function() {
|
|
handleElmHorizontal.remove();
|
|
handleElmVertical.remove();
|
|
}
|
|
|
|
return extension;
|
|
});</code></pre>
|
|
|
|
<div class="extensions-createextensions-examples-playground">
|
|
<div class="extensions-createextensions-examples-playground-info">
|
|
<div class="txtbox txtbox-yellow">
|
|
<i class="mdi mdi-information-outline"></i>
|
|
<span>
|
|
Test this extension by clicking on the corresponding play button.<br>
|
|
Errors or additional messages are displayed in the console.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div id="extensions-createextensions-basic-target" class="extensions-createextensions-examples-playground-target">
|
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 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. 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.<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. 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. 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.<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. 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. 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.<br>
|
|
</div>
|
|
<div class="extensions-createextensions-examples-playground-execute">
|
|
<code class="js">.addExt("myBasicExtension");</code>
|
|
<div id="extensions-createextensions-basic-target-add" class="button">
|
|
<i class="mdi mdi-play"></i>
|
|
</div>
|
|
</div>
|
|
<div class="extensions-createextensions-examples-playground-execute">
|
|
<code class="js">.removeExt("myBasicExtension");</code>
|
|
<div id="extensions-createextensions-basic-target-remove" class="button">
|
|
<i class="mdi mdi-play"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="expander-header" data-expander-key="extensions-createextensions-advanced">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>Advanced Extension</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-createextensions-advanced">
|
|
This extension adds custom colored divs to the track of the scrollbars.<br>
|
|
The default color is "orange", but it can be changed if you pass a valid options object with a different color to the "addExt" method.<br>
|
|
With the custom method "changeColor" the color can be changed whenever you want.<br>
|
|
The position and size of the custom divs gets adjusted if you scroll.
|
|
<pre><code class="js">OverlayScrollbars.extension("myAdvancedExtension", function(defaultOptions, framework, compatibility) {
|
|
var osInstance = this;
|
|
var extension = { };
|
|
|
|
var trackElmHorizontal;
|
|
var trackElmHorizontal2;
|
|
var trackElmVertical;
|
|
var trackElmVertical2;
|
|
|
|
//add the divs after the extension has been added to a instance
|
|
extension.added = function(options) {
|
|
//extend the defaultOptions with the passed options
|
|
//to determine the correct color
|
|
var parsedOptions = framework.extend(true, { }, defaultOptions, options);
|
|
var instanceElements = osInstance.getElements();
|
|
var scrollbarHorizontalHandle = instanceElements.scrollbarHorizontal.track;
|
|
var scrollbarVerticalHandle = instanceElements.scrollbarVertical.track;
|
|
var html = '<div style="height: 100%; width: 100%; top: 0; left: 0; position: absolute;"></div>';
|
|
var sInfo = osInstance.scroll();
|
|
|
|
trackElmHorizontal = framework(html).css({
|
|
background : parsedOptions.color,
|
|
width : sInfo.handleOffset.x
|
|
});
|
|
trackElmHorizontal2 = framework(html).css({
|
|
background : parsedOptions.color,
|
|
width : sInfo.trackLength.x - (sInfo.handleOffset.x + sInfo.handleLength.x),
|
|
left : sInfo.handleOffset.x + sInfo.handleLength.x
|
|
});
|
|
trackElmVertical = framework(html).css({
|
|
background : parsedOptions.color,
|
|
height : sInfo.handleOffset.y
|
|
});
|
|
trackElmVertical2 = framework(html).css({
|
|
background : parsedOptions.color,
|
|
height : sInfo.trackLength.y - (sInfo.handleOffset.y + sInfo.handleLength.y),
|
|
top : sInfo.handleOffset.y + sInfo.handleLength.y
|
|
});
|
|
|
|
framework(scrollbarHorizontalHandle).append([trackElmHorizontal, trackElmHorizontal2])
|
|
framework(scrollbarVerticalHandle).append([trackElmVertical, trackElmVertical2]);
|
|
}
|
|
|
|
//remove the divs after the extension has been removed from a instance
|
|
extension.removed = function() {
|
|
trackElmHorizontal.remove();
|
|
trackElmHorizontal2.remove();
|
|
trackElmVertical.remove();
|
|
trackElmVertical2.remove();
|
|
}
|
|
|
|
//hide the custom divs during scrolling
|
|
extension.on = function(callbackName, args) {
|
|
switch(callbackName) {
|
|
case "scroll":
|
|
var sInfo = osInstance.scroll();
|
|
|
|
trackElmHorizontal.css({
|
|
width : sInfo.handleOffset.x
|
|
});
|
|
trackElmHorizontal2.css({
|
|
width : sInfo.trackLength.x - (sInfo.handleOffset.x + sInfo.handleLength.x),
|
|
left : sInfo.handleOffset.x + sInfo.handleLength.x
|
|
});
|
|
trackElmVertical.css({
|
|
height : sInfo.handleOffset.y
|
|
});
|
|
trackElmVertical2.css({
|
|
height : sInfo.trackLength.y - (sInfo.handleOffset.y + sInfo.handleLength.y),
|
|
top : sInfo.handleOffset.y + sInfo.handleLength.y
|
|
});
|
|
break;
|
|
}
|
|
}
|
|
|
|
//a custom method which changes the colors of the added divs
|
|
extension.changeColor = function(color) {
|
|
trackElmHorizontal.css("background", color);
|
|
trackElmHorizontal2.css("background", color);
|
|
trackElmVertical.css("background", color);
|
|
trackElmVertical2.css("background", color);
|
|
}
|
|
|
|
return extension;
|
|
}, { //defaultOptions:
|
|
color : "orange"
|
|
});</code></pre>
|
|
<div class="extensions-createextensions-examples-playground">
|
|
<div class="extensions-createextensions-examples-playground-info">
|
|
<div class="txtbox txtbox-yellow">
|
|
<i class="mdi mdi-information-outline"></i>
|
|
<span>
|
|
Test this extension by clicking on the corresponding play button.<br>
|
|
Errors or additional messages are displayed in the console.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div id="extensions-createextensions-advanced-target" class="extensions-createextensions-examples-playground-target">
|
|
<div style="width: 500px;">
|
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 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. 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.<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. 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. 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.<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. 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. 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.<br>
|
|
</div>
|
|
</div>
|
|
<div class="extensions-createextensions-examples-playground-execute">
|
|
<code class="js">.addExt("myAdvancedExtension");</code>
|
|
<div id="extensions-createextensions-advanced-target-add" class="button">
|
|
<i class="mdi mdi-play"></i>
|
|
</div>
|
|
</div>
|
|
<div class="extensions-createextensions-examples-playground-execute">
|
|
<code class="js">.addExt("myAdvancedExtension", { color : "DodgerBlue" });</code>
|
|
<div id="extensions-createextensions-advanced-target-add-pink" class="button">
|
|
<i class="mdi mdi-play"></i>
|
|
</div>
|
|
</div>
|
|
<div class="extensions-createextensions-examples-playground-execute">
|
|
<code class="js">.ext("myAdvancedExtension").changeColor("Crimson");</code>
|
|
<div id="extensions-createextensions-advanced-target-changeColor" class="button">
|
|
<i class="mdi mdi-play"></i>
|
|
</div>
|
|
</div>
|
|
<div class="extensions-createextensions-examples-playground-execute">
|
|
<code class="js">.ext("myAdvancedExtension").changeColor("GreenYellow");</code>
|
|
<div id="extensions-createextensions-advanced-target-changeColor-two" class="button">
|
|
<i class="mdi mdi-play"></i>
|
|
</div>
|
|
</div>
|
|
<div class="extensions-createextensions-examples-playground-execute">
|
|
<code class="js">.removeExt("myAdvancedExtension");</code>
|
|
<div id="extensions-createextensions-advanced-target-remove" class="button">
|
|
<i class="mdi mdi-play"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="expander-header" data-expander-key="extensions-createextensions-dependencies">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>Extension with dependencies</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-createextensions-dependencies">
|
|
This extension needs jQuery to work correctly, else it won't be added to the instance.
|
|
<pre><code class="js">OverlayScrollbars.extension("myDependencyExtension", function(defaultOptions, framework, compatibility) {
|
|
var osInstance = this;
|
|
var extension = { };
|
|
|
|
//determine if jQuery is available
|
|
extension.contract = function(global) {
|
|
return global.jQuery && global.jQuery.fn;
|
|
}
|
|
|
|
//write a message if this extension is added successfully
|
|
extension.added = function() {
|
|
console.log("The dependency extension was added successfully.");
|
|
}
|
|
|
|
//write a message if this extension is removed successfully
|
|
extension.removed = function() {
|
|
console.log("The dependency extension was removed successfully.");
|
|
}
|
|
|
|
return extension;
|
|
});
|
|
</code></pre>
|
|
</div>
|
|
|
|
<div class="content-navigation-sub-caption">Publish your Extension</div>
|
|
If you've written your own extension and you want to make it available for everyone, please open an 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 the official <a data-navigation="extensions" class="inline-btn">extensions page</a> where everyone can download it.
|
|
</div>
|
|
|
|
<div id="themesandstyling-builtinthemes" data-tab-value="themesandstyling-builtinthemes">
|
|
<div class="content-navigation-main-caption">Built-in themes</div>
|
|
|
|
This plugin comes with three very basic built-in themes:
|
|
<br>
|
|
|
|
<div class="content-navigation-sub-caption">"none" -theme</div>
|
|
<div class="txtbox txtbox-yellow">
|
|
<i class="mdi mdi-information-outline"></i>
|
|
<span>Use this theme if you dont want any visible scrollbars.</span>
|
|
</div>
|
|
The "none" theme hides basically the appearance of the scrollbars.<br>
|
|
Its class name is <code class="code-inline css">.os-theme-none</code>. Thus it can be activated if you set the className option to this value or null.
|
|
<br>
|
|
<br>
|
|
Here is a quick demo of this theme:
|
|
<pre><code class="js">//initializes the plugin with "none" -theme
|
|
OverlayScrollbars(document.getElementById(id), { className : null });
|
|
</code></pre>
|
|
<div id="builtinthemes-theme-demo-none" class="builtinthemes-theme-demo">
|
|
<div class="builtinthemes-theme-demo-content">
|
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 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. 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.
|
|
</div>
|
|
</div>
|
|
<br>
|
|
|
|
<div class="content-navigation-sub-caption">"dark" -theme</div>
|
|
<div class="txtbox txtbox-yellow">
|
|
<i class="mdi mdi-information-outline"></i>
|
|
<span>This theme is the way to go if your page has a bright background.</span>
|
|
</div>
|
|
The "dark" theme is a very simple and clean theme with a dark touch.<br>
|
|
It's class name is <code class="code-inline css">.os-theme-dark</code>. Thus it can be activated if you set the className option to this value.
|
|
<br>
|
|
<br>
|
|
Here is a quick demo of this theme:
|
|
<pre><code class="js">//initializes the plugin with "dark" -theme
|
|
OverlayScrollbars(document.getElementById(id), { className : "os-theme-dark" });
|
|
</code></pre>
|
|
<div id="builtinthemes-theme-demo-dark" class="builtinthemes-theme-demo">
|
|
<div class="builtinthemes-theme-demo-content">
|
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 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. 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.
|
|
</div>
|
|
</div>
|
|
<br>
|
|
|
|
<div class="content-navigation-sub-caption">"light" -theme</div>
|
|
<div class="txtbox txtbox-yellow">
|
|
<i class="mdi mdi-information-outline"></i>
|
|
<span>This theme is the way to go if your page has a dark background.</span>
|
|
</div>
|
|
The "light" theme is a very simple and clean theme with a bright touch.<br>
|
|
It's class name is <code class="code-inline css">.os-theme-light</code>. Thus it can be activated if you set the className option to this value.
|
|
<br>
|
|
<br>
|
|
Here is a quick demo of this theme:
|
|
<pre><code class="js">//initializes the plugin with "light" -theme
|
|
OverlayScrollbars(document.getElementById(id), { className : "os-theme-light" });
|
|
</code></pre>
|
|
<div id="builtinthemes-theme-demo-light" class="builtinthemes-theme-demo">
|
|
<div class="builtinthemes-theme-demo-content">
|
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 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. 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.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="themesandstyling-classnames" data-tab-value="themesandstyling-classnames">
|
|
<div class="content-navigation-main-caption">Class Names</div>
|
|
|
|
The scrollbar styling is very simple if you understand the selectors and their meanings.<br>
|
|
I've tried to use self explanatory class names.
|
|
<br>
|
|
|
|
<div class="content-navigation-sub-caption">Host Element</div>
|
|
The plugin is adding several class names to the <b>host-element</b>. Some of them are always present and some are only present if a certain behavior is fulfilled.
|
|
This class names helps us to understand the current state of the plugin & scrollbars.
|
|
<br><br>
|
|
Here is a complete listing of all class names of the <b>host-element</b>:
|
|
<div class="txtbox txtbox-yellow">
|
|
<i class="mdi mdi-information-outline"></i>
|
|
<span>All class names for the host-element have the prefix ".os-host".</span>
|
|
</div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<td>Class Name</td>
|
|
<td>Description</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><b>.os-host</b></td>
|
|
<td>Indicates whether this element is a host-element. Only applied if the host-element is NOT for a textarea (the target-element is NOT a textarea element).</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>.os-host-textarea</b></td>
|
|
<td>Indicates whether this element is a host-element for a textarea. Only applied if the host-element is for a textarea (the target-element is a textarea element).</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>.os-host-transition</b></td>
|
|
<td>Indicates that the plugin is fully initialized and transitions are possible now.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>.os-host-rtl</b></td>
|
|
<td>Indicates whether the detected horizontal scroll direction is RTL (Right To Left).</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>.os-host-resize-disabled</b></td>
|
|
<td>Indicates that the resize option is set to "none".</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>.os-host-scrolling</b></td>
|
|
<td>Indicates that a scroll is performing right now.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>.os-host-overflow</b></td>
|
|
<td>Indicates whether a overflow on any axis is present.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>.os-host-overflow-x</b></td>
|
|
<td>Indicates whether a overflow on the x-axis is present.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>.os-host-overflow-y</b></td>
|
|
<td>Indicates whether a overflow on the y-axis is present.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>.os-host-scrollbar-horizontal-hidden</b></td>
|
|
<td>
|
|
Indicates whether the horizontal scrollbar is hidden due to the "visibility" option.<br>
|
|
(If set to "hidden" this class is always applied. If set to "visible" this class is never applied. If set to "auto" this class is only applied if a overflow on the x-axis is present.)
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>.os-host-scrollbar-vertical-hidden</b></td>
|
|
<td>
|
|
Indicates whether the vertical scrollbar is hidden due to the "visibility" option.<br>
|
|
(If set to "hidden" this class is always applied. If set to "visible" this class is never applied. If set to "auto" this class is only applied if a overflow on the y-axis is present.)
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>*</b></td>
|
|
<td>The class name(s) which is set by the option "className".</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<br>
|
|
<div class="content-navigation-sub-caption">Scrollbars</div>
|
|
Now that we are aware of the class names of the host-element, we can continue with the structure of the <b>scrollbars</b>.<br>
|
|
Both scrollbars have the same DOM structure.<br>
|
|
<br>
|
|
Here is a draft of the scrollbars DOM structure as well as the intended design:
|
|
<div class="txtbox txtbox-yellow">
|
|
<i class="mdi mdi-information-outline"></i>
|
|
<span>Hover over the DOM or Design elements to get visual feedback.</span>
|
|
</div>
|
|
<pre id="classnames-scrollbars-domdraft"><code class="html"><div class="os-host">
|
|
<!-- ... --->
|
|
<span class="classnames-scrollbars-domdraft-element-scrollbar"><div class="os-scrollbar os-scrollbar-horizontal"></span>
|
|
<span class="classnames-scrollbars-domdraft-element-scrollbar-track"><div class="os-scrollbar-track"></span>
|
|
<span class="classnames-scrollbars-domdraft-element-scrollbar-handle"><div class="os-scrollbar-handle"></span>
|
|
<span class="classnames-scrollbars-domdraft-element-scrollbar-handle"></div></span>
|
|
<span class="classnames-scrollbars-domdraft-element-scrollbar-track"></div></span>
|
|
<span class="classnames-scrollbars-domdraft-element-scrollbar"></div></span>
|
|
<span class="classnames-scrollbars-domdraft-element-scrollbar"><div class="os-scrollbar os-scrollbar-vertical"></span>
|
|
<span class="classnames-scrollbars-domdraft-element-scrollbar-track"><div class="os-scrollbar-track"></span>
|
|
<span class="classnames-scrollbars-domdraft-element-scrollbar-handle"><div class="os-scrollbar-handle"></span>
|
|
<span class="classnames-scrollbars-domdraft-element-scrollbar-handle"></div></span>
|
|
<span class="classnames-scrollbars-domdraft-element-scrollbar-track"></div></span>
|
|
<span class="classnames-scrollbars-domdraft-element-scrollbar"></div></span>
|
|
<span class="classnames-scrollbars-domdraft-element-corner"><div class="os-scrollbar-corner"></span>
|
|
<span class="classnames-scrollbars-domdraft-element-corner"></div></span>
|
|
</div>
|
|
</code></pre>
|
|
<div id="classnames-scrollbars-designdraft">
|
|
scrollable-content
|
|
<div id="classnames-scrollbars-designdraft-scrollbar-horizontal" class="classnames-scrollbars-designdraft-scrollbar">
|
|
<div class="classnames-scrollbars-designdraft-scrollbar-track">
|
|
<div class="classnames-scrollbars-designdraft-scrollbar-handle">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="classnames-scrollbars-designdraft-scrollbar-vertical" class="classnames-scrollbars-designdraft-scrollbar">
|
|
<div class="classnames-scrollbars-designdraft-scrollbar-track">
|
|
<div class="classnames-scrollbars-designdraft-scrollbar-handle">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="classnames-scrollbars-designdraft-corner">
|
|
|
|
</div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
<br>
|
|
Each of the scrollbar elements can have additional classes. These classes get added if a certain behavior is fulfilled.<br>
|
|
Here is a complete listing of all class names of the <b>.os-scrollbar</b> element:
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<td>Class Name</td>
|
|
<td>Description</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><b>.os-scrollbar</b></td>
|
|
<td>Indicates that this element is a scrollbar. (The root element of all scrollbar elements)</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>.os-scrollbar-horizontal</b></td>
|
|
<td>Indicates that this element is a horizontal scrollbar.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>.os-scrollbar-vertical</b></td>
|
|
<td>Indicates that this element is a vertical scrollbar.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>.os-scrollbar-auto-hidden</b></td>
|
|
<td>Indicates that this scrollbar is hidden because of the "autoHide" option.<br>Note that this scrollbar is potentially visible and is only hidden due to the configurated "autoHide" effect.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>.os-scrollbar-auto-hidden</b></td>
|
|
<td>Indicates that this scrollbar is hidden because of the "autoHide" option.<br>Note that this scrollbar is potentially visible and is only hidden due to the configurated "autoHide" effect.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>.os-scrollbar-unusable</b></td>
|
|
<td>Indicates that this scrollbar is not usable due to no overflow or deactivation via the "overflowBehavior" option.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<br>
|
|
Here is a complete listing of all class names of the <b>os-scrollbar-track</b> element:
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<td>Class Name</td>
|
|
<td>Description</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><b>.os-scrollbar-track</b></td>
|
|
<td>Indicates that this element is a scrollbar track.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>.os-scrollbar-track-off</b></td>
|
|
<td>Indicates that click scrolling is not possible. Only applied if the "scrollbars.clickScrolling" option is false.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<br>
|
|
Here is a complete listing of all class names of the <b>.os-scrollbar-handle</b> element:
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<td>Class Name</td>
|
|
<td>Description</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><b>.os-scrollbar-handle</b></td>
|
|
<td>Indicates that this element is a scrollbar handle.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>.os-scrollbar-handle-off</b></td>
|
|
<td>Indicates that drag scrolling is not possible. Only applied if the "scrollbars.dragScrolling" option is false.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="themesandstyling-styling" data-tab-value="themesandstyling-styling">
|
|
<div class="content-navigation-main-caption">Styling</div>
|
|
<div class="content-navigation-sub-caption">Basics</div>
|
|
Please read first the <a class="inline-btn" data-navigation="[1]classnames">Class Names</a> section before you do any styling. It's very important to understand the class names and their meaning to not mess anything up!<br>
|
|
<br>
|
|
Do only change styles of element which have the following class names:
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<td>Element</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><b>.os-scrollbar</b></td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>.os-scrollbar-track</b></td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>.os-scrollbar-handle</b></td>
|
|
</tr>
|
|
<tr>
|
|
<td><b>.os-scrollbar-corner</b></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="txtbox txtbox-red">
|
|
<i class="mdi mdi-alert-circle-outline"></i>
|
|
<span>
|
|
Don't change the values of the CSS properties <code class="code-inline">opacity</code>, <code class="code-inline">transition</code> and <code class="code-inline">visibility</code> on the <code class="code-inline">.os-scrollbar</code> elements! <b>They are handled automatically</b>.<br>
|
|
Please also <b>don't</b> apply <code class="code-inline">padding</code> or <code class="code-inline">border</code> to the <code class="code-inline">.os-scrollbar-track</code> elements.
|
|
</span>
|
|
</div>
|
|
If you have to apply a style to any other element which is generated by the plugin, it's most likely wrong and there must be a different way. If this isn't the case, please open a issue on <a href="https://github.com/KingSora/OverlayScrollbars/issues" target="_blank" rel="noopener" class="inline-btn">github</a>.<br>
|
|
<br>
|
|
Due to necessary Javascript optimization the ":active" pseudo-class doesn't work / won't be applied on all elements listed above. A class with the name ".active" will be applied instead to provide the same functionality. Here is a example how you must write your selector if you want to style an ":active" element:
|
|
<pre><code class="css">/* incorrect */
|
|
.os-scrollbar:active,
|
|
.os-scrollbar-track:active,
|
|
.os-scrollbar-handle:active {
|
|
<span class="txtc-red">/* DON'T use the :active pseudo-class */</span>
|
|
}
|
|
|
|
/* correct */
|
|
.os-scrollbar.active,
|
|
.os-scrollbar-track.active,
|
|
.os-scrollbar-handle.active {
|
|
<span class="txtc-blue">/* USE the .active class insted */</span>
|
|
}</code></pre>
|
|
|
|
<div class="content-navigation-sub-caption">Theme inheritance</div>
|
|
Let's say you like the built-in "dark" theme, but you hate the rounded corners of the handles.<br>
|
|
Well, in this case you don't have to rewrite the whole style again.<br>
|
|
<br>
|
|
You can add multiple classes via the "className" option. Just separate them with blanks (spaces).<br>
|
|
Now you can do something like that:
|
|
|
|
<pre><code class="js">//initialize the plugin with custom classnames
|
|
OverlayScrollbars(document.getElementById(id), {
|
|
className : "os-theme-dark os-theme-dark-edgy"
|
|
});
|
|
</code></pre>
|
|
After this command, your host-element has the "dark" -theme applied but has also the class <code class="css code-inline">.os-theme-dark-edgy</code>.<br>
|
|
Now you can define some additional style rules:
|
|
<pre><code class="css">.os-theme-dark.os-theme-dark-edgy > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
|
|
border-radius: 0px;
|
|
}</code></pre>
|
|
Make sure that this rule overrules the default "dark" -theme rules (e.g. put it at the bottom or use <code class="css code-inline">!important</code>).<br>
|
|
That's it! With this "system" you can achieve very flexible styling.
|
|
|
|
|
|
<br>
|
|
<div class="content-navigation-sub-caption">Scrollbar handle length</div>
|
|
<b>You can change the scrollbar-handle length via CSS.</b> I know, it's a bit unusual to do it that way, but it's the most efficient and elegant way, since you can do anything with any CSS-unit such as pixel, percent and so on.<br>
|
|
Below is a full example how to achieve different handle-length styles across different instances.<br>
|
|
<br>
|
|
First we write our CSS style rules, note the selector, this styles only apply if the host-element has the class <code class="code-inline">limited-handles</code>:
|
|
<div class="txtbox txtbox-blue">
|
|
<i class="mdi mdi-information-outline"></i>
|
|
<span>If you want fixed size handles, set the min- and max- length of the handle to the same value.</span>
|
|
</div>
|
|
<pre><code class="css">.limited-handles > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
|
|
max-width: 50%;
|
|
min-width: 30px;
|
|
}
|
|
.limited-handles > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
|
|
max-height: 50%;
|
|
min-height: 30px;
|
|
}
|
|
</code></pre>
|
|
We have defined the required CSS, now we have to initialize the plugin correctly with the above described <b>theme inheritance</b> technique:<br>
|
|
<pre><code class="js">OverlayScrollbars(document.getElementById(id), {
|
|
className : "os-theme-dark limited-handles"
|
|
});</code></pre>
|
|
The result looks like this:<br>
|
|
<div id="themesandstyling-styling-handle-length-target">
|
|
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>
|
|
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.<br>
|
|
Et harum quidem rerum facilis est et expedita distinctio.<br>
|
|
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.<br>
|
|
Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.<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="content-navigation-sub-caption">Scrollbar position and length</div>
|
|
This is pretty much the same as changing the handle-length.<br>
|
|
First we write our CSS style rules:
|
|
<pre><code class="css">.deviant-scrollbars > .os-scrollbar-horizontal {
|
|
top: 0;
|
|
right: 0;
|
|
bottom: auto;
|
|
left: 10px;
|
|
width: 50%;
|
|
background: rgba(0, 0, 255, 0.3);
|
|
}
|
|
.deviant-scrollbars > .os-scrollbar-vertical {
|
|
left: 0;
|
|
bottom: 0;
|
|
right: auto;
|
|
top: 10px;
|
|
height: 50%;
|
|
background: rgba(255, 0, 0, 0.3);
|
|
}
|
|
.deviant-scrollbars.os-host-scrollbar-horizontal-hidden > .os-scrollbar-vertical {
|
|
top: 0;
|
|
}
|
|
.deviant-scrollbars.os-host-scrollbar-vertical-hidden > .os-scrollbar-horizontal {
|
|
left: 0;
|
|
}
|
|
</code></pre>
|
|
Then we initialize the plugin correctly:<br>
|
|
<pre><code class="js">OverlayScrollbars(document.getElementById(id), {
|
|
className : "os-theme-dark deviant-scrollbars"
|
|
});</code></pre>
|
|
The result looks like this:<br>
|
|
<div id="themesandstyling-styling-scrollbar-position-target">
|
|
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem.<br>
|
|
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione.<br>
|
|
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non.<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?<br>
|
|
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.<br>
|
|
Et harum quidem rerum facilis est et expedita distinctio.<br>
|
|
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere.<br>
|
|
Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores.<br>
|
|
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab.<br>
|
|
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui rationeunt.<br>
|
|
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt.<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?<br>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<br>
|
|
<div class="content-navigation-sub-caption">Template(s)</div>
|
|
In the <a data-navigation="themes" class="inline-btn">themes section</a> you can find <b>CSS templates</b> for the most common scrollbar styles.<br>
|
|
You can download and customize them as you want.<br>
|
|
<br>
|
|
Here is a simple but very efficient <b>SCSS template</b>. (even if you dont know SCSS, this template will give you a basic idea)<br>
|
|
If you don't need anything too fancy this template should be well suited for your needs.<br>
|
|
<br>
|
|
Just copy & paste it and set the variables as you like:
|
|
|
|
<pre><code class="scss">//your theme name
|
|
$theme-name: os-theme-custom;
|
|
|
|
//horizontal scrollbar
|
|
$scrollbar-horizontal-size: 6px; //horizontal scrollbar height
|
|
$scrollbar-horizontal-padding: 2px;
|
|
$scrollbar-horizontal-inner-expansion: 6px;
|
|
$scrollbar-horizontal-track-background: transparent;
|
|
$scrollbar-horizontal-track-background-hover: transparent;
|
|
$scrollbar-horizontal-track-background-active: transparent;
|
|
$scrollbar-horizontal-track-transition: background-color 0.3s;
|
|
$scrollbar-horizontal-handle-min-size: 30px; //horizontal scrollbar handle min width
|
|
$scrollbar-horizontal-handle-max-size: none; //horizontal scrollbar handle max width
|
|
$scrollbar-horizontal-handle-background: rgba(0, 0, 0, 0.4);
|
|
$scrollbar-horizontal-handle-background-hover: rgba(0, 0, 0, 0.6);
|
|
$scrollbar-horizontal-handle-background-active: rgba(0, 0, 0, 1);
|
|
$scrollbar-horizontal-handle-transition: background-color 0.3s;
|
|
|
|
//vertical scrollbar
|
|
$scrollbar-vertical-size: 6px; //vertical scrollbar width
|
|
$scrollbar-vertical-padding: 2px;
|
|
$scrollbar-vertical-inner-expansion: 6px;
|
|
$scrollbar-vertical-track-background: transparent;
|
|
$scrollbar-vertical-track-background-hover: transparent;
|
|
$scrollbar-vertical-track-background-active: transparent;
|
|
$scrollbar-vertical-track-transition: background-color 0.3s;
|
|
$scrollbar-vertical-handle-min-size: 30px; //vertical scrollbar handle min height
|
|
$scrollbar-vertical-handle-max-size: none; //vertical scrollbar handle max height
|
|
$scrollbar-vertical-handle-background: rgba(0, 0, 0, 0.4);
|
|
$scrollbar-vertical-handle-background-hover: rgba(0, 0, 0, 0.6);
|
|
$scrollbar-vertical-handle-background-active: rgba(0, 0, 0, 1);
|
|
$scrollbar-vertical-handle-transition: background-color 0.3s;
|
|
|
|
//scrollbar corner
|
|
$scrollbar-corner-background-color: transparent;
|
|
|
|
.#{$theme-name} > .os-scrollbar-horizontal {
|
|
right: $scrollbar-vertical-size + ($scrollbar-vertical-padding * 2);
|
|
height: $scrollbar-horizontal-size;
|
|
padding: $scrollbar-horizontal-padding;
|
|
}
|
|
.#{$theme-name} > .os-scrollbar-vertical {
|
|
bottom: $scrollbar-horizontal-size + ($scrollbar-horizontal-padding * 2);
|
|
width: $scrollbar-vertical-size;
|
|
padding: $scrollbar-vertical-padding;
|
|
}
|
|
.#{$theme-name}.os-host-rtl > .os-scrollbar-horizontal {
|
|
left: $scrollbar-vertical-size + ($scrollbar-vertical-padding * 2);
|
|
right: 0;
|
|
}
|
|
.#{$theme-name} > .os-scrollbar-corner {
|
|
height: $scrollbar-horizontal-size + ($scrollbar-horizontal-padding * 2);
|
|
width: $scrollbar-vertical-size + ($scrollbar-vertical-padding * 2);
|
|
background-color: $scrollbar-corner-background-color;
|
|
}
|
|
.#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track {
|
|
background: $scrollbar-horizontal-track-background;
|
|
}
|
|
.#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track {
|
|
background: $scrollbar-vertical-track-background;
|
|
}
|
|
.#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track:hover {
|
|
background: $scrollbar-horizontal-track-background-hover;
|
|
}
|
|
.#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track:hover {
|
|
background: $scrollbar-vertical-track-background-hover;
|
|
}
|
|
.#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track.active {
|
|
background: $scrollbar-horizontal-track-background-active;
|
|
}
|
|
.#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track.active {
|
|
background: $scrollbar-vertical-track-background-active;
|
|
}
|
|
.#{$theme-name}.os-host-transition > .os-scrollbar-horizontal > .os-scrollbar-track {
|
|
-webkit-transition: $scrollbar-horizontal-track-transition;
|
|
transition: $scrollbar-horizontal-track-transition;
|
|
}
|
|
.#{$theme-name}.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track {
|
|
-webkit-transition: $scrollbar-vertical-track-transition;
|
|
transition: $scrollbar-vertical-track-transition;
|
|
}
|
|
.#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before,
|
|
.#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
display: block;
|
|
}
|
|
.#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before {
|
|
top: -$scrollbar-horizontal-inner-expansion;
|
|
bottom: -$scrollbar-horizontal-padding;
|
|
}
|
|
.#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
|
|
left: -$scrollbar-vertical-inner-expansion;
|
|
right: -$scrollbar-vertical-padding;
|
|
}
|
|
.#{$theme-name}.os-host-rtl > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before {
|
|
right: -$scrollbar-vertical-inner-expansion;
|
|
left: -$scrollbar-vertical-padding;
|
|
}
|
|
.#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
|
|
border-radius: $scrollbar-horizontal-size;
|
|
}
|
|
.#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
|
|
border-radius: $scrollbar-vertical-size;
|
|
}
|
|
.#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
|
|
min-width: $scrollbar-horizontal-handle-min-size;
|
|
max-width: $scrollbar-horizontal-handle-max-size;
|
|
background: $scrollbar-horizontal-handle-background;
|
|
}
|
|
.#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
|
|
min-height: $scrollbar-vertical-handle-min-size;
|
|
max-height: $scrollbar-vertical-handle-max-size;
|
|
background: $scrollbar-vertical-handle-background;
|
|
}
|
|
.#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:hover {
|
|
background: $scrollbar-horizontal-handle-background-hover;
|
|
}
|
|
.#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover {
|
|
background: $scrollbar-vertical-handle-background-hover;
|
|
}
|
|
.#{$theme-name} > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle.active {
|
|
background: $scrollbar-horizontal-handle-background-active;
|
|
}
|
|
.#{$theme-name} > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle.active {
|
|
background: $scrollbar-vertical-handle-background-active;
|
|
}
|
|
.#{$theme-name}.os-host-transition > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
|
|
-webkit-transition: $scrollbar-horizontal-handle-transition;
|
|
transition: $scrollbar-horizontal-handle-transition;
|
|
}
|
|
.#{$theme-name}.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
|
|
-webkit-transition: $scrollbar-vertical-handle-transition;
|
|
transition: $scrollbar-vertical-handle-transition;
|
|
}
|
|
</code></pre>
|
|
<br>
|
|
If you have any problems with styling or you can't achieve your desired style, open a issue on <a href="https://github.com/KingSora/OverlayScrollbars/issues" target="_blank" rel="noopener" class="inline-btn">github</a>.
|
|
</div>
|
|
|
|
<div id="structure-domelements" data-tab-value="structure-domelements">
|
|
<div class="content-navigation-main-caption">DOM Elements</div>
|
|
To achieve the desired functionality, the plugin adds additional elements to your DOM.<br>
|
|
Each element has a specific purpose.
|
|
|
|
<div class="radio-button-bar">
|
|
<button id="radio-domelements-standard" class="radio-button active" data-radio="domelements">Standard</button>
|
|
<button id="radio-domelements-textarea" class="radio-button" data-radio="domelements">Textarea</button>
|
|
</div>
|
|
|
|
<div class="domelements-wrapper domelements-wrapper-standard">
|
|
<div class="domelements-box-wrapper">
|
|
DOM Before plugin initialization:
|
|
<div class="domelements-box domelements-box-textarea domelements-color-content-item">
|
|
<span class="domelements-box-caption">Textarea Element</span>
|
|
<p>.............</p>
|
|
<p>..........................................</p>
|
|
<p>..................................................</p>
|
|
<p>..........................................................................................</p>
|
|
<p>............................</p>
|
|
<p>................................</p>
|
|
<p>........................................................................</p>
|
|
<p>..........................................</p>
|
|
<p>.....................</p>
|
|
<p>..................................................................</p>
|
|
<p>............................</p>
|
|
<p>.............................................................................</p>
|
|
<p>.....................................</p>
|
|
<p>..................................................</p>
|
|
<p>..........................................................................................</p>
|
|
<p>............................</p>
|
|
<p>................................</p>
|
|
<p>........................................................................</p>
|
|
</div>
|
|
<div class="domelements-box domelements-color-host">
|
|
<span class="domelements-box-caption">Host Element</span>
|
|
|
|
<div class="domelements-box domelements-box-trippled domelements-color-content-item">
|
|
<span class="domelements-box-caption">Content Item 1</span>
|
|
</div>
|
|
<div class="domelements-box domelements-box-trippled domelements-color-content-item">
|
|
<span class="domelements-box-caption">Content Item 2</span>
|
|
</div>
|
|
<div class="domelements-box domelements-box-trippled domelements-color-content-item">
|
|
<span class="domelements-box-caption">Content Item 3</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="domelements-box-wrapper">
|
|
DOM After plugin initialization:
|
|
<div class="domelements-box domelements-color-host">
|
|
<span class="domelements-box-caption">Host Element</span>
|
|
<div class="domelements-box domelements-box-host-childs domelements-color-resize-observer">
|
|
<span class="domelements-box-caption">Size Observer Element</span>
|
|
</div>
|
|
<div class="domelements-box domelements-box-host-childs domelements-color-size-auto-observer">
|
|
<span class="domelements-box-caption">Size Auto Observer Element</span>
|
|
</div>
|
|
<div class="domelements-box domelements-box-host-childs domelements-color-content-glue">
|
|
<span class="domelements-box-caption">Content Glue Element</span>
|
|
</div>
|
|
<div class="domelements-box domelements-box-host-childs domelements-color-padding">
|
|
<span class="domelements-box-caption">Padding Element</span>
|
|
|
|
<div class="domelements-box domelements-color-viewport">
|
|
<span class="domelements-box-caption">Viewport Element</span>
|
|
|
|
<div class="domelements-box domelements-box-viewport-childs domelements-color-content-arrange">
|
|
<span class="domelements-box-caption">Content Arrange Element</span>
|
|
</div>
|
|
<div class="domelements-box domelements-box-viewport-childs domelements-color-content">
|
|
<span class="domelements-box-caption">Content Element</span>
|
|
|
|
<div class="domelements-box domelements-box-textarea domelements-color-content-item">
|
|
<span class="domelements-box-caption">Textarea Element</span>
|
|
<p>.............</p>
|
|
<p>..........................................</p>
|
|
<p>.....................</p>
|
|
</div>
|
|
<div class="domelements-box domelements-box-trippled domelements-color-content-item">
|
|
<span class="domelements-box-caption">Content Item 1</span>
|
|
</div>
|
|
<div class="domelements-box domelements-box-trippled domelements-color-content-item">
|
|
<span class="domelements-box-caption">Content Item 2</span>
|
|
</div>
|
|
<div class="domelements-box domelements-box-trippled domelements-color-content-item">
|
|
<span class="domelements-box-caption">Content Item 3</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="domelements-box domelements-box-host-childs domelements-color-scrollbar">
|
|
<span class="domelements-box-caption">Scrollbar Horizontal Element</span>
|
|
</div>
|
|
<div class="domelements-box domelements-box-host-childs domelements-color-scrollbar">
|
|
<span class="domelements-box-caption">Scrollbar Vertical Element</span>
|
|
</div>
|
|
<div class="domelements-box domelements-box-host-childs domelements-color-scrollbar-corner">
|
|
<span class="domelements-box-caption">Scrollbar Corner Element</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="domelements-info-wrapper">
|
|
<div class="domelements-info-item domelements-info-item-textarea">
|
|
<p class="domelements-color-content-item">Textarea:</p>
|
|
The element to which the plugin was initialized <b>(target element)</b>.<br>
|
|
After initialization this element gets wrapped by other divs and is affected by scrolling.<br>
|
|
To guarantee the proper functionality this element's style is heavily affected by the plugin.
|
|
</div>
|
|
<div class="domelements-info-item domelements-info-item-textarea">
|
|
<p class="domelements-color-host">Host Element:</p>
|
|
After initialization it is the root element which contains all divs of the plugin.<br>
|
|
</div>
|
|
<div class="domelements-info-item domelements-info-item-standard">
|
|
<p class="domelements-color-host">Host Element:</p>
|
|
The element to which the plugin was initialized <b>(target element)</b>.<br>
|
|
After initialization it is the root element which contains all divs of the plugin.<br>
|
|
This element is not affected by any inline styles.<br>
|
|
</div>
|
|
<div class="domelements-info-item domelements-info-item-standard">
|
|
<p class="domelements-color-content-item">Content Item Element(s):</p>
|
|
The element(s) which are affected by scrolling.<br>
|
|
<i>If the target element is a textarea, the textarea is this element.</i>
|
|
</div>
|
|
<div class="domelements-info-item">
|
|
<p class="domelements-color-resize-observer">Size Observer Element:</p>
|
|
Detects any size, padding, border, margin and direction changes of the host element.<br>
|
|
This element is applied even if the <a href="https://wicg.github.io/ResizeObserver/#api" target="_blank" rel="noopener" class="inline-btn">ResizeObserver</a> API is supported, because of the padding and direction change detection.
|
|
</div>
|
|
<div class="domelements-info-item">
|
|
<p class="domelements-color-size-auto-observer">Size Auto Observer Element:</p>
|
|
<b>Only applied if the plugin is initialized with the option </b><code class="code-inline js">sizeAutoCapable: true</code> <b>or if the option is set for the first time to true.</b><br>Detects if the host element has auto height, auto width or both.
|
|
</div>
|
|
<div class="domelements-info-item">
|
|
<p class="domelements-color-content-glue">Content Glue Element:</p>
|
|
<b>Only applied if the plugin is initialized with the option </b><code class="code-inline js">sizeAutoCapable: true</code> <b>or if the option is set for the first time to true.</b><br>Is responsible for the correct sizing of auto sized elements.
|
|
</div>
|
|
<div class="domelements-info-item">
|
|
<p class="domelements-color-padding">Padding Element:</p>
|
|
Manages the correct padding appearance. The size of this elements is the correct viewport size, since this element never has margin, padding or border values applied.
|
|
</div>
|
|
<div class="domelements-info-item">
|
|
<p class="domelements-color-viewport">Viewport Element:</p>
|
|
The element which contains the native scrollbars and thus is responsible for the scrolling itself. In order to hide the native scrollbars this element can have margin, padding, border as well as absolute position values applied.
|
|
</div>
|
|
<div class="domelements-info-item">
|
|
<p class="domelements-color-content-arrange">Content Arrange Element:</p>
|
|
<b>Only applied if scrollbars are natively overlaid and the browser isn't capable of native Scrollbar-Styling.</b> Is responsible for the correct hiding of natively overlaid scrollbars and the correct scroll position. If the target-element is the body element, this element is also responsible for the correct min-width and min-height if specified.
|
|
</div>
|
|
<div class="domelements-info-item">
|
|
<p class="domelements-color-content">Content Element:</p>
|
|
Is responsible for the correct appearance of percent sized elements as well as for measuring the correct overflow values.
|
|
</div>
|
|
<div class="domelements-info-item">
|
|
<p class="domelements-color-scrollbar">Scrollbar Horizontal / Vertical Element:</p>
|
|
These elements are the custom styled scrollbar elements.
|
|
The inner structure of each scrollbar element looks like:
|
|
<br>
|
|
<br>
|
|
<div class="domelements-box-scrollbar domelements-box domelements-color-scrollbar">
|
|
<span class="domelements-box-caption">Scrollbar Element</span>
|
|
<div class="domelements-box domelements-color-scrollbar-track">
|
|
<span class="domelements-box-caption">Scrollbar Track Element</span>
|
|
<div class="domelements-box domelements-color-scrollbar-handle">
|
|
<span class="domelements-box-caption">Scrollbar Handle Element</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<div class="domelements-info-item">
|
|
<p class="domelements-color-scrollbar-track">Scrollbar Track Element:</p>
|
|
Responsible for scrolling with a mouse down on the track.
|
|
</div>
|
|
<div class="domelements-info-item">
|
|
<p class="domelements-color-scrollbar-handle">Scrollbar Handle Element:</p>
|
|
Responsible for drag scrolling and scroll position indication.
|
|
</div>
|
|
</div>
|
|
<div class="domelements-info-item">
|
|
<p class="domelements-color-scrollbar-corner">Scrollbar Corner Element:</p>
|
|
This element is responsible for resizing (if activated) or for style purposes only.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="modal modal-backdrop-closeable" data-modal="extensions-compatibility-object" tabindex="-1">
|
|
<div class="modal-window">
|
|
<div class="modal-window-header">
|
|
<span>Compatibility</span>
|
|
<div class="modal-window-header-close">
|
|
<i class="mdi mdi-window-close"></i>
|
|
</div>
|
|
</div>
|
|
<div class="modal-window-content container">
|
|
A object which offers <b>compatibility</b> methods. These methods are unifying native methods which are different or not present across all browsers. (for example if methods or objects have vendor prefixes, different names or signatures and so on...)
|
|
<h6>Structure:</h6>
|
|
<pre><code class="json">{
|
|
wW : <span class="txtc-secondary-color">function</span>,
|
|
wH : <span class="txtc-secondary-color">function</span>,
|
|
mO : <span class="txtc-secondary-color">function</span>,
|
|
rO : <span class="txtc-secondary-color">function</span>,
|
|
rAF : <span class="txtc-secondary-color">function</span>,
|
|
cAF : <span class="txtc-secondary-color">function</span>,
|
|
now : <span class="txtc-secondary-color">function</span>,
|
|
stpP : <span class="txtc-secondary-color">function ( event )</span>,
|
|
prvD : <span class="txtc-secondary-color">function ( event )</span>,
|
|
page : <span class="txtc-secondary-color">function ( event )</span>,
|
|
mBtn : <span class="txtc-secondary-color">function ( event )</span>,
|
|
inA : <span class="txtc-secondary-color">function ( item, array )</span>,
|
|
isA : <span class="txtc-secondary-color">function ( array )</span>,
|
|
type : <span class="txtc-secondary-color">function ( obj )</span>,
|
|
bind : <span class="txtc-secondary-color">function ( function, thisObj [, arg1[, arg2[, ...]]] )</span>
|
|
}</code></pre>
|
|
<h6>Description:</h6>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
wW
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
A function without parameters which returns the window width.
|
|
<pre><code class="js">//Example usage
|
|
var wndWidth = compatibility.wW();</code></pre>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
wH
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
A function without parameters which returns the window height.
|
|
<pre><code class="js">//Example usage
|
|
var wndHeight = compatibility.wH();</code></pre>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
mO
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
A function without parameters which returns a <a href="https://developer.mozilla.org/de/docs/Web/API/MutationObserver" target="_blank" rel="noopener" class="inline-btn">MutationObserver</a> object or <span class="txtc-primary-color">undefined</span> if the browser doesn't support it.<br>
|
|
<pre><code class="js">//Example usage
|
|
var mO = compatibility.mO();
|
|
if(mO) {
|
|
var myMutationObserver = new mO(function(mutations) {
|
|
console.log(mutations);
|
|
});
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
rO
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
A function without parameters which returns a <a href="https://wicg.github.io/ResizeObserver/#api" target="_blank" rel="noopener" class="inline-btn">ResizeObserver</a> object or <span class="txtc-primary-color">undefined</span> if the browser doesn't support it.<br>
|
|
<pre><code class="js">//Example usage
|
|
var rO = compatibility.rO();
|
|
if(rO) {
|
|
var myResizeObserver = new rO(function(entries) {
|
|
console.log(entries);
|
|
});
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
rAF
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
A function without parameters which returns the <a href="https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame" target="_blank" rel="noopener" class="inline-btn">requestAnimationFrame</a> function or a corresponding polyfill function if the browser doesn't support it.<br>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
var rAF = compatibility.rAF();
|
|
var requestID = rAF(function() { /* example code */ });</code></pre>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
cAF
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
A function without parameters which returns the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/cancelAnimationFrame" target="_blank" rel="noopener" class="inline-btn">cancelAnimationFrame</a> function or a corresponding polyfill function if the browser doesn't support it.<br>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
var rAF = compatibility.rAF();
|
|
var requestID = rAF(function() { /* example code */ });
|
|
var cAF = compatibility.cAF();
|
|
cAF(requestID);</code></pre>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
now
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
A function without parameters which returns the number of milliseconds elapsed since January 1, 1970 00:00:00 UTC.<br>
|
|
Like <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now" target="_blank" rel="noopener" class="inline-btn">Date.now()</a> but it also works in IE8 or older browsers.
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
var time = compatibility.now();
|
|
</code></pre>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
stpP
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
A function with one parameter which prevents further propagation of the given event in the capturing and bubbling phases.<br>
|
|
Like <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation" target="_blank" rel="noopener" class="inline-btn">Event.stopPropagation()</a> but it also works in IE8 or older browsers.
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
document.addEventListener('mousedown', function(event) {
|
|
compatibility.stpP(event);
|
|
});</code></pre>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
prvD
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
A function with one parameter which prevents the default action of the given event.<br>
|
|
Like <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault" target="_blank" rel="noopener" class="inline-btn">Event.preventDefault()</a> but it also works in IE8 or older browsers.
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
document.addEventListener('mousedown', function(event) {
|
|
compatibility.prvD(event);
|
|
});</code></pre>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
page
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Gets the <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX" target="_blank" rel="noopener" class="inline-btn">pageX</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageY" target="_blank" rel="noopener" class="inline-btn">pageY</a> values of the given mouse event.<br>
|
|
Works also in IE8 or older browsers.
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
document.addEventListener('mousedown', function(event) {
|
|
var page = compatibility.page(event);
|
|
var pageX = page.x;
|
|
var pageY = page.y;
|
|
});</code></pre>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
mBtn
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Gets the clicked mouse button of the given mouse event. Returns 1 for left button, 2 for middle and 3 for right.<br>
|
|
Works also in IE8 or older browsers.
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
document.addEventListener('mousedown', function(event) {
|
|
var mouseButton = compatibility.mBtn(event);
|
|
});</code></pre>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
inA
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
A function with two parameters which returns the index of the given item in the given array or -1 if the item isn't in the given array.<br>
|
|
This function should be only used if you need the index of a specific DOM-Element in a array of DOM-Elements, because it prevents the <a href="https://stackoverflow.com/questions/18088829/script70-permission-denied-accessing-iframe-in-ie?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa" target="_blank" rel="noopener" class="inline-btn">SCRIPT70 Permission denied error</a> to happen, but due to that it can be slower.
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
var array = document.querySelectorAll('*');
|
|
var index = compatibility.inA(document.body, array);</code></pre>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
isA
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
A function with one parameter which returns a boolean which indicates whether the given argument is an array.<br>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
var first = [ 1, 2, 3 ];
|
|
var second = { prop : "value" };
|
|
framework.isArray(first); //true
|
|
framework.isArray(second); //false</code></pre>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
type
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
A function with one parameter which returns the internal JavaScript [[Class]] of an object.<br>
|
|
This function is the equivalent to the <a href="https://api.jquery.com/jQuery.type/" target="_blank" rel="noopener" class="inline-btn">jQuery type</a> function, but because jQuery is deprecating it, it's in this compatibility object.
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
//following statements are true:
|
|
framework.type(undefined) === "undefined";
|
|
framework.type() === "undefined";
|
|
framework.type(window.notDefined) === "undefined";
|
|
framework.type(null) === "null";
|
|
framework.type(true) === "boolean";
|
|
framework.type(new Boolean()) === "boolean";
|
|
framework.type(3) === "number";
|
|
framework.type(new Number(3)) === "number";
|
|
framework.type("test") === "string";
|
|
framework.type(new String("test")) === "string";
|
|
framework.type(function() { }) === "function";
|
|
framework.type([ ]) === "array";
|
|
framework.type(new Array()) === "array";
|
|
framework.type(new Date()) === "date";
|
|
framework.type(new Error()) === "error";
|
|
framework.type(/test/) === "regexp";</code></pre>
|
|
</div>
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box">
|
|
<div class="plainobjectproperty-documentation-box-title">
|
|
bind
|
|
</div>
|
|
<div class="plainobjectproperty-documentation-box-content">
|
|
Creates a new function that, when called, has its 'this' keyword set to the given thisObj value, with a given sequence of arguments preceding any provided when the new function is called.<br>
|
|
Like <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" target="_blank" rel="noopener" class="inline-btn">Function.prototype.bind()</a> but it also works in IE8 or older browsers.
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
var add = function(a, b) { return this + a + b; }
|
|
var add012 = compatibility.bind(add, 0, 1, 2);
|
|
var result = add012(); //3</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-window-footer">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal modal-backdrop-closeable" data-modal="extensions-framework-object" tabindex="-1">
|
|
<div class="modal-window">
|
|
<div class="modal-window-header">
|
|
<span>Framework</span>
|
|
<div class="modal-window-header-close">
|
|
<i class="mdi mdi-window-close"></i>
|
|
</div>
|
|
</div>
|
|
<div class="modal-window-content container">
|
|
The <b>framework</b> which OverlayScrollbars is using internally in order to make it simpler to manipulate and traverse the DOM. If the jQuery version is used, this parameter is the jQuery object. However, if the non-jQuery version is used, this parameter is a <b>jQuery-like-object</b> which has the same API-structure as jQuery but doesn't offer all its functionality.<br>
|
|
<br>
|
|
Below is a list which methods are definitely supported:
|
|
<h6>Utilities:</h6>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-util-extend">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.extend ( <span class="expander-header-weak">[deep], target [, object1 ] [, objectN ]</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-util-extend">
|
|
Merge the contents of two or more objects together into the first object.<br>
|
|
<a href="http://api.jquery.com/jQuery.extend/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
var clone = framework.extend({ }, object1, object2);
|
|
var deepClone = framework.extend(true, { }, object1, object2);</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-util-isEmptyObject">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.isEmptyObject ( <span class="expander-header-weak">object</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-util-isEmptyObject">
|
|
Determine whether an object is empty (contains no enumerable properties).<br>
|
|
<a href="http://api.jquery.com/jQuery.isEmptyObject/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework.isEmptyObject({ }); // true
|
|
framework.isEmptyObject({ prop: "value" }); // false</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-util-isPlainObject">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.isPlainObject ( <span class="expander-header-weak">object</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-util-isPlainObject">
|
|
Determine whether an object is a plain object (created using "{ }" or "new Object")<br>
|
|
<a href="http://api.jquery.com/jQuery.isPlainObject/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework.isPlainObject({ }); // true
|
|
framework.isPlainObject("test"); // false</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-util-each">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.each ( <span class="expander-header-weak">array, callback</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-util-each">
|
|
A generic iterator function, which can be used to seamlessly iterate over both objects and arrays.<br>
|
|
<a href="http://api.jquery.com/jQuery.each/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
var array = [ 10, 20, 30 ];
|
|
framework.each(array, function(index, value) {
|
|
console.log(value);
|
|
});</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-util-inArray">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.inArray ( <span class="expander-header-weak">value, array [, fromIndex ]</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-util-inArray">
|
|
Search for a specified value within an array and return its index (or -1 if not found).<br>
|
|
<a href="http://api.jquery.com/jQuery.inArray/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
var array = [ 10, 20, 30, 40 ];
|
|
framework.inArray(40, array); //4</code></pre>
|
|
</div>
|
|
<h6>DOM Node inserting / removing:</h6>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-append">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.append ( <span class="expander-header-weak">content</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-append">
|
|
Inserts content, specified by the content parameter, to the end of each element in the set of matched elements.<br>
|
|
<b>Differences to jQuery:</b>
|
|
<ul>
|
|
<li>The method doesn't accept any optional parameters.</li>
|
|
<li>The "content" parameter can't be a function.</li>
|
|
</ul>
|
|
<a href="http://api.jquery.com/append/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div").append("<div></div>");
|
|
|
|
var myElm = framework("<div></div>");
|
|
framework("div").append(myElm);</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-prepend">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.prepend ( <span class="expander-header-weak">content</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-prepend">
|
|
Inserts content, specified by the parameter, to the beginning of each element in the set of matched elements.<br>
|
|
<b>Differences to jQuery:</b>
|
|
<ul>
|
|
<li>The method doesn't accept any optional parameters.</li>
|
|
<li>The "content" parameter can't be a function.</li>
|
|
</ul>
|
|
<a href="http://api.jquery.com/prepend/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div").prepend("<div></div>");
|
|
|
|
var myElm = framework("<div></div>");
|
|
framework("div").prepend(myElm);</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-before">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.before ( <span class="expander-header-weak">content</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-before">
|
|
Inserts content, specified by the parameter, before each element in the set of matched elements.<br>
|
|
<b>Differences to jQuery:</b>
|
|
<ul>
|
|
<li>The method doesn't accept any optional parameters.</li>
|
|
<li>The "content" parameter can't be a function.</li>
|
|
</ul>
|
|
<a href="http://api.jquery.com/before/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div").before("<div></div>");
|
|
|
|
var myElm = framework("<div></div>");
|
|
framework("div").before(myElm);</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-after">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.after ( <span class="expander-header-weak">content</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-after">
|
|
Inserts content, specified by the parameter, after each element in the set of matched elements.<br>
|
|
<b>Differences to jQuery:</b>
|
|
<ul>
|
|
<li>The method doesn't accept any optional parameters.</li>
|
|
<li>The "content" parameter can't be a function.</li>
|
|
</ul>
|
|
<a href="http://api.jquery.com/after/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div").after("<div></div>");
|
|
|
|
var myElm = framework("<div></div>");
|
|
framework("div").after(myElm);</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-remove">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.remove ( <span class="expander-header-weak"></span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-remove">
|
|
Remove the set of matched elements from the DOM.<br>
|
|
<b>Differences to jQuery:</b>
|
|
<ul>
|
|
<li>The method doesn't accept any optional parameters.</li>
|
|
</ul>
|
|
<a href="http://api.jquery.com/remove/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div").remove();</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-wrap">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.wrap ( <span class="expander-header-weak">wrappingHtml</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-wrap">
|
|
Wrap an HTML structure around each element in the set of matched elements.<br>
|
|
<b>Differences to jQuery:</b>
|
|
<ul>
|
|
<li>The parameter "wrappingHtml" can only be a string.</li>
|
|
</ul>
|
|
<a href="http://api.jquery.com/wrap/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div").wrap("<div></div>");</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-wrapAll">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.wrapAll ( <span class="expander-header-weak">wrappingHtml</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-wrapAll">
|
|
Wrap an HTML structure around all elements in the set of matched elements.<br>
|
|
<b>Differences to jQuery:</b>
|
|
<ul>
|
|
<li>The parameter "wrappingHtml" can only be a string.</li>
|
|
</ul>
|
|
<a href="http://api.jquery.com/wrapAll/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div").wrapAll("<div></div>");</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-wrapInner">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.wrapInner ( <span class="expander-header-weak">wrappingHtml</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-wrapInner">
|
|
Wrap an HTML structure around the content of each element in the set of matched elements.<br>
|
|
<b>Differences to jQuery:</b>
|
|
<ul>
|
|
<li>The parameter "wrappingHtml" can only be a string.</li>
|
|
</ul>
|
|
<a href="http://api.jquery.com/wrapInner/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div").wrapInner("<div></div>");</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-unwrap">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.unwrap ( <span class="expander-header-weak"></span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-unwrap">
|
|
Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.<br>
|
|
<b>Differences to jQuery:</b>
|
|
<ul>
|
|
<li>The method doesn't accept any optional parameters.</li>
|
|
</ul>
|
|
<a href="http://api.jquery.com/unwrap/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div").unwrap();</code></pre>
|
|
</div>
|
|
<h6>DOM Node manipulation / information:</h6>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-css">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.css ( <span class="expander-header-weak">propertyName [, value]</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-css">
|
|
Get one or set one or more CSS properties for the set of matched elements.<br>
|
|
The <b>.css( properties )</b> signature is also supported.
|
|
<b>Differences to jQuery:</b>
|
|
<ul>
|
|
<li>The "propertyName" parameter always has to be a string and can't be anything other.</li>
|
|
<li>The "value" parameter always has to be a string and can't be anything other.</li>
|
|
</ul>
|
|
<a href="http://api.jquery.com/css/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div").css("display"); //get the current css "display" of the matched element
|
|
framework("div").css("display", "none"); //set the css display value to "none"
|
|
framework("div").css({ opacity: 1, display: "block", background: "red" }); //change multiple styles</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-hasClass">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.hasClass ( <span class="expander-header-weak">className</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-hasClass">
|
|
Determine whether any of the matched elements are assigned the given class.<br>
|
|
<a href="http://api.jquery.com/hasClass/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div.test-class").hasClass("test-class"); //true</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-addClass">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.addClass ( <span class="expander-header-weak">className</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-addClass">
|
|
Adds the specified class(es) to each element in the set of matched elements.<br>
|
|
<b>Differences to jQuery:</b>
|
|
<ul>
|
|
<li>The "className" parameter has always to be a string and can't be a function.</li>
|
|
</ul>
|
|
<a href="http://api.jquery.com/addClass/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div.test-class-one").addClass("test-class-two"); //add one class
|
|
framework("div.test-class-one").addClass("test-class-two test-class-three"); //add mutliple classes</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-removeClass">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.removeClass ( <span class="expander-header-weak">className</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-removeClass">
|
|
Removes the specified class(es) from each element in the set of matched elements.<br>
|
|
<b>Differences to jQuery:</b>
|
|
<ul>
|
|
<li>The "className" parameter has always to be a string and can't be a function or empty.</li>
|
|
</ul>
|
|
<a href="http://api.jquery.com/removeClass/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div.test-class-one").removeClass("test-class-two"); //removes one class
|
|
framework("div.test-class-one").removeClass("test-class-two test-class-three"); //removes mutliple classes</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-offset">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.offset ( <span class="expander-header-weak"></span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-offset">
|
|
Get the current coordinates of the first element in the set of matched elements, relative to the document.<br>
|
|
<b>Differences to jQuery:</b>
|
|
<ul>
|
|
<li>The methods desn't accept any parameters. You can't set the offset, you can only get it.</li>
|
|
</ul>
|
|
<a href="http://api.jquery.com/offset/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div").offset(); //gets the offset of the first found div element</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-position">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.position ( <span class="expander-header-weak"></span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-position">
|
|
Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.<br>
|
|
<a href="http://api.jquery.com/position/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div").position(); //gets the position of the first found div</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-scrollLeft">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.scrollLeft ( <span class="expander-header-weak">[value]</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-scrollLeft">
|
|
Gets or sets the scrollLeft offset of the matched elements.<br>
|
|
<a href="http://api.jquery.com/scrollLeft/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div").scrollLeft(); //gets the scrollLeft offset of the first found div
|
|
framework("div").scrollLeft(200); //sets the scrollLeft offset to 200 for all found divs</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-scrollTop">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.scrollTop ( <span class="expander-header-weak">[value]</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-scrollTop">
|
|
Gets or sets the scrollTop offset of the matched elements.<br>
|
|
<a href="http://api.jquery.com/scrollTop/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div").scrollTop(); //gets the scrollTop offset of the first found div
|
|
framework("div").scrollTop(200); //sets the scrollTop offset to 200 for all found divs</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-val">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.val ( <span class="expander-header-weak">[value]</span> )</span>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-attr">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.attr ( <span class="expander-header-weak">attributeName [, value]</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-attr">
|
|
Gets or sets the value of an attribute for the set of matched elements.<br>
|
|
<b>Differences to jQuery:</b>
|
|
<ul>
|
|
<li>The "attributeName" parameter has always to be a string and cant be a object.</li>
|
|
<li>The "value" parameter can't be a function.</li>
|
|
</ul>
|
|
<a href="http://api.jquery.com/attr/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div").attr("id"); //get the attribute "id" of the first matched element
|
|
framework("div").attr("id", "myId"); //set the attribute "id" for the matched element(s)</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-removeAttr">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.removeAttr ( <span class="expander-header-weak">attributeName</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-removeAttr">
|
|
Remove an attribute from each element in the set of matched elements.<br>
|
|
<a href="http://api.jquery.com/removeAttr/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div").removeAttr("id"); //remove the attribute "id" for the matched elements</code></pre>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-val">
|
|
Gets or sets the current value of the matched elements.<br>
|
|
<a href="http://api.jquery.com/scrollTop/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("input").val(); //gets the value of the first found input element
|
|
framework("input").val("hello world"); //sets the value for all found input elements to "hello world"</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-hide">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.hide ( <span class="expander-header-weak"></span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-hide">
|
|
Hide the matched elements.<br>
|
|
<b>Differences to jQuery:</b>
|
|
<ul>
|
|
<li>The method doesn't accept any additional parameters such as "duration", "complete" or "options".</li>
|
|
</ul>
|
|
<a href="http://api.jquery.com/hide/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div").hide();</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-show">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.show ( <span class="expander-header-weak"></span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-show">
|
|
Shows the matched elements.<br>
|
|
<b>Differences to jQuery:</b>
|
|
<ul>
|
|
<li>Sets the css "display" value always to "block" (ignores the the default display value).</li>
|
|
<li>The method doesn't accept any additional parameters such as "duration", "complete" or "options".</li>
|
|
</ul>
|
|
<a href="http://api.jquery.com/show/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div").show();</code></pre>
|
|
</div>
|
|
<h6>DOM traversal / filtering:</h6>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-first">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.first ( <span class="expander-header-weak"></span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-first">
|
|
Reduce the set of matched elements to the first in the set.<br>
|
|
<a href="http://api.jquery.com/first/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div").first(); //reduced to the first found div element</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-last">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.last ( <span class="expander-header-weak"></span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-last">
|
|
Reduce the set of matched elements to the final one in the set.<br>
|
|
<a href="http://api.jquery.com/last/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div").last(); //reduced to the last found div element</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-eq">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.eq ( <span class="expander-header-weak">index</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-eq">
|
|
Reduce the set of matched elements to the one at the specified index.<br>
|
|
Providing a negative number as index indicates a position starting from the end of the set, rather than the beginning
|
|
<a href="http://api.jquery.com/eq/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div").eq(2); //reduced to the 2nd div which was found
|
|
framework("div").eq(-2); //reduced to the 2nd last div which was found</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-find">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.find ( <span class="expander-header-weak">selector</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-find">
|
|
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.<br>
|
|
<b>Differences to jQuery:</b>
|
|
<ul>
|
|
<li>The "selector" parameter has to be a string and can't be DOM-Element.</li>
|
|
<li>The provided selector has to be supported by <a href="https://developer.mozilla.org/de/docs/Web/API/Document/querySelectorAll" target="_blank" rel="noopener" class="inline-btn">Document.querySelectorAll</a>. (:not() and so on aren't supported)</li>
|
|
</ul>
|
|
<a href="http://api.jquery.com/find/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("ul").find("li:first-child"); //returns the first list element</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-children">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.children ( <span class="expander-header-weak">[selector]</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-children">
|
|
Get the children of each element in the set of matched elements, optionally filtered by a selector.<br>
|
|
<b>Differences to jQuery:</b>
|
|
<ul>
|
|
<li>The provided selector has to be supported by <a href="https://developer.mozilla.org/de/docs/Web/API/Document/querySelectorAll" target="_blank" rel="noopener" class="inline-btn">Document.querySelectorAll</a>. (:not() and so on aren't supported)</li>
|
|
</ul>
|
|
<a href="http://api.jquery.com/children/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("ul").children(); //returns all list elements of the list</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-parent">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.parent ( <span class="expander-header-weak">[selector]</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-parent">
|
|
Get the parent of each element in the current set of matched elements, optionally filtered by a selector.<br>
|
|
<b>Differences to jQuery:</b>
|
|
<ul>
|
|
<li>The provided selector has to be supported by <a href="https://developer.mozilla.org/de/docs/Web/API/Document/querySelectorAll" target="_blank" rel="noopener" class="inline-btn">Document.querySelectorAll</a>. (:not() and so on aren't supported)</li>
|
|
</ul>
|
|
<a href="http://api.jquery.com/parent/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("li").parent(); //returns the "ul" element of the list element</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-is">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.is ( <span class="expander-header-weak">selector</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-is">
|
|
Check the current matched set of elements against a selector.<br>
|
|
Also supports the pseudo-selectors <code class="code-inline">:hidden</code> and <code class="code-inline">:visible</code> - <a href="https://api.jquery.com/category/selectors/visibility-filter-selectors/" target="_blank" rel="noopener" class="inline-btn">Read more</a><br>
|
|
<b>Differences to jQuery:</b>
|
|
<ul>
|
|
<li>The "selector" parameter has to be a string and can't be a function or anything other.</li>
|
|
<li>The provided selector has to be supported by <a href="https://developer.mozilla.org/de/docs/Web/API/Document/querySelectorAll" target="_blank" rel="noopener" class="inline-btn">Document.querySelectorAll</a>. (:not() and so on aren't supported)</li>
|
|
</ul>
|
|
<a href="http://api.jquery.com/is/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div").is("body"); //false
|
|
framework("div").is(":hidden");
|
|
framework("div").is(":visible");</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-contents">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.contents ( <span class="expander-header-weak"></span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-contents">
|
|
Get the children of each element in the set of matched elements, including text and comment nodes.<br>
|
|
<a href="http://api.jquery.com/contents/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div").contents();</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-each">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.each ( <span class="expander-header-weak">function</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-each">
|
|
Iterate over all selected elements executing a function for each matched element.<br>
|
|
<a href="http://api.jquery.com/each/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div").each(function(index, element) {
|
|
console.log(index);
|
|
console.log(element);
|
|
});</code></pre>
|
|
</div>
|
|
<h6>Events:</h6>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-on">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.on ( <span class="expander-header-weak">events, handler</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-on">
|
|
Adds the given event handler function for one or more events to the selected elements.<br>
|
|
<b>Differences to jQuery:</b>
|
|
<ul>
|
|
<li>The method doesn't accept the optional parameters "selector" and "data". </li>
|
|
<li>The "event" parameter has to be a string and can't be a object.</li>
|
|
</ul>
|
|
<a href="http://api.jquery.com/on/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">var exampleCallback = function(event) { console.log(event); };
|
|
//Example usage with a single event
|
|
framework("button").on("click", exampleCallback);
|
|
//Example usage with multiple events
|
|
framework("body").on("mousedown mouseup mousemove", exampleCallback);</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-off">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.off ( <span class="expander-header-weak">events, handler</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-off">
|
|
Removes the given event handler function for one or more events from the selected elements.<br>
|
|
<b>Differences to jQuery:</b>
|
|
<ul>
|
|
<li>The method doesn't accept the optional parameter "selector". </li>
|
|
<li>The "event" parameter has to be a string and can't be a object.</li>
|
|
<li>The function can't be called without parameters.</li>
|
|
</ul>
|
|
<a href="http://api.jquery.com/off/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">var exampleCallback = function(event) { console.log(event); };
|
|
//Example usage with a single event
|
|
framework("button").off("click", exampleCallback);
|
|
//Example usage with multiple events
|
|
framework("body").off("mousedown mouseup mousemove", exampleCallback);</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-one">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.one ( <span class="expander-header-weak">events, handler</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-one">
|
|
Adds the given event handler function for one or more events to the selected elements. The event handler function gets removed automatically after its first execution.<br>
|
|
<b>Differences to jQuery:</b>
|
|
<ul>
|
|
<li>The method doesn't accept the optional parameter "selector" and "data".</li>
|
|
<li>The "event" parameter has to be a string and can't be a object.</li>
|
|
</ul>
|
|
<a href="http://api.jquery.com/one/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">var exampleCallback = function(event) { console.log(event); };
|
|
//Example usage with a single event
|
|
framework("button").one("click", exampleCallback);
|
|
//Example usage with multiple events
|
|
framework("body").one("click keydown", exampleCallback);</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-trigger">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.trigger ( <span class="expander-header-weak">event</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-trigger">
|
|
Execute all handlers and behaviors attached to the matched elements for the given event.<br>
|
|
<b>Differences to jQuery:</b>
|
|
<ul>
|
|
<li>The method doesn't accept the optional parameter "extraParameters".</li>
|
|
</ul>
|
|
<a href="http://api.jquery.com/trigger/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("button").on("click", function(event) { console.log(event); });
|
|
framework("button").trigger("click");</code></pre>
|
|
</div>
|
|
<h6>Animation:</h6>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-animate">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.animate ( <span class="expander-header-weak">properties [, duration ] [, easing ] [, complete ]</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-animate">
|
|
Performs a custom animation of a set of CSS properties. You can also animate "scrollLeft" and "scrollTop".<br>
|
|
The <b>.animate( properties, options )</b> signature is supported.<br>
|
|
<b>Differences to jQuery:</b>
|
|
<ul>
|
|
<li>Promises such as "always", "fail", "done" and "start" aren't supported.</li>
|
|
<li>You can't choose a optional queue for your animation.</li>
|
|
<li>You can only animate in "px" or float (such as "opacity: 0.5"). Units like "%" or "em" aren't supported.</li>
|
|
<li>Relative animations with "+=" or "-=" aren't supported.</li>
|
|
<li>The duration parameter has always to be a number and can't be a string.</li>
|
|
<li>The only supported callback functions are: "step", "progress" and "complete".</li>
|
|
</ul>
|
|
<a href="http://api.jquery.com/animate/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div").animate({ height: "50px", opacity: 0.5, scrollTop : 0 }, 1000);</code></pre>
|
|
</div>
|
|
<div class="expander-header" data-expander-key="extensions-framework-object-stop">
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
<span>.stop ( <span class="expander-header-weak">[clearQueue ] [, jumpToEnd ]</span> )</span>
|
|
</div>
|
|
<div class="expander-content" data-expander-value="extensions-framework-object-stop">
|
|
Stops the currently-running animations on the matched elements.<br>
|
|
<b>Differences to jQuery:</b>
|
|
<ul>
|
|
<li>The optional "queue" parameter isn't supported since you can't choose custom queues for your animations.</li>
|
|
</ul>
|
|
<a href="http://api.jquery.com/stop/" target="_blank" rel="noopener" class="inline-btn">read the jQuery Documentation</a>
|
|
<pre><code class="js code-noscroll">//Example usage
|
|
framework("div").animate({ height: "50px", opacity: 0.5, scrollTop : 0 }, 1000);
|
|
framework("div").stop(); //the animation above is stopped immediately</code></pre>
|
|
</div>
|
|
</div>
|
|
<div class="modal-window-footer">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|