scrollable sticky widgets attempt

This commit is contained in:
Freeplay 2023-06-08 23:30:14 -04:00
parent f5945269bf
commit 27a935a2ff
3 changed files with 48 additions and 73 deletions

View File

@ -2,79 +2,56 @@ export class StickySidebar {
private lastScrollTop = 0; private lastScrollTop = 0;
private container: HTMLElement; private container: HTMLElement;
private el: HTMLElement; private el: HTMLElement;
private spacer: HTMLElement;
private marginTop: number;
private isTop = false; private isTop = false;
private isBottom = false; private isBottom = false;
private offsetTop: number; private offsetTop: number;
private globalHeaderHeight = 59;
constructor( constructor(
container: StickySidebar["container"], container: StickySidebar["container"],
marginTop = 0,
globalHeaderHeight = 0,
) { ) {
this.container = container; this.container = container;
this.container.style.display = "flex";
this.el = this.container.children[0] as HTMLElement; this.el = this.container.children[0] as HTMLElement;
this.el.style.position = "sticky"; this.el.style.position = "sticky";
this.spacer = document.createElement("div");
this.container.prepend(this.spacer);
this.marginTop = marginTop;
this.offsetTop = this.container.getBoundingClientRect().top; this.offsetTop = this.container.getBoundingClientRect().top;
this.globalHeaderHeight = globalHeaderHeight;
} }
public calc(scrollTop: number) { public calc(scrollTop: number) {
if (scrollTop > this.lastScrollTop) { if (scrollTop > this.lastScrollTop) {
// downscroll // downscroll
const overflow = Math.max( this.isTop = false;
0,
this.globalHeaderHeight +
(this.el.clientHeight + this.marginTop) -
window.innerHeight,
);
this.el.style.bottom = null;
this.el.style.top = `${
-overflow + this.marginTop + this.globalHeaderHeight
}px`;
this.isBottom = this.isBottom =
scrollTop + window.innerHeight >= scrollTop + window.innerHeight >
this.el.offsetTop + this.el.clientHeight; this.el.offsetTop + this.el.clientHeight;
if (this.isTop) {
this.isTop = false;
this.spacer.style.marginTop = `${Math.max(
0,
this.globalHeaderHeight +
this.lastScrollTop +
this.marginTop -
this.offsetTop,
)}px`;
}
} else { } else {
// upscroll // upscroll
const overflow = this.isBottom = false;
this.globalHeaderHeight + this.isTop = scrollTop < this.el.offsetTop + 1;
(this.el.clientHeight + this.marginTop) - }
window.innerHeight;
this.el.style.top = null;
this.el.style.bottom = `${-overflow}px`;
this.isTop = if (this.isTop) {
scrollTop + this.marginTop + this.globalHeaderHeight <= if (this.el.style.alignSelf != "flex-start") {
this.el.offsetTop; this.el.style.position = "sticky";
this.el.style.bottom = null;
if (this.isBottom) { this.el.style.top = "0px";
this.isBottom = false; this.el.style.alignSelf = "flex-start";
this.spacer.style.marginTop = `${ console.log("top");
this.globalHeaderHeight +
this.lastScrollTop +
this.marginTop -
this.offsetTop -
overflow
}px`;
} }
this.offsetTop = scrollTop;
} else if (this.isBottom) {
if (this.el.style.alignSelf != "flex-end") {
this.el.style.position = "sticky";
this.el.style.bottom = "0px";
this.el.style.top = null;
this.el.style.alignSelf = "flex-end";
console.log("bottom");
}
this.offsetTop = window.innerHeight + scrollTop - this.el.scrollHeight;
} else {
this.el.style.position = "relative";
this.el.style.top = this.offsetTop + "px";
this.el.style.bottom = null;
this.el.style.alignSelf = null;
} }
this.lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; this.lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;

View File

@ -20,7 +20,7 @@
</MkStickyContainer> </MkStickyContainer>
<div v-if="isDesktop" ref="widgetsEl" class="widgets-container"> <div v-if="isDesktop" ref="widgetsEl" class="widgets-container">
<XWidgets /> <XWidgets @mounted="attachSticky" />
</div> </div>
<button <button
@ -380,6 +380,13 @@ const onContextmenu = (ev: MouseEvent) => {
); );
}; };
const attachSticky = (el: any) => {
const sticky = new StickySidebar(widgetsEl);
addEventListener("scroll", () => {
sticky.calc(window.scrollY)
}, { passive: true });
};
function top() { function top() {
window.scroll({ top: 0, behavior: "smooth" }); window.scroll({ top: 0, behavior: "smooth" });
} }
@ -440,7 +447,7 @@ console.log(mainRouter.currentRoute.value.name);
$widgets-hide-threshold: 1090px; $widgets-hide-threshold: 1090px;
// 100vh ... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ // 100vh ... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
height: 100%; min-height: calc(var(--vh, 1vh) * 100);
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
@ -550,14 +557,9 @@ console.log(mainRouter.currentRoute.value.name);
} }
> .widgets-container { > .widgets-container {
margin-right: calc(var(--margin) / 2); padding: 0 var(--margin);
width: calc(300px + (var(--margin) * 1.5)); width: 300px;
flex: 0 0 auto;
box-sizing: content-box; box-sizing: content-box;
> :deep(.widgets) {
padding-left: var(--margin);
padding-right: calc(var(--margin) / 2);
}
@media (max-width: $widgets-hide-threshold) { @media (max-width: $widgets-hide-threshold) {
display: none; display: none;

View File

@ -85,22 +85,18 @@ function updateWidgets(widgets) {
<style lang="scss" scoped> <style lang="scss" scoped>
.widgets { .widgets {
position: sticky; position: sticky;
top: var(--stickyTop, 0px);
height: min-content; height: min-content;
min-height: 100vh; min-height: 100vh;
max-height: 100vh; padding: var(--margin) 0;
box-sizing: content-box; box-sizing: border-box;
overflow: hidden auto;
&:not(:hover):not(:focus-within)::-webkit-scrollbar {
width: 0;
}
> * { > * {
margin: var(--margin) 0; margin: var(--margin) 0;
width: 300px; width: 300px;
}
> :first-child { &:first-child {
margin-top: calc(var(--margin) * 2); margin-top: 0;
}
} }
> .add { > .add {