mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-06-22 09:50:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

change initialization bridging attribute name to prevent frameworks to change it back to empty

Browse Source
This commit is contained in:
Rene Haas
2022-11-09 17:44:57 +01:00
parent 14ac4b4c6a
commit 78a89157a2
7 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1 -1
View File
@@ -103,7 +103,7 @@ const osInstance = OverlayScrollbars(document.querySelector('#myElement'), {});
If you initialize OverlayScrollbars it needs a few milliseconds to create and append all the elements to the DOM. If you initialize OverlayScrollbars it needs a few milliseconds to create and append all the elements to the DOM.
While this period the native scrollbars are still visible and are switched out after the initialization is finished. This is perceived as flickering. While this period the native scrollbars are still visible and are switched out after the initialization is finished. This is perceived as flickering.
To fix this behavior apply the `data-overlayscrollbars=""` attribute to the target element (and `html` element if the target element is `body`). To fix this behavior apply the `data-overlayscrollbars-initialize` attribute to the target element (and `html` element if the target element is `body`).
### Initialization with an Object ### Initialization with an Object
<details> <details>
packages/overlayscrollbars-ngx/src/overlayscrollbars.component.ts
+1 -1
View File
@@ -30,7 +30,7 @@ const mergeEventListeners = (emits: EventListeners, events: EventListeners) =>
@Component({ @Component({
selector: 'overlay-scrollbars, [overlay-scrollbars]', // https://angular.io/guide/styleguide#component-selectors selector: 'overlay-scrollbars, [overlay-scrollbars]', // https://angular.io/guide/styleguide#component-selectors
host: { 'data-overlayscrollbars': '' }, host: { 'data-overlayscrollbars-initialize': '' },
template: `<div overlayScrollbars [options]="options" [events]="mergeEvents(events)" #content> template: `<div overlayScrollbars [options]="options" [events]="mergeEvents(events)" #content>
<ng-content></ng-content> <ng-content></ng-content>
</div>`, </div>`,
packages/overlayscrollbars-react/src/OverlayScrollbarsComponent.tsx
+1 -1
View File
@@ -60,7 +60,7 @@ const OverlayScrollbarsComponent = <T extends keyof JSX.IntrinsicElements>(
return ( return (
// @ts-ignore // @ts-ignore
<Tag data-overlayscrollbars="" {...other} ref={elementRef}> <Tag data-overlayscrollbars-initialize="" {...other} ref={elementRef}>
<div ref={childrenRef}>{children}</div> <div ref={childrenRef}>{children}</div>
</Tag> </Tag>
); );
packages/overlayscrollbars-vue/src/OverlayScrollbarsComponent.vue
+1 -1
View File
@@ -88,7 +88,7 @@ watch(
</script> </script>
<template> <template>
<component :is="element" ref="elementRef" data-overlayscrollbars=""> <component data-overlayscrollbars-initialize="" :is="element" ref="elementRef">
<div ref="slotRef"> <div ref="slotRef">
<slot></slot> <slot></slot>
</div> </div>
packages/overlayscrollbars/README.md
+1 -1
View File
@@ -103,7 +103,7 @@ const osInstance = OverlayScrollbars(document.querySelector('#myElement'), {});
If you initialize OverlayScrollbars it needs a few milliseconds to create and append all the elements to the DOM. If you initialize OverlayScrollbars it needs a few milliseconds to create and append all the elements to the DOM.
While this period the native scrollbars are still visible and are switched out after the initialization is finished. This is perceived as flickering. While this period the native scrollbars are still visible and are switched out after the initialization is finished. This is perceived as flickering.
To fix this behavior apply the `data-overlayscrollbars=""` attribute to the target element (and `html` element if the target element is `body`). To fix this behavior apply the `data-overlayscrollbars-initialize` attribute to the target element (and `html` element if the target element is `body`).
### Initialization with an Object ### Initialization with an Object
<details> <details>
packages/overlayscrollbars/src/styles/structure.scss
+3 -3
View File
@@ -61,15 +61,15 @@
.os-viewport { .os-viewport {
-ms-overflow-style: scrollbar !important; -ms-overflow-style: scrollbar !important;
} }
[data-overlayscrollbars=''], [data-overlayscrollbars-initialize],
[data-overlayscrollbars~='scrollbarHidden'], [data-overlayscrollbars~='scrollbarHidden'],
html.os-viewport-scrollbar-hidden, html.os-viewport-scrollbar-hidden,
.os-viewport-scrollbar-hidden.os-environment, .os-viewport-scrollbar-hidden.os-environment,
.os-viewport-scrollbar-hidden.os-viewport { .os-viewport-scrollbar-hidden.os-viewport {
scrollbar-width: none !important; scrollbar-width: none !important;
} }
[data-overlayscrollbars='']::-webkit-scrollbar, [data-overlayscrollbars-initialize]::-webkit-scrollbar,
[data-overlayscrollbars='']::-webkit-scrollbar-corner, [data-overlayscrollbars-initialize]::-webkit-scrollbar-corner,
[data-overlayscrollbars~='scrollbarHidden']::-webkit-scrollbar, [data-overlayscrollbars~='scrollbarHidden']::-webkit-scrollbar,
[data-overlayscrollbars~='scrollbarHidden']::-webkit-scrollbar-corner, [data-overlayscrollbars~='scrollbarHidden']::-webkit-scrollbar-corner,
html.os-viewport-scrollbar-hidden::-webkit-scrollbar, html.os-viewport-scrollbar-hidden::-webkit-scrollbar,
website/src/pages/_document.tsx
+2 -2
View File
@@ -1,9 +1,9 @@
import { Html, Head, Main, NextScript } from 'next/document'; import { Html, Head, Main, NextScript } from 'next/document';
const Document = () => ( const Document = () => (
<Html lang="en" data-overlayscrollbars=""> <Html lang="en" data-overlayscrollbars-initialize="">
<Head /> <Head />
<body data-overlayscrollbars=""> <body data-overlayscrollbars-initialize="">
<Main /> <Main />
<NextScript /> <NextScript />
</body> </body>