mirror of
https://github.com/tenrok/OverlayScrollbars.git
synced 2026-06-17 17:20:35 +03:00
improve code
This commit is contained in:
+6
-6
@@ -1,5 +1,5 @@
|
|||||||
import 'styles/overlayscrollbars.scss';
|
|
||||||
import './index.scss';
|
import './index.scss';
|
||||||
|
import 'styles/overlayscrollbars.scss';
|
||||||
import should from 'should';
|
import should from 'should';
|
||||||
import { OverlayScrollbars } from 'overlayscrollbars';
|
import { OverlayScrollbars } from 'overlayscrollbars';
|
||||||
|
|
||||||
@@ -28,11 +28,12 @@ const resizeBetweenB: HTMLElement | null = document.createElement('div');
|
|||||||
let rootUpdateCount = 0;
|
let rootUpdateCount = 0;
|
||||||
let aUpdateCount = 0;
|
let aUpdateCount = 0;
|
||||||
let bUpdateCount = 0;
|
let bUpdateCount = 0;
|
||||||
const osInstanceRoot = OverlayScrollbars(
|
OverlayScrollbars(
|
||||||
targetRoot!,
|
targetRoot!,
|
||||||
{},
|
{},
|
||||||
{
|
{
|
||||||
initialized() {
|
initialized() {
|
||||||
|
addClass(targetRoot!.querySelector('.os-viewport'), 'flex');
|
||||||
addClass(resizeBetweenRoot, 'resize resizeBetween');
|
addClass(resizeBetweenRoot, 'resize resizeBetween');
|
||||||
targetRoot!.append(resizeBetweenRoot);
|
targetRoot!.append(resizeBetweenRoot);
|
||||||
},
|
},
|
||||||
@@ -46,11 +47,12 @@ const osInstanceRoot = OverlayScrollbars(
|
|||||||
},
|
},
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
const osInstanceA = OverlayScrollbars(
|
OverlayScrollbars(
|
||||||
targetA!,
|
targetA!,
|
||||||
{},
|
{},
|
||||||
{
|
{
|
||||||
initialized() {
|
initialized() {
|
||||||
|
addClass(targetA!.querySelector('.os-viewport'), 'flex');
|
||||||
addClass(resizeBetweenA, 'resize resizeBetween');
|
addClass(resizeBetweenA, 'resize resizeBetween');
|
||||||
targetA!.append(resizeBetweenA);
|
targetA!.append(resizeBetweenA);
|
||||||
},
|
},
|
||||||
@@ -65,7 +67,7 @@ const osInstanceA = OverlayScrollbars(
|
|||||||
},
|
},
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
const osInstanceB = OverlayScrollbars(
|
OverlayScrollbars(
|
||||||
targetB!,
|
targetB!,
|
||||||
{},
|
{},
|
||||||
{
|
{
|
||||||
@@ -94,8 +96,6 @@ resize(resizeBetweenB!);
|
|||||||
const start = async () => {
|
const start = async () => {
|
||||||
setTestResult(null);
|
setTestResult(null);
|
||||||
|
|
||||||
// target?.removeAttribute('style');
|
|
||||||
|
|
||||||
setTestResult(true);
|
setTestResult(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
+3
-6
@@ -1,19 +1,16 @@
|
|||||||
<div id="controls">
|
<div id="controls">
|
||||||
<button id="start">start</button>
|
<button id="start">start</button>
|
||||||
<div>UpdatesRoot: <span id="updatesRoot"></span></div>
|
|
||||||
<div>UpdatesA: <span id="updatesA"></span></div>
|
|
||||||
<div>UpdatesB:</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="stage">
|
<div id="stage">
|
||||||
<div>
|
<div>
|
||||||
<div id="targetRoot" class="container">
|
<div id="targetRoot" class="container">
|
||||||
<div id="targetA" class="container">
|
<div id="targetA" class="container">
|
||||||
<div id="targetB" class="container">
|
<div id="targetB" class="container">
|
||||||
<div id="resizeB" class="resize">B <span id="updatesB"></span></div>
|
<div id="resizeB" class="resize">UpdatesB: <span id="updatesB"></span></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="resizeA" class="resize">A</div>
|
<div id="resizeA" class="resize">UpdatesA: <span id="updatesA"></span></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="resizeRoot" class="resize">Root</div>
|
<div id="resizeRoot" class="resize">UpdatesRoot: <span id="updatesRoot"></span></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+10
-1
@@ -25,6 +25,7 @@ body {
|
|||||||
width: 60%;
|
width: 60%;
|
||||||
height: 60%;
|
height: 60%;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
margin: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.resize {
|
.resize {
|
||||||
@@ -42,7 +43,7 @@ body {
|
|||||||
background: tomato;
|
background: tomato;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.resizeBtn {
|
.resizeBtn {
|
||||||
@@ -58,3 +59,11 @@ body {
|
|||||||
#targetRoot {
|
#targetRoot {
|
||||||
height: 80%;
|
height: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#targetA {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user