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

increase size observer sensitivity

Browse Source
This commit is contained in:
Rene
2021-04-22 18:02:56 +02:00
parent 92e79bad35
commit 90ece5f5f6
2 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/src/styles/sizeobserver.scss
+13 -12
View File
@@ -1,5 +1,5 @@
$scrollbar-cushion: 100px; $inflate-cushion: 100px;
$inflate-margin: 200px; $inflate-margin: 100px;
.os-size-observer, .os-size-observer,
.os-size-observer-listener { .os-size-observer-listener {
@@ -21,8 +21,6 @@ $inflate-margin: 200px;
} }
.os-size-observer { .os-size-observer {
height: 25%;
width: 25%;
z-index: -1; z-index: -1;
contain: strict; contain: strict;
display: flex; display: flex;
@@ -32,6 +30,10 @@ $inflate-margin: 200px;
border: inherit; border: inherit;
box-sizing: inherit; box-sizing: inherit;
margin: 0; margin: 0;
top: -$inflate-cushion;
right: -$inflate-cushion;
bottom: -$inflate-cushion;
left: -$inflate-cushion;
&::before, &::before,
&::after { &::after {
@@ -60,23 +62,22 @@ $inflate-margin: 200px;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
flex: auto; flex: auto;
margin: -#{$inflate-margin}; margin: -$inflate-margin;
&.ltr { &.ltr {
margin-right: -#{$inflate-margin * 2}; margin-right: -$inflate-margin * 2;
margin-left: 0; margin-left: 0;
} }
&.rtl { &.rtl {
margin-left: -#{$inflate-margin * 2}; margin-left: -$inflate-margin * 2;
margin-right: 0; margin-right: 0;
} }
// lets assume no scrollbar is 100px wide
& > .os-size-observer-listener-item { & > .os-size-observer-listener-item {
top: -$scrollbar-cushion; top: -$inflate-cushion;
right: -$scrollbar-cushion; right: -$inflate-cushion;
bottom: -$scrollbar-cushion; bottom: -$inflate-cushion;
left: -$scrollbar-cushion; left: -$inflate-cushion;
} }
} }
packages/overlayscrollbars/tests/browser/observers/sizeObserver/index.browser.ts
+2
View File
@@ -94,6 +94,7 @@ const iterate = async (select: HTMLSelectElement | null, afterEach?: () => any)
const observerElm = targetElm?.firstElementChild as HTMLElement; const observerElm = targetElm?.firstElementChild as HTMLElement;
// no overflow if not needed // no overflow if not needed
/*
if (targetElm && newContentSize.w > 0) { if (targetElm && newContentSize.w > 0) {
should.ok( should.ok(
observerElm.getBoundingClientRect().right <= targetElm.getBoundingClientRect().right, observerElm.getBoundingClientRect().right <= targetElm.getBoundingClientRect().right,
@@ -106,6 +107,7 @@ const iterate = async (select: HTMLSelectElement | null, afterEach?: () => any)
'Generated observer element inst overflowing target element. (height)' 'Generated observer element inst overflowing target element. (height)'
); );
} }
*/
if (dimensions && (offsetSizeChanged || contentSizeChanged || dirChanged || boxSizingChanged)) { if (dimensions && (offsetSizeChanged || contentSizeChanged || dirChanged || boxSizingChanged)) {
await waitForOrFailTest(() => { await waitForOrFailTest(() => {