- Source:
Methods
(static) disableScroll(shiftopt)
Disable the scroll on the page.
- Source:
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
shift |
number
|
<optional> |
0 |
If greater than 0 the body will be shifted to the left by the width of the scrollbar, getScrollbarWidth() is used to provide this value |
(static) enableScroll(shiftopt)
Enable the scroll on the page.
- Source:
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
shift |
boolean
|
<optional> |
0 |
If greater than 0 the body will be shifted back to the left by the width of the scrollbar, getScrollbarWidth() is used to provide this value |
(static) getHashProperties(entryHashopt) → {object}
Parses a string of url hash parameters into an object of key value pairs. Converts the values to the correct type.
- Source:
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
entryHash |
string
|
<optional> |
Optional hash string to parse, without the starting #, defaults to window.location.hash without the starting # |
Returns:
- Type:
-
object
of key value pairs
Example
// url: https://example.com/#test&foo=bar&baz=qux
getHashProperties() // { test: undefined, foo: 'bar', baz: 'qux' }(static) getQueryProperties(entryQueryopt) → {object}
Parses a string of url query parameters into an object of key value pairs. Converts the values to the correct type.
- Source:
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
entryQuery |
string
|
<optional> |
Optional query string to parse, without the starting ?, defaults to window.location.search without the starting ? |
Returns:
- Type:
-
object
of key value pairs
Example
// url: https://example.com/?test&foo=bar&baz=qux
getQueryProperties() // { test: undefined, foo: 'bar', baz: 'qux' }(static) getScrollbarWidth() → {number}
Get the scrollbar width
When preventing scroll with html overflow hidden the scroll bar will disappear and the whole page will shift (if the scroll bar is visible that is). To substitute for the scrollbar width we can add a padding to the body element.
- Source:
Returns:
- Type:
-
number
The scrollbar width
Example
const scrollbarWidth = getScrollbarWidth() // 15 (on MacOS X Safari)(static) hasHorizontalScrollbarVisible(scrollbarWidthopt) → {boolean}
Check if the horizontal scrollbar is visible
- Source:
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
scrollbarWidth |
number
|
<optional> |
The width of the scrollbar, defaults to getScrollbarWidth() |
Returns:
- Type:
-
boolean
True if the horizontal scrollbar is visible, false otherwise
(static) hasVerticalScrollbarVisible(scrollbarWidthopt) → {boolean}
Check if the vertical scrollbar is visible
- Source:
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
scrollbarWidth |
number
|
<optional> |
The width of the scrollbar, defaults to getScrollbarWidth() |
Returns:
- Type:
-
boolean
True if the vertical scrollbar is visible, false otherwise
(static) hashChange(callback, singleopt)
Add a callback function to the hash change event
- Source:
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
callback |
function
|
The callback function to call when the hash changes |
|
single |
string
|
<optional> |
Optional string to make sure the listener is initialized only once, defaults to window[single] which is set to true after the first call |
Example
hashChange((hash) => {
// Do something with the hash
})(static) isIOS()
Check if the device is an iOS device
- Source:
Returns:
boolean True if the device is an iOS device, false otherwise
(static) isIOSSafari()
Check if the browser is Safari on iOS
- Source:
Returns:
boolean True if the browser is Safari on iOS, false otherwise
(static) isMobile()
Check if the device is a mobile device
- Source:
Returns:
boolean True if the device is a mobile device, false otherwise
(static) isSafari()
Check if the browser is Safari
- Source:
Returns:
boolean True if the browser is Safari, false otherwise
(static) mediaMatcher(query, callbackopt) → {boolean}
A wrapper for the matchMedia function, cause with matchMedia you can only either add a listener or check the media query
this function does both.
- Source:
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
query |
string
|
The media query to check |
|
callback |
function
|
<optional> |
The callback function to call when the media query changes |
Returns:
- Type:
-
boolean
The result of the media query
Example
mediaMatcher('(min-width: 768px)', (matches) => {
if (matches) {
// Do something
} else {
// Do something else
}
})
// Or
const isDesktop = mediaMatcher('(min-width: 768px)')